一、安装
$ create-react-app [Project name]
- 默认支持sass
二、核心依赖
react：react 核心
react-dom：用于开发渲染web 应用；
react-scripts：封装webpack服务；
"start": "react-scripts start",// 开发环境
"build": "react-scripts build",// 生产环境打包
"test": "react-scripts test",// 单元测试
"eject": "react-scripts eject"// 暴露配置，用于自定义修改
react-native：用于开发渲染 App 应用；
三、暴露配置文件
$ yarn eject
新增文件
- config 文件夹：react框架webpack的配置
- scripts 文件夹：项目运行的构建脚本文件
配置修改
1、解决严格模式eslint报错
// package.json
"babel": {
"presets": [
[
"babel-preset-react-app",
false
],
"babel-preset-react-app/prod"
]
}
常见配置修改
-
移除默认的 sass，使用 less 替换；
config\webpack.config.js -
增加别名：@==》src；
config\webpack.config.js
alias: {
'@': paths.appSrc,
- 修改端口号
// scripts\start.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';
// 方式一：直接修改
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 9527;
const HOST = process.env.HOST || '127.0.0.1';
// 方式二：修改环境变量 process.env
// 安装：yarn add cross-env
// 修改启动脚本："start": "cross-env PORT=9527 node scripts/start.js",
- 修改浏览器兼容：
package.json==>browserslist
// 这里可以实现对【postcss-loader:控制css3的前缀】生效
// 这里可以实现对【babel-loader:控制ES6的转换】生效
// 还有一个ES6内置API的转换需要额外配置【@babel/polyfill】；
方式一：在入口文件之间引入该依赖包；
方式二：使用提供的react-app-polyfill（react对上面依赖包的重写）
// 入口文件引入
- 配置开发环境代理
// src\setupProxy.js
// yarn add http-proxy-middleware
// vue 代理
devServer: {
port: 8080, // 本地跑的端口，默认是8080，
proxy: {
"/api": { // 请求路径中含 /api
target: "http://localhost:9000", 目标服务器
},
},
}
//react 代理
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
createProxyMiddleware('/jian', {
target: 'https://www.jianshu.com/asimov',
changeOrigin: true,
ws: true,
pathRewrite: { '^/jian': '' },
})
);
app.use(
createProxyMiddleware('/zhi', {
target: 'https://news-at.zhihu.com/api/4',
changeOrigin: true,
ws: true,
pathRewrite: { '^/zhi': '' },
})
);
}
四、MVC和MVVM
react 思想
MVC：model数据 （state）> view视图 > controller 控制器 > model数据
-
数据驱动视图，
-
视图改变数据，需要开发者手动实现；
vue 思想
MVVM：model数据 > viewModel 数据视图监听层 > view视图 > vm
双向驱动：
-
数据驱动视图：m > vm > v，通过绑定
-
视图驱动数据：v >vm >m，通过监听
五、jsx
胡子语法{}：必须是js表达式；
- number/string：原样输出，其他基本类型显示为空；
- 对象：数组纯数字可以，其他报错
- 行内样式：style={{fontSize:“12px”}}；驼峰命名；
- 类名：className=“box”
- 常用写法：
- 三元运算符（判断）；
- Array.map()（循环）返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值；不会改变原始数组；
底层机制
-
第一步：将
jsx语法编译成虚拟DOMvirtual DOM -
第二步：首次渲染将整个虚拟DOM渲染成真实DOM；
-
第三步：后续数据改变，通过
dom-diff算法进行新老虚拟dom对比，以最少的修改操作真实DOM打补丁； -
相比原生dom操作，多了首次生成虚拟dom的时间；
-
后续页面修改就比原生快了，所以框架用于页面交互的项目，静态页面没必要用；
编译插件
babel-preset-react-app- 此插件，将
jsx标签内容解析为React.createElement([元素标签名],[属性对象],[元素子节点]...) createElement()方法执行后生成一个对象：即虚拟DOM={}，也有人称之为：JSX对象、JSX元素、ReactChild对象等- 可在Babel官网在线解析生成；
