Many people assume you have to use it in order to run a React project, especially because almost every beginners tutorial out there mentions it in the project setup instructions.
But do you have to use it?
Node.js provides the most popular "tools platform" to make working with React easier and more streamlined, for the following main reasons:
More specifically (and just as a popular example), the Webpack package makes it very easy to:
- Enable code splitting.
- Minify and compress code.
- And much more!
Node.js enables module imports management, using the
require()(CommonJS modules) or
import ...(ECMAScript modules) syntax, which is great for having encapsulation and import modules as needed.
It may be the case that you only need to create a prototype or a small tool, and setting up a build pipeline with Webpack would be an overkill.
I personally encountered such a scenario where i had to create a React coding challenge to screen potential candidates for my company, using CoderPad's platform.
Not using Node.js allows you to have just one small HTML file which you could then easily drop into any HTTP server.
This is what not using Node.js for a React application entails:
1. Load React from the CDN instead of NPM:
In your HTML file, include:
<head> <meta charset="UTF-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script> </head>
2. Get rid of JSX
To render the following:
<div> <h1>Hello World</h1> <a>Test!</a> </div>
You would have to write it as:
ReactDOM.render( React.createElement('div', null, React.createElement('h1', null, 'Hello World') React.createElement('a', null, 'Test!') ), document.getElementById('root'));
Although you can include Babel in your scripts:
<head> <meta charset="UTF-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> </head>
And then use JSX like:
<body> <div id="root"></div> <script type="text/jsx"> const App = () => [<Comp1/>, <Comp2/>]; const Comp1 = () => <h1>Hello World</h1>; const Comp2 = () => <a>Test!</a>; ReactDOM.render( <App/>, document.getElementById('root') ); </script> </body>
3. Using NPM packages
Some packages have a CDN link which you could then just include in your
For those that don't, that are workarounds like using Browserify, but this is a bit out of scope for this post.
To sum up, Node.js and the packages/tools that use it, just make every task you have to do around your React project easier, overall providing a great developer experience.
However, depending on your project and preferences, you might opt out from using it, and there is nothing wrong with that 😄
Happy coding!! 🚀