How to build react without scaffolding-JS Tutorial-php.cn

How to build react without scaffolding

藏色散人

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

Original

3457 people have browsed it

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.

How to build react without scaffolding

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

Copy after login

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"
},

Copy after login

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

Copy after login

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)

Copy after login

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

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

Copy after login

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

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

Copy after login

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 &#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;)
);

Copy after login

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!