How To Connect Node with React?

To connect Node with React, we use React for the frontend (what users see) and Node.js for the backend (where the server logic lives). The frontend sends requests to the backend, and the backend responds with data or actions.

There are many ways to connect React with Node.js, like using Axios or Fetch or setting up a proxy. In this article, we’ll keep things simple and use the proxy method to make them work together smoothly.

Steps To Setup The Backend

Follow these basic steps to create the backend of your Node.js application:

Step 1: Create a backend directory

mkdir demoapp
cd demoapp

Step 2: Initialize the Project

npm init -y

Ensure that the entry point is set to either app.js or index.js

Step 3: Install the required libraries

npm i express nodemon

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

"dependencies": {
    "express": "^5.1.0", 
    "nodemon": "^3.1.9",
}

Steps To Setup the Frontend

Follow these steps to set up the React 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

Folder Structure

Example: This example shows basic program for backend server.

// Filename - demoapp/app.js

const express = require("express");
const app = express();

app.post("/post", (req, res) => {
    console.log("Connected to React");
    res.redirect("/");
});
app.get('/',(req,res)=>{
    res.send(`<h1>Hello World</h1>`)
})

const PORT = process.env.PORT || 8080;

app.listen(PORT,
    console.log(`Server started on port ${PORT}`)
);

Run the application using the following command:

npm run dev

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

Connect React to Node with Proxy

To connect React with Node using a proxy, add this line in your React app’s package.json file right after the “name” and “version” fields at the top:

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

This tells React to automatically forward any unknown requests (like /post) to your Node.js backend running on port 8080 during development.

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">
                <img
                    src={logo}
                    className="App-logo"
                    alt="logo" />
                <p>A simple React app.....</p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer">
                    Learn React
                </a>
                <form
                    action="../../post"
                    method="post"
                    className="form">
                    <button type="submit">
                        Connected?
                    </button>
                </form>
            </header>
        </div>
    );
}

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.

Other Methods to Connect Node with React

Apart from the proxy method, there are several ways to connect a React frontend with a Node.js backend. These methods help manage communication and data flow between the client and server more efficiently.

1. Axios or Fetch API: Used to send HTTP requests from React to Node endpoints.
2. CORS Setup: Directly allow cross-origin requests by configuring CORS on the Node server.
3. GraphQL: An alternative to REST APIs that enables flexible data querying between frontend and backend.

_sh_pallavi

Follow

Improve

Article Tags :

• JavaScript
• Node.js
• ReactJS
• Web Technologies
• CSS-Functions
• Java-HijrahDate
• Java-SecureRandom
• NodeJS-Questions
• QA - Placement Quizzes-Data Interpretation
• React-Questions
• SQL-PL/SQL
• TCS-coding-questions
• Technical Scripter 2020

+9 More