CODEWITHSUNDEEP
reactjsjsxcreate-react-app
Edward Tanguay
Edward Tanguay

Reputation: 193312

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

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:

enter image description here

Upvotes: 0

Views: 401

Answers (1)

Ryan Le
Ryan Le

Reputation: 8412

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

Upvotes: 1

Related Questions