Cara membina aplikasi tindanan penuh berprestasi tinggi menggunakan React dan Node.js-tutorial js-php.cn

Cara membina aplikasi tindanan penuh berprestasi tinggi menggunakan React dan Node.js

WBOY

Lepaskan： 2023-09-26 17:40:52

asal

766 orang telah melayarinya

Cara membina aplikasi tindanan penuh berprestasi tinggi menggunakan React dan Node.js

Pengenalan:
Dengan pembangunan aplikasi web, membina aplikasi tindanan penuh berprestasi tinggi menjadi semakin penting. React dan Node.js, sebagai teknologi front-end dan back-end yang popular, digunakan secara meluas dalam pembangunan tindanan penuh. Artikel ini akan memperkenalkan cara menggunakan React dan Node.js untuk membina aplikasi tindanan penuh berprestasi tinggi dan menyediakan contoh kod khusus.

1. Bina rangka kerja projek asas

Buat direktori projek: Pertama, kita perlu mencipta direktori projek dan memulakan projek Node.js baharu. Anda boleh melakukan ini menggunakan arahan berikut:
```
mkdir my-app
cd my-app
npm init -y
```
Salin selepas log masuk
Pasang React dan kebergantungan yang berkaitan: Jalankan arahan berikut dalam direktori projek untuk memasang React dan kebergantungan yang berkaitan:
```
npm install react react-dom react-scripts
```
Salin selepas log masuk

Buat komponen React: Buat komponen React yang dipanggil Fail App.js dan tambah kod berikut:

import React from 'react';

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

export default App;

Salin selepas log masuk

Cipta fail entri: Cipta fail bernama index.js dan tambah kod berikut:

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

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

Salin selepas log masuk

Cipta templat HTML: Cipta fail bernama index dalam direktori projek. fail html dan tambah kod berikut:

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

Salin selepas log masuk

Jalankan aplikasi React: Jalankan arahan berikut dalam direktori projek untuk memulakan aplikasi React:
```
npm start
```
Salin selepas log masuk
Sekarang, anda sepatutnya dapat melihat "Hello, World !" dalam output penyemak imbas anda. . arahan dalam direktori projek untuk memasang kebergantungan Express dan berkaitan:
```
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}`);
});
```
Salin selepas log masuk

Jalankan pelayan Node.js: Jalankan arahan berikut dalam direktori projek untuk memulakan pelayan Node.js:

npm install express

Salin selepas log masuk

node server.js

Salin selepas log masuk

Ubah suai pelayan Node.js.js berikut:

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;

Salin selepas log masuk

Mulakan semula aplikasi: Mulakan semula aplikasi React dan pelayan Node.js, dan lawati http://localhost:3000 Anda seharusnya melihat keluaran "Hello, World from API!"

Melalui langkah di atas, kami berjaya membina aplikasi tindanan penuh berdasarkan React dan Node.js, dan menyedari hubungan antara hujung hadapan dan belakang. Menggunakan React dan Node.js untuk membina aplikasi tindanan penuh berprestasi tinggi boleh meningkatkan kecekapan pembangunan dan pengalaman pengguna. Semoga artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Cara membina aplikasi tindanan penuh berprestasi tinggi menggunakan React dan Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!