How To Connect NodeJS With React | Digital Conqueror

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!

Amol Wagh

Author of Game Marketing Book: Market Your Indie Game Like A Pro! 7 years of Tech Blogging & Digital Marketing. Co-founder at Dotline Inc & a Gamer. Follow me on Twitter @amolwagh, @amol.wagh

0 Comments

No comments!

There are no comments yet, but you can be first to comment this article.

Leave reply

<