Made withReactClip

How To Connect React JS With Node JS | Node JS Tutorial For Beginners | What Is Node JS |Simplilearn

S

Simplilearn

Creator on the React channel

Watch on YouTube ↗

342K viewsOct 28, 201912:42 runtime

Learn how to build a full-stack JavaScript application by connecting a React.js front-end with a Node.js back-end. This hands-on tutorial guides you through creating a React client application and a separate Node.js server using the Express.js framework. You'll see how to set up…

Chapters

#react#clip#frontend

Core Objective

This guide demonstrates how to build a basic full-stack JavaScript application by connecting a React.js front-end client to a Node.js and Express.js back-end API server.

Project Structure

The architecture consists of two separate applications:

Client: A React application created with create-react-app that serves as the user interface.
API Server: A Node.js application built with the express-generator to provide a RESTful API endpoint.

Key Steps & Commands

1. Create the React Client

Command: npx create-react-app client
Run: cd client && npm start
The client application will run on http://localhost:3000.

2. Create the Node.js/Express API

Command: npx express-generator api
Install Dependencies: cd api && npm install
The server application will also default to http://localhost:3000.

Tip
It's crucial to run the client and server on different ports to avoid conflicts. The server port is changed to 9000 in the next step.

3. Configure the API Server

Change Port: In the api project, edit the /bin/www file and change var port = normalizePort(process.env.PORT || '3000'); to var port = normalizePort(process.env.PORT || '9000');.

Create API Route: Create a new file at /routes/testApi.js to define a simple GET endpoint.

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
    res.send('API is working properly');
});

module.exports = router;

Register Route: In /app.js, import and use the new router.

var testAPIRouter = require('./routes/testApi');
// ...
app.use('/testAPI', testAPIRouter);

4. Enable Cross-Origin Resource Sharing (CORS)

Important
Because the React client (localhost:3000) and the API server (localhost:9000) are on different origins, the browser's security policy will block API requests. CORS must be enabled on the server to allow these requests.

Install CORS: In the api directory, run npm install cors.
Enable in app.js: Add the following lines to your server's app.js file.
```
var cors = require('cors');
// ...
app.use(cors());
```

5. Connect React to the API

In the client project's src/App.js file, modify the component to fetch data.

Use Component State: Store the API response in the component's state.
```
this.state = { apiResponse: "" };
```

Fetch Data: Create a method to call the API using fetch and update the state.

callAPI() {
    fetch("http://localhost:9000/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));
}

Trigger Fetch: Call the method using a lifecycle method like componentWillMount() or componentDidMount().
```
componentWillMount() {
    this.callAPI();
}
```

Display Data: Render the state value in your JSX.

<p className="App-intro">{this.state.apiResponse}</p>

Final Result

After starting both the API server (npm start in the api folder) and the React client (npm start in the client folder), navigating to http://localhost:3000 will display the React application with the message "API is working properly" fetched dynamically from the Node.js backend.