Open In App

How to connect Node with React ?

Last Updated : 14 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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.

Javascript




// Filename - demoapp/app.js
 
const express = require("express");
const app = express();
 
app.post("/post", (req, res) => {
    console.log("Connected to React");
    res.redirect("/");
});
 
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.

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.

Javascript




// 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.



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads