共计 1870 个字符，预计需要花费 5 分钟才能阅读完成。
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 -y6. 首先是装置:
// react 装置
npm i react react-dom -S
or 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 -D7. 创立 src 目录, 在 src 目录创立 index.js 和 index.html
// index.js
import 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. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。
正文完
