Maison >interface Web >js tutoriel >Comment construire une réaction sans échafaudage
Comment construire une réaction sans échafaudage
- 藏色散人original
- 2020-12-15 10:11:353491parcourir
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.
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<.>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"
},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"
})
]
};. 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)Créez un nouveau fichier de configuration .babelrc et écrivez le contenu suivant {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}L'environnement a essentiellement été configuré. Écrivez ensuite le composant React6. 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>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 'react';
import ReactDom from 'react-dom';
class App extends React.Component {
render() {
return (
<h1>
Hello World !
</h1>
)
}
}
ReactDom.render(
<App />,
document.getElementById('app')
); 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!