How is it that the index.js file of a create-react-app can parse JSX?

Question

After creating a site with create-react-app, one sees that JSX gets rendered in the index.js file with the ReactDOM.render() method.

How can it be, then, that JSX is still being parsed outside that method, as is shown here:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const jsxArray = [
    <div>test</div>,
    <div>test</div>,
    <div>test</div>
];

console.log(jsxArray);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Output in console:

Don't really get what you mean by "still being parsed outside that method"? — Ryan Le
– Ryan Le, Commented Sep 7, 2021 at 8:43
Well, in a regular JavaScript file (which is what I thought index.js was), an array like that is not valid JavaScript. Somehow it is being parsed into JavaScript objects as is the case were it in App.js, for instance. — Edward Tanguay
– Edward Tanguay, Commented Sep 7, 2021 at 8:45
The file extension is completely irrelevant. Your source files are processed by webpack and babel, and the outcome is plain old javascript as long as babel-loader is configured to pick up any *.js files — Martin
– Martin, Commented Sep 7, 2021 at 8:52

Ryan Le · Accepted Answer · 2021-09-07 08:59:36Z

1

It's babel compiler in the work

Babel just compiles any valid syntax within the targeted file which match the plugin, it basically does not care if you put the syntax inside any valid Reactjs component or not.

So basically, you can set up any file with babel compiler target to jsx it will return any jsx syntax within that file to a normal javascripts.

And it's also not necessary to be in any actual component to do that

You could try it here

answered Sep 7, 2021 at 8:59

Ryan Le

8,5101 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How is it that the index.js file of a create-react-app can parse JSX?

1 Answer 1

It's babel compiler in the work

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

It's babel compiler in the work

Comments

Your Answer

Sign up or log in

Post as a guest

Related