Heim >Web-Frontend >js-Tutorial >So bauen Sie reagieren ohne Gerüste
So bauen Sie reagieren ohne Gerüste
- 藏色散人Original
- 2020-12-15 10:11:353461Durchsuche
So erstellen Sie React ohne Gerüst: Verwenden Sie zuerst den Befehl npm init, um die Datei package.json zu generieren. Installieren Sie dann die erforderlichen Abhängigkeiten, ändern Sie dann den Inhalt der Datei package.json und schreiben Sie schließlich die React-Komponente.
Die Betriebsumgebung dieses Tutorials: Windows7-System, React17.0.1-Version. Diese Methode ist für alle Computermarken geeignet.
Empfohlen: „React-Video-Tutorial“
Das Erstellen eines React-Projekts erfordert nur einen Befehl. In diesem Artikel erfahren Sie, wie Sie ein React-Projekt manuell erstellen Der Prozess, ich hoffe, er wird Ihnen hilfreich sein! Wie baut man ein Reaktionsprojekt ohne Gerüst auf? Die spezifischen Schritte sind wie folgt: 1. Verwenden Sie den Befehl npm init, um die Datei package.json zu generieren 2. Installieren Sie die erforderlichen Abhängigkeitennpm install --save react (安装React) npm install --save react-dom (安装React Dom) npm install --save-dev webpack (安装webpack，打包工具) npm install --save-dev webpack-cli (使用 webpack 4+ 版本，还需要安装 webpack-cli) (安装webpack-dev-server，一个小型express服务器，主要特性是支持热加载) npm install --save-dev webpack-dev-server (webpack需要两个额外的组件来处理HTML：html-webpack-plugin和html-loader) npm install --save-dev html-webpack-plugin html-loader3 package.json-Datei
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},4. Erstellen Sie in einer webpack.config.js-Datei den folgenden Inhalt: Babel ist ein weit verbreiteter Transcoder, der ES6-Code in ES5-Code konvertieren kann kann in der bestehenden Umgebung ausgeführt werden. const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./index.html",
filename: "./index.html"
})
]
};Erstellen Sie eine neue Konfigurationsdatei.babelrc und schreiben Sie den folgenden Inhaltnpm install --save-dev @babel/core
(webpack并不知道如何将ES6语法转换为ES5，不过 webpack 可以使用 loader 来完成。
即webpack加载器将一些东西作为输入，并将其转换为其他东西输出。)
npm install --save-dev babel-loader
npm install --save-dev @babel/preset-env (将ES6语法转码为ES5)
npm install --save-dev @babel/preset-react (将JSX语法转化为JavaScript)Die Umgebung wurde grundsätzlich konfiguriert. Als nächstes schreiben Sie die React-Komponente6. Erstellen Sie eine neue index.html im Stammverzeichnis und schreiben Sie den folgenden Inhalt: {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}7. Erstellen Sie einen neuen src-Ordner, erstellen Sie eine neue index.js unter dem src-Ordner und schreiben Sie den folgenden Inhalt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>new react project</title>
</head>
<body>
<div id="app"></div>
</body>
</html>8. Führen Sie npm start aus, um auf die Seite im Browser zuzugreifen. 9. Beim Ausführen von npm run build wird ein dist-Ordner angezeigt. Der Ordner enthält eine HTML- und eine JS-Datei, bei denen es sich um gepackte Dateien handelt. Das obige ist der detaillierte Inhalt vonSo bauen Sie reagieren ohne Gerüste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was ist JSX in ReactNächster Artikel：Was ist JSX in React