How to put React code into a separate file?

Question

I'm new to React and having trouble placing React code into separate files (i.e. moving the React code out of my main html file). Here is a simple example. The code below works fine. I get the correct "Hello, World!" output.





  
  Hello World

When I try to split this into 2 files, "Hello, world!" does not display at all. That code is below:

ReactDOM.render( <
  h1 > Hello, world! < /h1>,
  document.getElementById('root')
);







  
  Hello World

Why does this not work when I split it into 2 files?

user_8903920 · Answer

You are almost correct. Remove the type="text/babel" from the html file

Then convert your JSX into plain using by keeping it in an src folder and running the command npx babel --watch src --out-dir . --presets react-app/prod

which will create a file component2.js

ReactDOM.render(React.createElement(
  'h1',
  null,
  'Hello, world!'
), document.getElementById('root'));

From src/component2.js, which is

ReactDOM.render(
  Hello, world!,
  document.getElementById('root')
);

ReactDOM.render(React.createElement(
  'h1',
  null,
  'Hello, world!'
), document.getElementById('root'));



  
    
    Hello World

You can find the documentation about the same in https://reactjs.org/docs/add-react-to-a-website.html

user_12970270 · Answer

@SydneyY's advice I think worked here. When I inspected in the browser and then looked in the console I got errors like this:

Access to XMLHttpRequest at component2.js from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

I was able to solve this issue by setting up a local development environment using create-react-app and then importing component2.js through the index.js file that create-react-app sets up.

user_6200840 · Answer

Your .js file is not having access to ReactDOM and you will also need to add

type="text/babel"

as script attribute.

How to put React code into a separate file?

3 Answers