So bauen Sie reagieren ohne Gerüste-js-Tutorial-php.cn

So bauen Sie reagieren ohne Gerüste

藏色散人

Freigeben： 2023-01-04 09:37:25

Original

3457 Leute haben es durchsucht

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.

So bauen Sie reagieren ohne Gerüste

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ängigkeiten

npm 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-loader

Nach dem Login kopieren

3 package.json-Datei

"scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
},

Nach dem Login kopieren

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"
        })
    ]
};

Nach dem Login kopieren

Erstellen Sie eine neue Konfigurationsdatei.babelrc und schreiben Sie den folgenden Inhalt

npm 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)

Nach dem Login kopieren

Die Umgebung wurde grundsätzlich konfiguriert.

Als nächstes schreiben Sie die React-Komponente

6. Erstellen Sie eine neue index.html im Stammverzeichnis und schreiben Sie den folgenden Inhalt:

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!