Open In App

How to connect Node with React ?

Last Updated : 14 Jan, 2024
Like Article

In this article, we will see how Node JS and React JS are an important part of developing full-stack web applications, where React is used for the front end and Node for the back end.

React JS is an open-source JavaScript library popularly used to create user interfaces for single-page applications (SPAs). It boasts a large and active developer community.

Node is predominantly utilized for non-blocking, event-driven servers, leveraging its single-threaded nature. It finds applications in traditional websites and back-end API services, with a design focus on real-time, push-based architectures.

Steps to setup the Backend:

Step 1: Create a backend directory

mkdir demoapp
cd demoapp

Step 2: Initialize it with app.js as an entry point

npm init 
// if prompt use app.js as entrypoint 
{entry-point: app.js}

Step 3: Install the required libraries

npm i express nodemon

The updated dependencies in package.json file will look like:

"dependencies": {
        "express": "^4.18.2",
        "nodemon": "^3.0.1"

Steps to setup the Frontend:

Step 1: Create react app using this command

npx create-react-app demo

Step 2: Move to the project directory

cd demo

The updated dependencies in package.json file will look like:

"dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"

Project Structure:

Example: This example shows basic program for backend server.


// Filename - demoapp/app.js
const express = require("express");
const app = express();"/post", (req, res) => {
    console.log("Connected to React");
const PORT = process.env.PORT || 8080;
    console.log(`Server started on port ${PORT}`)

Run the application using the following command:

npm run dev


Now go to http://localhost:8080/ in your browser, you will see the following output.

Step to connect: To connect React JS with Node JS we have added this line in package.json of react app folder:

"proxy": "http://localhost:8080

This tells React to proxy API requests to the Node.js server built with Express in our project.

Example: This example includes the prontend implementation of proxy and react web page with button to connect to the backend.


// Filename - App.js
import logo from "./logo.svg";
import "./App.css";
function App() {
    return (
        <div className="App">
            <header className="App-header">
                    alt="logo" />
                <p>A simple React app.....</p>
                    rel="noopener noreferrer">
                    Learn React
                    <button type="submit">
export default App;

Steps to run React app: Run this command in terminal

npm start

Output: This output will be visible on http://localhost:3000/ on browser window.

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads