Comment construire une réaction sans échafaudage-js tutoriel-php.cn

Comment construire une réaction sans échafaudage

藏色散人

Libérer： 2023-01-04 09:37:25

original

3518 Les gens l'ont consulté

Comment construire React sans échafaudage : utilisez d'abord la commande npm init pour générer le fichier package.json ; puis installez les dépendances requises et modifiez le contenu du fichier package.json puis installez babel ; le composant de réaction.

Comment construire une réaction sans échafaudage

L'environnement d'exploitation de ce tutoriel : système Windows7, version React17.0.1, cette méthode convient à toutes les marques d'ordinateurs.

Recommandation : "Tutoriel vidéo React"

Créer un projet React est très simple, l'utilisation d'un échafaudage ne nécessite qu'une seule commande, vous créerez ensuite un projet React manuellement Projet ? Cet article vous montrera le processus de création manuelle d'un projet React. J'espère qu'il vous sera utile !

Comment construire un projet React sans échafaudage ?

Les étapes spécifiques sont les suivantes :

1. Utilisez la commande npm init pour générer le fichier package.json

2. Installez les dépendances requises

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

Copier après la connexion

<. 🎜>3. Installé Après webpack, vous devez modifier le contenu du fichier package.json

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

Copier après la connexion

4 Créez un nouveau fichier webpack.config.js et écrivez le contenu suivant

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

Copier après la connexion

. 5. Installez Babel, Babel est un transcodeur largement utilisé. Il peut convertir le code ES6 en code ES5 afin qu'il puisse être exécuté dans l'environnement existant.

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)

Copier après la connexion

Créez un nouveau fichier de configuration .babelrc et écrivez le contenu suivant

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

Copier après la connexion

L'environnement a essentiellement été configuré.

Écrivez ensuite le composant React

6. Créez un nouveau index.html dans le répertoire racine et écrivez le contenu suivant

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>new react project</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

Copier après la connexion

7 Créez un nouveau dossier src, dans. le fichier src Créez un nouveau index.js dans le dossier et écrivez le contenu suivant

import React from &#39;react&#39;;
import ReactDom from &#39;react-dom&#39;;
 
class App extends React.Component {
    render() {
        return (
            <h1>
                Hello World !
            </h1>
        )
    }
}
 
ReactDom.render(
    <App />,
    document.getElementById(&#39;app&#39;)
);

Copier après la connexion

8. Exécutez npm start pour accéder à la page dans le navigateur.

9. Lors de l'exécution de npm run build, un dossier dist apparaîtra. Le dossier contient un fichier html et un fichier js, qui sont des fichiers empaquetés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!