ReactJS vs NodeJS - Why do I need to create both?

Question

I understand that React is frontend, and NodeJS is the backend that allows Javascript code to function outside of a browser. What I don't understand (and this is after following tutorials online on setting up a React project and a NodeJS project) is why I have to create an instance of each.

For example, in my React project, I managed to create a website. But because I needed a backend, I decided to use NodeJS. But I'm doing NodeJS tutorials, and I can create a website using NodeJS too. I'm confused because right now, it's appearing to be that React and NodeJS do the SAME THING.

I have never worked with NodeJS before so I am a bit confused. I was under the impression that I would just use NodeJS to host the backend, but after seeing that I'm literally having to create an entire website with NodeJS, I don't understand how I'm supposed to use React and NodeJS together.

How do the two, React and NodeJS, integrate together to create a fully-functioning web app? I have yet to see something online that clearly breaks down how the two interact.

Answer 1

using react or nodejs can be choice but in specific cases where you want highlevel UI interactions and ease while creating fronted you can use react. react provide highend way to create an UI and while creating frontend with nodejs may be little bit difficult, so for the ease and highlevel ui you can use frmaework like react. nodejs is javascript runtime environment which is very suitable to do the backend things such as api calling and database interaction and works very fine with react projects.

Answer 2

You can create an api with nodejs and the frontend with react. So finally what happens is your react app will make api calls to your nodejs backend and react app will recieve data in json format and then react consumes that data to show to the users.

But on the other hand, instead of creating a frontend with react, nodejs app can directly serve ready to be rendered html files (generated using pug templates) to the browser when a request is made (which is called SSR - server side rendering), so in this case you don't need react because browser can directly render the html file, and the javascript needed for interaction (like clicking a button) is send by the nodejs app to the browser along with those html files. But this is only good for less interactive apps with few UI states. For complex app it's hard to manage your UI from nodejs, that is why we have react specially for the frontend.

Currently we have server components in react implemented by nextjs. Nextjs provides both server side rendering and Client side rendering. You can have your html files directly served from the backend.

Answer 3

NodeJS is just a runtime that allows you to run javascript code outside of the browser.

In order to compile and transpile the react JS app, they use webpack and other tools which runs over NodeJS.

Answer 4

NodeJS is not just regular javascript, it is a javascript runtime that sits on top of a C++ engine called V8, provided by Google. Node executes outside the browser, whereas React / Vue / Angular / etc are in-browser javascript frameworks.

React is a whole separate animal; it is a framework that renders its own DOM in the browser. It is a javascript engine that is configured to optimize DOM manipulation.

While the development pattern of frontend and backend appear similar, they are doing different things. React is handling component lifecycles, applying dynamic style rules, processing in-browser data, and making API calls. Node is handling requests from the browser, coordinating access to the server's file system, managing network I-O, performing cryptographic evaluation, etc. Because of these different responsibilities, Node makes use of different dependencies (read: node modules) than a frontend framework.

Ultimately, Node and React communicate through HTTP calls (or, less frequently, through a WebSocket or SOAP protocol).

It would behoove you to read about how node works under the hood.

Answer 5

React is front-end library. It provides great tooling for creatiing user interfaces. And it creates a single page application. Which means when you open a react app. It does not reload and its really fast.

While you could also use nodejs and something like handlebars to create a website. But that website would be rendered on server and then served to the user. But its alot more than that. There are a lot of things that you want to do on the server. Like authentication. You want that part to be secure. So you keep it on the server.

Now the answer to the final part of your question.

For a fully functional app. You would use react to create user interfaces. And nodejs for creating an API which your react app will call.

Answer 6

The point is that react and any other SPA library is working on a client-side (browser).

React fetch and consume the data from the server API.

You don't need to use Node.js for building API. You can use various frameworks based on the technology you prefer.

If you are not familiar with the Back End, you can use https://www.npmjs.com/package/http-server to have a fake API service and can build the Front End part with it.

Answer 7

NodeJS is a javascript framework that allows you to create a server to serve up websites using Express or the built in libraries. It also is capable of building a website with just NodeJS.

You can take advantage of the ability to do server side rendering with a NodeJS server. https://reactjs.org/docs/react-dom-server.html

There is a ReactJS framework called NextJS tha has server side rendering of ReactJS component. https://nextjs.org/#features

You could potentially have some areas of your website that are built solely with NodeJS and other pages that use ReactJS and a NodeJS backend. But it is cleaner to use ReactJS for the front-end and NodeJS for the backend.

Answer 8

NodeJS will serve as your backend, whereas ReactJS will create the interface/UI where you can actually manipulate your server (nodeJS). So first you'll write your NodeJS server or API. You don't need to use ReactJS to create a frontend that would interact with your node server, like you said you can use NodeJS to create your views as well through a different library. ReactJS is just one choice of many for the front end of your NodeJS app.