JSX and Why We Use It?
What is JSX?
JSX stands for JavaScript XML. This is a type of file utilized by React which allows us to use JavaScript language and all of its rich functionality coupled together with HTML. It’s basically a marriage between JavaScript and HTML, which makes the HTML file really easy to understand. This marriage between a programming language and the markup language makes applications robust and boosts their performance. The reason behind using it with React is to describe what the UI should look like. JSX produces React “elements”, which are rendered into rich user interfaces.
Example of JSX
Let’s look at an example of JSX, where we declare a variable called person and technology and then use it inside JSX by wrapping it in curly braces (a standard procedure for embedding expressions in JSX):
Just like that React will render an h1 that will say — “Hello, Aliona! Welcome to React” in the browser. We’ve only scratched the surface with what we can do with JSX. JSX allows us to render complex interactive web and mobile UIs.
What is Babel?
Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ (ES6+) code into a backward-compatible version of JavaScript that can be run by older JavaScript engines. Babel is a popular tool for using the newest features of the JavaScript programming language.
Browsers don’t understand and can’t read JSX therefore we have to transform it into regular JavaScript objects first, using JSX transformers like Babel and then pass it to the browser.
