How to implement react with JS

It has been nearly two years since I started using setState() for data processing, and now I have learned about redux state management, hooks, pureComponent and other optimized operations. I’ve learned the React lifecycle (before v16.4 and after v16.4) and whether setState is synchronous or asynchronous, but I feel like I didn’t really understand React. So today I want to try to record some of my learning process, and try to understand the most commonly used tool from the bottom. In this process will also consult a large number of information, and combined with their own understanding of some, if there is a mistake, please point out, thank you very much ~

Basic configuration

Webpack configuration: application packaging and using Babel configuration: 1. Install webPack, Babel, and related dependencies. If it is too slow, install NRM and switch to Taobao source. registry=https://registry.npm.taobao.org use NPM after initialization program, the installation list as follows, version has great discrepancy may lead to problems

package.json

{" name ":" my - react ", "version" : "1.0.0", "description" : ""," main ":" index. Js ", "scripts" : {" test ", "echo \" Error: no test specified\" && exit 1", "start": "webpack --mode development --config ./webpack.config.js" }, "keywords": [], "author" : ""," license ":" ISC ", "dependencies" : {" @ Babel/core ":" 7.13.8 ", "Babel - loader" : "8.2.2," "@ Babel/plugin - transform - react - JSX" : "7.12.17", "HTML - webpack - plugin" : "^ 4.3.1", "webpack" : "5.4.0", "webpack - cli" : "4.5.0", "webpack - dev - server" : "3.11.2"}}Copy the code


Project directory structure:


Webpack is fully configured

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    resolve: {
        fallback: {
            path: require.resolve("path")
        }
    },
    entry: path.resolve(__dirname, './src/index.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js',
    },
    module: {
        rules: [{
            test: /\.js$/,
            use: ['babel-loader'],
            include: path.resolve(__dirname, 'src'),
            exclude: path.resolve(__dirname, 'node_modules')
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index-bundle.html'
        })
    ],
    devServer: {
        port: 8090,
    }
};
Copy the code


.babelrc is fully configured

{
    "plugins": [
        "@babel/plugin-transform-react-jsx"
    ]
}
Copy the code


index.html

<! DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>myReact</title> </head> <body> <div id="root" /> </body> </html>Copy the code


index.js

const number = 1; Const el = (/ / a JSX syntax < div id = "test" > < span > {number} < / span > < / div >).Copy the code

Compile the results

Use NPM run start to initiate compilation

View the compiled bundle.js

eval("const number = 1; \nconst el = /*#__PURE__*/React.createElement(\"div\", {\n id: \"test\"\n}, /*#__PURE__*/React.createElement(\"span\", null, number)); \n\n//# sourceURL=webpack://my-react/./src/index.js?" );Copy the code

You can see that the JSX syntax has changed to this:

React.createElement(
    div, {
        id: test
    },
    React.createElement(
        span,
        null,
        number,
    )
)
Copy the code

React is not define, so create a React object and createElement method in index.js. Next we’ll start parsing the React virtual DOM and, importantly, render() to make the page look the way we want it to