Menu
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>, document.getElementById('root') );
</script>
</body>
</html>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')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="component2.js"></script>
</body>
</html>Why does this not work when I split it into 2 files?
836
asked Apr 06 '26 11:04
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(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
ReactDOM.render(React.createElement(
'h1',
null,
'Hello, world!'
), document.getElementById('root'));<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="component2.js"></script>
</body>
</html>You can find the documentation about the same in https://reactjs.org/docs/add-react-to-a-website.html
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
