Home >Web Front-end >JS Tutorial >How to build high-performance full-stack applications using React and Node.js

How to build high-performance full-stack applications using React and Node.js

WBOYOriginal: 2023-09-26 17:40:52794browse

How to use React and Node.js to build high-performance full-stack applications

Introduction:
With the development of web applications, building high-performance full-stack applications Applications are becoming increasingly important. React and Node.js, as popular front-end and back-end technologies, are widely used in full-stack development. This article will introduce how to use React and Node.js to build high-performance full-stack applications and provide specific code examples.

1. Build a basic project framework

Create a project directory: First, we need to create a project directory and initialize a new Node.js project. You can do this using the following command:
```
mkdir my-app
cd my-app
npm init -y
```
Install React and related dependencies: Run the following command in the project directory to install React and related dependencies:
```
npm install react react-dom react-scripts
```

Create React component: Create a file named App.js and add the following code:

import React from 'react';

function App() {
  return (
 <div>
   <h1>Hello, World!</h1>
 </div>
  );
}

export default App;

Create entry file: Create a file named index.js, And add the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
 <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Create an HTML template: Create a file named index.html in the project directory and add the following code:

<!DOCTYPE html>
<html>
  <head>
 <title>React App</title>
  </head>
  <body>
 <div id="root"></div>
 <script src="./index.js"></script>
  </body>
</html>

Run the React application: Run the following command in the project directory to start the React application:
```
npm start
```
Now, you should be able to see the "Hello, World!" output in the browser.

2. Create Node.js backend

Create server file: Create a file named server.js in the project directory. And add the following code:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

const port = 5000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

Install Express and related dependencies: Run the following command in the project directory to install Express and related dependencies:
```
npm install express
```
Run the Node.js server: Run the following command in the project directory to start the Node.js server:
```
node server.js
```
Now, you should be able to see "Hello" in the browser by visiting http://localhost:5000 , World!" output.

3. Connect the front and back ends

Modify the React component: Modify the code in App.js as follows:

import React, { useState, useEffect } from 'react';

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
 fetch('/api')
   .then((response) => response.text())
   .then((data) => setMessage(data));
  }, []);

  return (
 <div>
   <h1>{message}</h1>
 </div>
  );
}

export default App;

Modify Node.js server: Modify the code in server.js as follows:

const express = require('express');
const app = express();

app.get('/api', (req, res) => {
  res.send('Hello, World from API!');
});

const port = 5000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

Restart the application: Restart the React application and Node.js server, and access http:// localhost:3000, you should see the output of "Hello, World from API!" on the page.

Conclusion:
Through the above steps, we successfully built a full-stack application based on React and Node.js, and realized the connection between the front and back ends. Using React and Node.js to build high-performance full-stack applications can greatly improve development efficiency and user experience. Hope this article will be helpful to you.

The above is the detailed content of How to build high-performance full-stack applications using React and Node.js. For more information, please follow other related articles on the PHP Chinese website!

html express 栈 JS http

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：React Query database plug-in: how to import and export dataNext article：React Query database plug-in: how to import and export data

See more

How to build high-performance full-stack applications using React and Node.js

Related articles