React without Webpack

You just have to include the standalone version of babel, like it is explained in the docs: https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx

Quickly Try JSX

The quickest way to try JSX in your project is to add this tag to your page:

Now you can use JSX in any tag by adding type="text/babel" attribute to it. Here is an example HTML file with JSX that you can download and play with.

This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production. When you’re ready to move forward, remove this new tag and the type="text/babel" attributes you’ve added. Instead, in the next section you will set up a JSX preprocessor to convert all your tags automatically.

Here's an example:

index.html

<body>

    <div id="root"></div>

    <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>

    <script type="text/babel">

        function Hello(props) {
            const [name, setName] = React.useState(props.name);
            return (
                <h1 onClick = {() => setName(Math.random().toString(36).substring(5))}>
                    Hello {name}
                </h1>
            );
        }

        ReactDOM.render(
            <Hello name='World'/>,
            document.getElementById('root'),
        );

    </script>

</body>


Jsx transformer is deprecated it seems.

Update 04/08/2019 : use https://github.com/developit/htm for a minimalist react setup.

If you don't want to use webpack, you have to think about which features you can live without.

With the advancement of browsers' support for ES6 features, you can now have ES6 syntax and also use modules (when activating experimental flags) without using Webpack.

If you want to use JSX, you will always need to transpile it to JS because there is no native support for it in browsers on the horizon. The most simple way of doing that is to add a Babel middleware with the "React" preset, to your development server.

Dependency management is also going to be complicated, because npm provides packages in CommonJS, which can't run as is in the browser...

If you want to experiment with that, you can check out an experimental React starter-kit that I've put on GitHub React Without Webpack that attempts to replicate most of webpack features using native browser features and http2.


The simplest way:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">  
</head>

<body>
  <div id="root"></div>

  <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>

  <script type="text/babel">

      class Hello extends React.Component{
        render() {
          return <p>Hello {this.props.name}</p>;
        };
      }

      ReactDOM.render(
        <Hello name='World'/>,
        document.getElementById('root'),
      );
  </script>
</body>

</html>

The easiest way not to use webpack is to just use babel.

At the moment the most minimal set-up I can figure out is to use the babel-cli and babel-preset-react packages.

If you have a package.json file set up you just need to type:

npm install babel-cli babel-preset-env --save-dev

Then you need a .babelrc file with at least the following content: {"presets": ["react"]}.

If for example your javascript sources are in a js folder, you can compile them to a lib folder by adding a scripts field to your package.json like this:

"scripts": {
  "build": "babel js --out-dir lib"
},

So running npm run build compiles your javascript files to a lib folder.

Then you just need to link the compiled file in your html, like this:

<script src="lib/script.js"></script>

A minimal code to use react would be: 

const HelloWorld = function HelloWorld(props, context) {
  return <p>Hello <strong>React</strong>!</p>;
};

ReactDOM.render(
  <HelloWorld />,
  document.getElementById('root'),
);

Notice that with this approach you are not transpiling es6 to es5, so if you want to support older browsers you still need to add the babel-preset-env package, and to modify the .babelrc file like this

{
  "presets": ["env", "react"]
}

Tags:

Gruntjs

Reactjs

Recent Posts