How to load react/react-dom in a single html page?

Question

React and/or react-dom are not loading properly. But why not?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src='babel.min.js'type='text/javascript'></script>
    <script src='react.js' type='text/javascript'></script>
    <script src='react-dom.js' type='text/javascript'></script>


    <script type="text/babel">

    class App extends React.Component {
        render() {
            return (
                <div>Hello world</div>
            );
        }
    }   

    ReactDOM.render(
        <App />,
        document.getElementById('root')
    );
    </script>
</head>
<body>
    <div id="root">
    </div>
</body>
</html>

The first complaint is react.js:14 Uncaught ReferenceError: process is not defined at react.js:14

react.js and react-dom.js are both version 16.2.0

balfonso · Accepted Answer · 2017-12-06 17:23:45Z

1

You can use scripts hosted from a cdn like these...

<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/[email protected]/babel.min.js"></script>

Just copy paste that and replace what you have... or if you want to host it on your own server, you can view source and copy paste them on a file. Also, please make sure that they're on the correct order.

You can also find a working example on this react guide - https://reactjs.org/docs/installation.html#creating-a-new-application

Hope this helps! Thank :)

UPDATE:

Other options you can do to setup React locally will be...

1.) Setup your local dev environment and workflow by using bundlers like Browserify or Webpack. For that you have to have knowledge with npm and webpack. Here's a good setup tutorial if you want to do it all by yourself - https://www.codecademy.com/articles/react-setup-i

2.) Use create-react-app, which is a quick starter kit from Facebook. Here's the link to their repo - https://github.com/facebookincubator/create-react-app

edited Dec 6, 2017 at 17:23

answered Dec 6, 2017 at 2:09

balfonso

6411 gold badge9 silver badges18 bronze badges

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

7 Comments

P.H. Over a year ago

You are right. Using your script tags resolves the problem, but can we continue the discussion a little longer. I copied the urls and converted them into anchor tags and then did a save link as on each one. And the result still fails. Its as if loading them from the CDN is somehow different from loading them locally. But how can that be?

P.H. Over a year ago

And I kept the order as you suggested: react, then react-dom, and then babel.

balfonso Over a year ago

hmm... I'm not sure what you are trying to achieve but honestly I wouldn't really recommend you to plainly copy the scripts on your own files even if that would work. IMHO, I think the best way is to setup your local dev environment and workflow by using bundlers like Browserify or Webpack. For that you have to have knowledge with npm and webpack. Here's a good setup tutorial if you want to do it all by yourself - codecademy.com/articles/react-setup-i

balfonso Over a year ago

You can also use create-react-app which is an official starter kit from Facebook. github.com/facebookincubator/create-react-app and Lastly (the easiest one) is to again, use minified and CDN-hosted scripts

balfonso Over a year ago

btw, if you don't mind, I've also updated the answer so it can easily be seen by others. thanks :)

|

HoldOffHunger · Accepted Answer · 2020-08-10 20:44:06Z

0

My ultimate goal was to take a developed react app and deploy it to an Apache or Nginx server. Instead of using the CDN, what I should have done, was to

Edit the package.json file to reflect the applications final destination
Run "npm run build"
Copied the contents of the build directory to my final target location

See https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build and https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#building-for-relative-paths

edited Aug 10, 2020 at 20:44

HoldOffHunger

21.3k11 gold badges123 silver badges147 bronze badges

answered Dec 12, 2017 at 13:16

P.H.

4811 gold badge4 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to load react/react-dom in a single html page?

2 Answers 2

UPDATE:

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

UPDATE:

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related