To myself... Remind yourself about the Javascript basics, again.

New developers often use JSX and ES6 to write React code with create-react-app without knowing much as to how the browser can render the page correctly.

If curiosity has struck you now, the answer to that is through Babel.

What is Babel?

Babel is a Javascript compiler that translates source files into ES5 which is the standard specification implemented in major browsers today. It can compile JSX into ES5 Javascript functions as well as compile ES6 into ES5 Javascript. This process is known as transpilation because it turns the original source code into a new source code rather than outputting executable/s.

Configuring Babel for React

In order to transpile JSX or ES6 source codes, we need to configure Babel. Inherent in itself, it is very much configurable and luckily, there are some very useful presets of configuration we can easily use and install. These are @babel/preset-env @babel/preset-react.

After the installation is complete, we need to create a configuration file, typically named babel.rc located in the root folder.

 {    "presets": [       "@babel/preset-env",       "@babel/preset-react"    ] }

Now having these all set up, we can now write code in JSX and ES6 and execute the output files in the browser.

 This free site is ad-supported. Learn more
​