How To Connect Node with React?
Last Updated : 09 Apr, 2025
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.
JavaScript // 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.
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.
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.
- Axios or Fetch API: Used to send HTTP requests from React to Node endpoints.
- CORS Setup: Directly allow cross-origin requests by configuring CORS on the Node server.
- GraphQL: An alternative to REST APIs that enables flexible data querying between frontend and backend.
Similar Reads
How To Connect MongoDB with ReactJS?
MongoDB is a popular NoSQL database known for its scalability, flexibility, and high performance. When building modern web applications with ReactJS, it’s common to connect your frontend with a backend server that interacts with a database like MongoDB. PrerequisiteReact JSNode JSMongo DBApproach to
5 min read
How to connect ReactJS with MetaMask ?
To Connect React JS with MetaMask is important while making Web 3 applications, It will be done with Meta mask wallet which is the most used browser tool for sending and receiving signed transactions . MetaMask is a crypto wallet and a gateway to blockchain DAPP. It is used to connect our app to web
3 min read
How to Connect Django with Reactjs ?
Connecting Django with React is a common approach for building full-stack applications. Django is used to manage the backend, database, APIs and React handles the User Interface on frontend. Prerequisites:A development machine with any OS (Linux/Windows/Mac).Python 3 installed.Node.js installed (ver
9 min read
How to write ReactJS Code in Codepen.IO ?
Now everything is online, some people use VScode to write react.js code and face most of the difficulty. The VScode requires setting for writing React.js code and Many beginners faced difficulty to use VScode so, for them, it is good and easy to use codepen. The codepen provide you with an online pl
2 min read
How To Create a Website in ReactJS?
ReactJS is one of the most popular JavaScript libraries for building user interfaces. It allows you to create dynamic, reusable UI components and efficiently manage state and events. In this article, we'll walk through the steps to create a basic website using ReactJS. PrerequisitesNPM & Node.js
5 min read
How To Use Modal Component In ReactJS?
Modals are a popular UI component used to display content in a pop-up window like alerts, forms, or additional information. In ReactJS, there are multiple ways to implement a modal. In this article, we will discuss two common approaches: using reusable functional components and using the Material-UI
4 min read
How to use NoSsr Component in ReactJS?
NoSsr purposely removes components from the subject of Server Side Rendering (SSR). Material UI for React has this component available for us, and it is very easy to integrate. We can use the NoSsr Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReactJSMaterial UISteps
2 min read
How to send Basic Auth with Axios in React & Node ?
Basic Auth is a simple authentication scheme. It involves sending a username and password with each request to the server through HTTP. Axios is a popular HTTP client for making requests in JavaScript. In this article, we will create a React App to demonstrate sending basic Auth with Axios and discu
5 min read
How to create components in ReactJS ?
Components in React JS is are the core of building React applications. Components are the building blocks that contains UI elements and logic, making the development process easier and reusable. In this article we will see how we can create components in React JS. Table of Content React Functional C
3 min read
How to Setup a Modern React Chatbot
Integrating a chatbot into your React application can enhance user experience and provide valuable assistance to your users. With the availability of various libraries and tools, setting up a modern chatbot in a React project has become more straightforward. In this article, we'll explore how to set
2 min read