1.开发环境 react18+webpack4
2.电脑系统 windows11专业版
3.随着工作教训的积攒,咱们会发现官网脚手架创立进去的我的项目有很多都是没有用的,那咱们怎么本人从0开始创立我的项目呢？下来我来分享一下我的办法,心愿对你有所帮忙。
4.在这里我抉择的是react,那么首先咱们须要先简略的来理解一下react。

开发React必须依赖三个库：react：蕴含react所必须的外围代码react-dom：react渲染在不同平台所须要的外围代码babel：将jsx转换成React代码的工具

4-1. react 依赖外围:

react : react 包中蕴含了react和react-native所共有的外围代码。
react-dom:react-dom针对web和native所实现的事件不同：web端：react-dom会讲jsx最终渲染成实在的DOM，显示在浏览器中native端：react-dom会讲jsx最终渲染成原生的控件（比方Android中的Button，iOS中的UIButton）。
babel:比方当下很多浏览器并不反对ES6的语法，然而的确ES6的语法十分的简洁和不便，咱们开发时心愿应用它。那么编写源码时咱们就能够应用ES6来编写，之后通过Babel工具，将ES6转成大多数浏览器都反对的ES5的语法。

5.初始化我的项目:

npm init -y

6.首先是装置:

// react 装置npm i react react-dom -Sor npm i react@18 react-dom@18 -S
// babel依赖装置,具体能够看babel 官网npm i @babel/preset-env @babel/preset-react @babel/core babel-loader@8 -D
// webpack 装置npm webpack@4 webpack-cli@4 webpack-dev-server html-webpack-plugin@4 -D

7.创立src目录,在src目录创立index.js和index.html

// index.jsimport React from 'react';// 留神这里ReactDOM是从client引入import ReactDOM from 'react-dom/client';function App () {    return (<div>Hello,Chen</div>)}ReactDOM.createRoot(document.getElementById('app')).render(<App />);
// index.html<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>chen-react-admin</title></head><body><div id="app"></div></body></html>

8.创立webpack.config.js(和package.json同级)

const path = require("path");const htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    entry:'./src/index.js',    output: {        filename: 'index.js',//进口文件名        path: path.resolve(__dirname, 'dist'),//进口门路    },    mode: 'development',//模式    module:{        rules:[            {                test:/\.(js|jsx)$/,                use:{                    loader:'babel-loader'                }            }        ]    },    plugins:[        new htmlWebpackPlugin({            template:'./src/index.html'        })    ]}

9.创立babel.config.js(和package.json同级)

module.exports = {    "presets": [        "@babel/preset-env", "@babel/preset-react"    ],}

10.增加package.json配置:

"scripts": {    "start": "webpack-dev-server --config webpack.config.js"  },

11.终端执行 npm start

//我的项目曾经启动胜利了,我的项目只是进行简略的配置,前期会不断完善

12.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。