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

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

1 answer

  • answered 2017-12-06 02:09 bawun

    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/babel-standalone@6.15.0/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