JSX and Babel In React

I started diving into React and trying to get a deep understanding of everything and how it works. When using JSX it made me want to learn more about it and how the browser is able to understand it, so I started researching. Here is what I’ve learned!

JSX is short for JavaScript XML. We use HTML to write HTML in a React app. JSX provides us with an efficient way to utilize HTML in React with its syntactic sugar. Just to be clear, it is not required to write JSX in React but it is a common practice because of how much time and code it saves!

JSX lets us write crisp HTML/XML-like structures in the same file our JavaScript code lives. Babel’s job is to transform these expressions into actual JavaScript code so the browser can understand our code. Basically, JSX allows us to put HTML into JavaScript.
Now you might be wondering, what is Babel?

According to the official Babel docs, Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. React uses JSX syntax. Babel is a JavaScript compiler, it converts JSX code into vanilla JavaScript. You can think of babel as the connector between your JSX code and "executable" JavaScript code that browsers can understand. React also uses ES6, which is not supported by a lot of browsers. Fortunately, Babel converts the ES6 code to a code which is compatible with the browsers.

So that's how JSX and Babel work in React! At first just seemed like magic but once I dove into how everything works, it started making sense. Thanks for stopping by!