Connect React With Node

Posted on  by admin

When I first learned to use React, a frontend library for JavaScript, I was hyped. Managing state with React hooks and building nice looking web apps were awesome. However, I didn’t know how to connect that to a Node.js backend. All the tutorials I read and watched had too many unnecessary dependencies and complicated nuances. That’s why in this tutorial, we will be sticking to the bare basics. I’m going to assume you already know a bit of Node.js and React.js for this tutorial.

  • If not, don’t worry, I’ll explain things as we go.

  • In this tutorial, we will be creating a simple quote generator web app.

  • First, create a folder in your working directory for the app.

  • Then, inside that directory, make the folder for my backend in Node.js.

  • I will name mine “backend” for simplicity's sake.

  • Then, install express for handling routes.

Similar Articles

For getting my quotes, I will use the inspirational-quotes npm package. Now let’s write some code. Create an app.js file and set it up like so:. If we run this, we will see that we get a JavaScript object containing two keys: text and author.

Let’s finish setting up the rest of our express/Node backend. Instead of printing the JavaScript object to console, I will send it instead when the home route is accessed (like so):.

Don’t worry about process.env.port for now, those of you who have used Heroku or deployed apps should find that familiar, however.

From here, if we navigate over to our localhost, we should find a JSON with what we previously printed to console.

Cool, we’re done with the backend. Wait what, it was that easy??? Yep, we’re really done. Now let’s back out of our current directory, into the outer folder and create our react app.

I’m going to call mine “frontend” just for simplicity’s sake, once again. Once that’s done, navigate into the “frontend” directory.

Inside the “src” directory, create a file called ”Quotes.jsx”. Populate it with this code: which just gives a button. For now, this button won’t do anything. Then, in the App.js, import this component and use it. I’ve removed some extra stuff that was auto-generated. At this point, running the app will simply give you a button and a “-”.

The next step is where the magic happens: we will combine the frontend and the backend. Inside your package.json file, insert this line of code under the “private: true”.

If you did not use 5000 as your backend port, make it whichever port you chose. However, this port MUST be different than 3000, since that is what our React app uses.

Now, install a dependency called axios. If you aren’t familiar with axios, don’t worry. We’ll write a few lines of code with it and that’s it. Axios just lets us make HTTP requests to our backend, and it works similarly to express.

At this point, when the button is clicked, it triggers our function “getQuote”, which then uses axios to get the information we wanted at route “/” .

The information we want, our JavaScript object, is given to us with, so if you printed it to console it would look identical to what we printed in the beginning of this tutorial.

Note: if you run your React app and the button is not doing anything, add this code to your backend app.js right above the app.get(“/”):.

Sometimes axios gets blocked by CORS, so we need to bypass this using the above code. If anything doesn’t match up, be sure to check out the code, which is posted on GitHub.

The frontend repo is here, and the backend repo is here. Note: to deploy this app, you should deploy the backend separately. Then, use that link and replace the localhost link when using Axios.

EngEd Community

The frontend should then be deployed separately as well. You can do this easily with Github pages.

If this helped, please give me a clap! If you guys want to see a tutorial on deploying this app, let me know in the comments.

:) If you want to deploy the frontend and have a custom URL for free, check out my article on it:. Check out LinkedOut, my Chrome Extension that will boost your productivity on LinkedIn and save your mental health. Create a Node.js project. Add npm packages. Add React code to your app.

Tools You Will Need

Attach the debugger. Starting in Visual Studio 2022, you can alternatively create a React project using the new CLI-based project type. Some of the information in this article applies only to the Node.js project type (.njsproj). What is Node.js? Node.js is a server-side JavaScript runtime environment that executes JavaScript code. The default package manager for Node.js is npm. A package manager makes it easier to publish and share Node.js source code libraries.

The npm package manager simplifies library installation, updating, and uninstallation. React is a front-end framework for creating a user interface (UI).

JSX is a JavaScript syntax extension typically used with React to describe UI elements. You must transpile JSX code to plain JavaScript before it can run in a browser. What is webpack? Webpack bundles JavaScript files so they can run in a browser, and can also transform or package other resources and assets.

Webpack can specify a compiler, such as Babel or TypeScript, to transpile JSX or TypeScript code to plain JavaScript. Visual Studio with the Node.js development workload installed. If you haven't yet installed Visual Studio:. Go to the Visual Studio downloads page to install Visual Studio for free.

In the Visual Studio Installer, select the Node.js development workload, and select Install. If you have Visual Studio installed but need the Node.js workload:. In Visual Studio, go to Tools > Get Tools and Features. In the Visual Studio Installer, choose the Node.js development workload, and select Modify to download and install the workload.

Calling Express backend server from React

The Node.js runtime installed:. If you don't have the Node.js runtime installed, install the LTS version from the Node.js website. The LTS version has the best compatibility with other frameworks and libraries.

The Node.js tools in the Visual Studio Node.js workload support both Node.js 32-bit and 64-bit architecture versions. Visual Studio requires only one version, and the Node.js installer only supports one version at a time. Visual Studio usually detects the installed Node.js runtime automatically. If not, you can configure your project to reference the installed runtime:. After you create a project, right-click the project node and select Properties.

In the Properties pane, set the Node.exe path to reference a global or local installation of Node.js. You can specify the path to a local interpreter in each of your Node.js projects. This tutorial was tested with Node.js 12.6.2. Open Visual Studio, and press Esc to close the start window.

Press Ctrl+Q, type node.js in the search box, and then choose Blank Node.js Web Application - JavaScript from the dropdown list. Although this tutorial uses the TypeScript compiler, the steps require that you start with the JavaScript template. If you don't see the Blank Node.js Web Application choice, you need to install the Node.js development workload.

For instructions, see the Prerequisites. In the Configure your new project dialog box, select Create.