Some people mistakenly assume that Node is required in order to use React. It is not. You don’t need Node to run a React project. You don’t even need a browser.
React gives you a language to describe a user interface (UI). That interface could be the controls in your car, a modern fridge screen, or your microwave buttons. Basically, it could be any interface where a user needs to read and interact with an intelligent device.
React was initially made for the web user interface and it is most popular there. This is why we have the ReactDOM library that works with a browser’s DOM. However, React today is also popular for non-Web interfaces like iOS, Android, virtual reality, and even command line interfaces.
Node is the most popular platform for tools to make working with React easier. I think that’s the case for 2 main reasons:
Node ships with a reliable package manager (NPM) and it works with the NPM registry (hosted at npmjs.com). Using the NPM CLI, it is very easy install a package from the many available in the registry.
Node has reliable module dependency managers ("CommonJS" modules and ECMAScript modules). For CommonJS modules, this is basically the "require" function in Node combined with the "module" object. For ECMAScript modules, dependencies are managed with the import/export JavaScript syntax.
Node is also a popular platform to run a web server that can host React applications. However, even if you do not host your React applications on Node, you can still use Node for the tools it offers. For example, you can host your React application on Ruby on Rails and use Node to build assets for the Rails Asset Pipeline.
The Webpack Node package makes it very easy to bundle your multi-file React application into a single file for production and compile JSX (with Babel) during that process. This is an example of a Node tool that you can use on its own. You don’t need a Node web server to work with Webpack.
There are many other reasons to pick Node over other options as the web server to host your React applications. Let me highlight the most important ones:
Most of the React examples and projects you will find on the web are based on Node. Getting help is easier when your project is using Node.
Node is JavaScript, which you are already using (with React). You do not need to invest in any other languages. Using the same language allows for true code sharing between server-side and client-side code. You will even stop saying server-side and client-side eventually. It is all just JavaScript that is used on both sides. Hiring for your project also becomes easier because, well, JavaScript is popular.
Most importantly: you can execute your React front-end code in a Node environment. This is the easiest option to do server-side rendering and have Universal/Isomorphic Applications.
You can do server-side rendering with other languages, but it would not be as easy as Node. The ReactDOM library has a component that is designed to work with Node to make server-side rendering as easy as a few lines of code.
Say that you have a React application that you render to the DOM with this line:
ReactDOM.render(<App data={DATA} />, mountNode);The same React application can be rendered to an HTML string for server-side rendering using this simple code in a Node-based web-server:
const ReactDOMServer = require('react-dom/server');const html = ReactDOMServer.renderToString(<App data={DATA} />);// In the server HTTP handler:// Write the html variable to the Web response objectYou can take this resulting html string and use it as the initial HTML of your application, and you would be done. Your application will now work before the JavaScript on the client even wakes up.
Whether you do server-side rendering with Node or other options, it is a great win on two very important levels:
It will make your Web server SEO-friendly. Search engines will see the actual content instead of an empty HTML that loads a JavaScript bundle file. (Note: search engines are getting better at executing JavaScript, but they are not there yet.)
It will improve the performance of your Web application on slow and limited devices. Those devices will have content to start with (and interact with) while they slowly parse the client-side JavaScript application. Even after parsing that application, React on the client-side will initially do nothing because it has the exact same content as what was already mounted in the browser through server-rendered HTML.
If you are starting a React project from scratch today, Node would be the best option to go with. It just makes every task you need to do around your React project much easier. Just make sure that you learn the Node runtime before you use it. I wrote an article to test your knowledge of the Node runtime:
If you cannot use Node as your web server, you can still use Node to perform server-side rendering externally and link the output it gives you to your non-Node web server.
Thanks for reading!
Writing high quality content takes a lot of time. If you found this helpful please consider sponsoring the library. 🙏
Leave your email address below if you want to be notified when we publish new content. We will never send spam emails. You can unsubscribe any time.
Tweet thisEmail itShare on FacebookShare on LinkedIn
Any questions or feedback? Tweet us or ask in the jsComplete slack help channel.
