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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。
发表回复