Babel is the library that helps it convert to Javascript code. You can learn a bit more about Babel here.I’m sure you want to see how the converted code looks like, right? You can check that for yourself using one of the below links. There, you just have to paste your JSX code and it’ll convert to equivalent Javascript for you.
https://reactjs.org/jsx-compiler.html/
For example, if you paste the below code:
const App = () => { return <div>Hello World!</div>; }
It’s equivalent Javascript code will be:
"use strict"; var App = function App() { return React.createElement("div", null, "Hello World!"); };
This is the code that your browser can understand easily. In the above code, we’re creating a Javascript element named div, having value “Hello World”. Now you may question that if we can write Javascript code directly, then what’s the point of writing in JSX?
Table of Content
- What is JSX?
- How to convert JSX into Javascript?
- Why should you write in JSX instead of Javascript?
- How to write inline CSS in JSX?
- What’s the difference between standard CSS and CSS inside JSX?
- How to use multiple CSS inline properties inside JSX?
- How to add a class to HTML in JSX?
- How to reference Javascript variables in JSX?
- How to show a Javascript object in JSX?