search

atlaschiew / react-study

happy reacting
0 stars 0 forks source link

How browser understands JSX? #7

Open atlaschiew opened 1 year ago

atlaschiew commented 1 year ago

browser does not understand this JSX because it's not valid JavaScript code. This is because we're assigning an HTML tag to a variable that is not a string but just HTML code.

So to convert it to browser understandable JavaScript code, we use a tool like Babel which is a JavaScript compiler/transpiler.

You can set up your own babel configuration using Webpack as I show in this article. Or you can use create-react-app which internally uses Babel for the JSX to JavaScript conversion.

atlaschiew commented 1 year ago

check this out https://github.com/facebook/create-react-app/blob/v5.0.1/packages/react-scripts/config/webpack.config.js#L417 to see how react-script configure webpack to use babel on compiling jsx code