How to connect Node with React ?
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.