How To Connect NodeJS With React

A very warm welcome to everyone who came here. If you are reading this article, it means that you are immersed in the world of technology and want to know how you can connect React application (a front-end platform for creating a user interface) with the Node.js platform (a server-side JavaScript). We are going to dive into creating a hands-on demo and unite two applications together. I will give you a short guide on how to set up and connect an express back-end to your React front-end.

Node.js

To say briefly, this is a way to write server code in JavaScript, an environment for executing your script code. It appeared in 2009 thanks to Ryan Dahl and is based on the v8 engine. It is single-threaded and asynchronous and has an advantage like speed. The platform, in addition to working with server-side scripts for web requests, is also used to create client and server programs. It is also loved by the NPM (manager of ready-made modules). These are the three main advantages of this platform that will allow you to get acquainted with it before the use.

Prerequisites for creation

We will first go to the node.js website which is called node.js.org where we have to download the stable NTS version. It allows downloading MSI files by double-clicking. That would install node.js for us.

Step by step

Next move is opening editor Visual Studio. In Visual Studio, you can easily create a Node.js project and use IntelliSense and other built-in features that support node.js. Also the Command Prompt must be opened, there we navigate to a folder. Now we will invoke the NPM package manager which is provoked by command npx. We use it to go and create a React application. After installation, we can open it within our editor. All we need to do is to fire up this application and get a running npm start that will compile it. In the browser we are looking for localhost 3000, with its help we will be able to get a startup page. Now, try to create a back-end application which is going to be another one that we will set up, write, for example, npx express generator API. That’s how we get an express application on node.js called API.

In the terminal we will attempt to install all  the packages that are required and would be logged in the package.json file that is used by npm to manage dependencies and package versions for locally installed packages. We can make them run by pressing Ctrl+C. That’s how we get an express application installed.

To continue we move on to the API application, press the bin folder and change standard port number from 3000 to 9000. Then press the routes folder and create a test API file. Ok, the next folder is app.js where we will import files. We launched it and caused a 9000 tests API, and all it works properly.

Let’s return to our React application and revamp a little app.js file or rather class, call API and render function. The React application that will talk to the API application URL which is hosted on node is ready.

The last step that we have to perform and which allows the React application to communicate from another host, is installing a cross-origin module.

If we try looking for a React application, it should connect to the API that is hosted on node.js which will return us that string message. And if you scroll down, you will see that message returned from node.js into React seeing the API is working properly.

Conclusion

Finally, I would like to extend a big thank you for reading this article which is called “How to connect Node.js with React”. I hope this has added value to your knowledge and inspiration of technology. If you follow the instructions you will succeed!

Share:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles