Rumah >hujung hadapan web >tutorial js >Cara membina aplikasi tindanan penuh berprestasi tinggi menggunakan React dan Node.js

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

WBOYasal: 2023-09-26 17:40:52787semak imbas

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
```
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
```

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;

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')
);

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>

Jalankan aplikasi React: Jalankan arahan berikut dalam direktori projek untuk memulakan aplikasi React:
```
npm start
```
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}`);
});
```

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

npm install express

node server.js

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;

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!

html express 栈 JS http

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Pemalam pangkalan data React Query: cara mengimport dan mengeksport dataArtikel seterusnya：Pemalam pangkalan data React Query: cara mengimport dan mengeksport data

Artikel berkaitan

Lihat lagi