Node.js is an open-source JavaScript runtime environment, built on Chrome's V8 JavaScript engine, that allows us to execute JavaScript code outside of the browser.
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?
Why do React developers love Node.js?
Node.js provides the most popular "tools platform" to make working with React easier and more streamlined, for the following main reasons:
-
Node.js ships with NPM - a reliable package manager for JavaScript (the company behind it, npm Inc., was acquired by GitHub earlier this year). The NPM CLI makes it very easy and convenient to manage your React project dependencies.
More specifically (and just as a popular example), the Webpack package makes it very easy to:- Bundle React application files into just one JavaScript file.
- Transpile JSX/TypeScript to JavaScript, ES6 to ES5, SASS to CSS, etc..(with Babel).
- Enable code splitting.
- Minify and compress code.
- And much more!
Node.js enables module imports management, using the
require()(CommonJS modules) orimport ...(ECMAScript modules) syntax, which is great for having encapsulation and import modules as needed.Node.js is a popular platform to run a web server that can host a React application. Although it is not mandatory to do so, many projects take advantage of this since it allows the use of one programming language (JavaScript) for both the backend and frontend. It also enables executing React code on the server (server-side rendering) - which is a very attractive approach for some projects. (you can do server-side rendering with other languages as well, but it will not be as easy as Node.js)
Do you have to use Node.js?
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 <script/> tag.
For those that don't, that are workarounds like using Browserify, but this is a bit out of scope for this post.
Conclusion
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!! 🚀
Top comments (0)