How to build react without scaffolding: first use the npm init command to generate the package.json file; then install the required dependencies and modify the contents of the package.json file; then install babel; and finally write the react component.

The operating environment of this tutorial: windows7 system, react17.0.1 version, this method is suitable for all brands of computers.

Recommendation: "react video tutorial"

Creating a react project is very simple. Using scaffolding only requires one command, then you will manually create a react Project? This article will show you the process of manually building a react project. I hope it will be helpful to you!

How to build a react project without scaffolding?

The specific steps are as follows:

1. Use the npm init command to generate the package.json file

2. Install the required dependencies

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 it After webpack, you need to modify the content of the package.json file

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

4. Create a new webpack.config.js file and write the following content

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. Install babel. Babel is a widely used The transcoder can convert ES6 code into ES5 code so that it can be executed in the existing environment.

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)

Create a new configuration file .babelrc and write the following content

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

The environment has basically been configured.

Next write the react component

6. Create a new index.html in the root directory and write the following content

7. Create a new src folder, in the src file Create a new index.js in the folder and write the following content

import React from 'react'; import ReactDom from 'react-dom'; class App extends React.Component { render() { return ( 
 Hello World ! 
 ) } } ReactDom.render( , document.getElementById('app') );

8. Run npm start to access the page in the browser.

9. When running npm run build, a dist folder will appear. The folder contains an html and a js file, which are packaged files.

The above is the detailed content of How to build react without scaffolding. For more information, please follow other related articles on the PHP Chinese website!