What is Babel and how does it work with JSX?
Babel is a popular JavaScript compiler and transpiler.
When working with React, Babel's main role is to convert JSX into regular JavaScript that browsers can understand. Under the hood, Babel takes JSX code and transforms it into React.createElement()
function calls. These calls create the virtual DOM elements that React uses to efficiently update the UI. Besides JSX, Babel can also convert newer JavaScript (ES6/ES7+) syntax into older versions for better browser compatibility.
Example:
const element = <h1>Hello, World!</h1>;
gets converted by Babel to:
const element = React.createElement('h1', null, 'Hello, World!');