React 介绍
React是什么？
React 是 facebook 推出的用于构建用户界面的前端 Javascript 库，中文官方地址为：react.docschina.org/ 。
React 具有声明式、组件化、一次学习，随处编写等特点，使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
环境搭建
官方文档中 创建新的 React 应用： react.docschina.org/docs/create…
手动搭建 webpack
创建项目目录并安装开发依赖：
$ mkdir webpack-react-project
$ cd webpack-react-project/
$ npm init -y
npm install -D @babel/core@7.13.8 @babel/preset-env@7.13.9 @babel/preset-react@7.12.13 babel-loader@8.2.2 html-webpack-plugin@4.5.2 react@17.0.1 react-dom@17.0.1 webpack@4.46.0 webpack-cli@3.3.12 webpack-dev-server@3.11.2
+ react@17.0.1
+ babel-loader@8.2.2
+ @babel/preset-env@7.13.9
+ webpack-dev-server@3.11.2
+ @babel/core@7.13.8
+ html-webpack-plugin@4.5.2
+ webpack-cli@3.3.12
+ @babel/preset-react@7.12.13
+ react-dom@17.0.1
+ webpack@4.46.0
项目创建完成，开发依赖安装成功后，package.json 内容如下：
{
"name": "webpack-react-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.13.8",
"@babel/preset-env": "^7.13.9",
"@babel/preset-react": "^7.12.13",
"babel-loader": "^8.2.2",
"html-webpack-plugin": "^4.5.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
}
}
因为是自己进行手动安装配置，因此需要在项目根路径下手动创建 \webpack.config.js 文件，并做如下配置：
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
devtool: 'none',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve('dist')
},
devServer: {
port: 3000,
hot: true
},
module: {
rules: [
{
test: /.js|jsx$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
配置入口 \src\index.html
<body>
<div id="root"></div>
</body>
配置入口 \src\index.js
import React from 'react'
import { render } from 'react-dom'
// 自定义组件
function App() {
return <div>React</div>
}
render(<App />, document.getElementById('root'))
然后在 package.json 中添加配置选项：
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev":"webpack-dev-server"
},
然后在命令行中执行 npm run dev 就可以启动项目了。
使用官方脚手架 create-react-app
官方脚手架 create-react-app 基于 webpack 进行打包构建
脚手架构架项目： npx create-react-app my-app
> cd my-app
> npm start
使用通用构建工具 Vite
Vite 本身就是一个构建工具，开发环境下不打包，生成环境使用 Rollup 进行打包。
执行命令 npm init vite@latest
√ Project name: ... my-project
? Select a framework: » - Use arrow-keys. Return to submit.
vanilla
vue
> react
preact
lit-element
svelte
? Select a variant: » - Use arrow-keys. Return to submit.
> react
react-ts
Scaffolding project in xxxxxxxxxxxxxx
Done. Now run:
cd vite-project
npm install
npm run dev
总结
React 是浏览器环境运行的 JS 库，本质上来说，更为合理或者直观的方式肯定是在 HTML 中使用 <script> 的 src 引入，而我并没有演示这样的方式，原因就在于，在项目中根本不可能使用这种传统的方式加载 React ，项目都是工程化的，我需要使用各种工程化工具来帮助我们完成各项开发工作。
而前面使用的三种工程化搭建方式，也各有一定的区别：
Webpack 方式： 完全依赖我们自己进行项目环境的搭建，需要工程师具备较强的工程化能力以及各种工程化工具的使用能力，这样的好处就是我们对项目拥有绝对完整的控制，掌握项目运行的全流程全环节，适合超大型项目组。
官方脚手架： 官方脚手架提供了傻瓜式的项目构建，项目开发中所需要的基本工具和基础配套一键搞定，不需要额外配置，可以让我们专注项目逻辑功能的开发。但是项目运行本身就会像一个黑盒子，她安全稳定地运行中，不会对我们暴露内部机制。开发小型项目或者学习 React 时比较合适，但是长期看来，会让我们严重依赖工具，成为工具的使用者而不是控制者，从而阻碍编程能力的提升。
Vite 构建： Vite 是2020年底发布的权限构建工具，由 Vue 团队开发维护，引入了 ES Model 的模块化加载方式，极大地提升了开发状态下的运行速度，但是，就目前来看，生态并不完整，一些特殊的处理工具并没有配套，先了解一下，或许它真的是未来的主流，毕竟，我真的喜欢尤老师。
