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
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
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"
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.
Last Updated :
14 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...