Um ein grundlegendes React-Projekt einzurichten, müssen Sie die folgenden Schritte ausführen. Stellen Sie vor dem Start sicher, dass Node.js und npm (der Node-Paketmanager) installiert sind.
Erstellen Sie ein React-Projekt
- 1. Projektverzeichnis erstellen
- 2. Projekt initialisieren
- 3. Installieren Sie React und ReactDOM
- 4. Installieren Sie Babel
- 5. Projektdateien erstellen
- 6. Konfigurieren Sie Babel
- 7. Erstellen Sie React-Komponenten
- 8. HTML-Datei erstellen
- 9. Erstellen Sie eine Webpack-Konfiguration
- 10. Führen Sie den Entwicklungsserver aus
- 11. Anwendungen anzeigen
1. Projektverzeichnis erstellen
Erstellen Sie zunächst ein Projektverzeichnis und geben Sie es im Terminal ein.
mkdir my-react-app
cd my-react-app
2. Projekt initialisieren
Initialisieren Sie ein neues NPM-Projekt mit dem folgenden Befehl. Wenn Sie den Eingabeaufforderungen folgen, können Sie den Projektnamen, die Version, die Beschreibung und andere Informationen festlegen.
npm init
3. Installieren Sie React und ReactDOM
Verwenden Sie npm, um React und ReactDOM zu installieren, die zum Erstellen von React-Anwendungen erforderlich sind.
npm install react react-dom
4. Installieren Sie Babel
React verwendet die JSX-Syntax und muss über Babel in Standard-JavaScript übersetzt werden. Installieren Sie Babel-bezogene Abhängigkeiten:
npm install @babel/core @babel/preset-react @babel/preset-env babel-loader --save-dev
5. Projektdateien erstellen
Erstellen Sie im Projektverzeichnis eine einfache React-Komponentendatei und eine HTML-Datei.
Erstellen Sie einen Ordner mit dem Namen src im Stammverzeichnis des Projekts.
Erstellen Sie im Ordner src eine Datei namens index.js zum Schreiben von React-Komponenten.
Erstellen Sie eine Datei mit dem Namen index.html im Stammverzeichnis des Projekts, um die React-Anwendung zu laden.
6. Konfigurieren Sie Babel
Erstellen Sie eine Datei mit dem Namen .babelrc im Stammverzeichnis des Projekts und konfigurieren Sie die Voreinstellungen von Babel:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
7. Erstellen Sie React-Komponenten
Schreiben Sie eine einfache React-Komponente, zum Beispiel:
//在这里插入代码片 src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
return <h1>Hello, React!</h1>;
}
ReactDOM.render(<App />, document.getElementById('root'));
8. HTML-Datei erstellen
Erstellen Sie in der Datei index.html im Stammverzeichnis Ihres Projekts ein Containerelement, das zum Rendern der React-App verwendet wird. Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
9. Erstellen Sie eine Webpack-Konfiguration
Verwenden Sie Webpack, um React-Apps zu erstellen und zu verpacken. Installieren Sie zunächst die erforderlichen Abhängigkeiten:
npm install webpack webpack-cli webpack-dev-server --save-dev
Erstellen Sie eine Konfigurationsdatei mit dem Namen webpack.config.js im Stammverzeichnis des Projekts, um Webpack zu konfigurieren:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
},
devServer: {
contentBase: './dist',
port: 3000,
},
};
10. Führen Sie den Entwicklungsserver aus
Führen Sie den Entwicklungsserver im Terminal aus:
npx webpack-dev-server --mode development
11. Anwendungen anzeigen
Gehen Sie in Ihrem Browser zu http://localhost:3000 und Sie werden sehen, wie die React-Anwendung ausgeführt wird.