An ode to JSX
If you are new to using React you may be asking yourself, “what exactly is JSX and why can’t I just stick with regular ol’ vanilla JavaScript?” Well, a simplified answer is because it allows you to put HTML into JavaScript instead of the other way around. Plus, it ends up being faster than normal JavaScript because it performs optimizations while it compiles the source code into JavaScript. The team at Facebook even created it to simplify the developer experience, so why wouldn’t you use it?
Java Script Xml
JSX stands for JavaScript XML and is just another extension of JavaScript with a different syntax. The HTML/XML like syntax is used by React and intended to be used by preprocessors(Babel) to transform HTML-like text into standard JavaScript objects that an engine will be able to parse. JSX will allow you to write clear and concise HTML/XML-like tree structures right along with Javascript in the same file. Your preprocessor(Babel) will then do its’ job to transform the expression into actual JavaScript code. Some people consider JSX as a set of shortcuts to write React. Pretty cool right!
Pros
- Easier identification of errors in the HTML code that otherwise could go unnoticed
- Leverage the full power of JavaScript in HTML
- Allows the VirtualDOM to update just to the information that has changed for a cheaper and quicker render
- The ability to pass around elements with ease
Cons
- The documentation may be difficult for newcomers to understand
- React is only focused on the view part of the (Model-View-Controller) pattern
Here is an example of the difference in using the JSX syntax vs. not using it.
VS.
There you have it!
I personally think using JSX makes the code way easier to read and look a lot cleaner. The ability to pass around elements in JavaScript as easy as a good bottle of whiskey around the campfire is really what makes using JSX stand out above any other way of writing a React application. Sure you can go another route, but I wouldn’t recommend it. If you liked this content give me a follow on my LinkedIn or Github and check out some of my other blogs!
