一 、 create-react-app脚手架
对于现在比较流行的三大框架都有属于自己的脚手架（目前这些脚手架都是使用node编写的，并且都是基于webpack的）：
- Vue的脚手架：vue-cli
- Angular的脚手架：angular-cli
- React的脚手架：create-react-app
它们的作用都是帮助我们生成一个通用的目录结构，并且已经将我们所需的工程环境配置好。
1.1 创建项目并启动
全局安装
第一步，全局安装：npm i -g create-react-app
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react
第三步，进入项目文件夹：cd hello-react
第四步，启动项目：npm start
npx
npx create-react-app react_app
cd react_app
npm run start
注意：项目名称不能使用大写字母
1.2 项目结构
1.3 创建TS项目
create-react-app <project-name> --template typescript
npx create-react-app <project-name> --template typescript
1.4 了解PWA
全称Progressive Web App，即渐进式WEB应用
- 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用
- 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
- 这种Web存在的形式，称之为是 Web App
解决问题
- 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
- 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
- 实现了消息推送
- 等等一系列类似于Native App相关的功能
二、AntDesign 库的使用
antd 的 JS 代码默认支持基于 ES modules 的 tree shaking，对于 js 部分，直接引入 import { Button } from 'antd' 就会有按需加载的效果
2.1 在 create-react-app 中使用
// 1. 安装
npm i antd// 2. 修改 src/index.js，引入 antd/dist/antd.css
import 'antd/dist/antd.css'// 3. 使用
import React from 'react'
import { Button } from 'antd'
import './App.css'const App = () => (<div className="App"><Button type="primary">Button</Button></div>
)export default App
2.2 craco.config.js 配置
// 安装
npm install @craco/craco/* package.json */
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}2.2.1 修改 antd 主题色
1.安装 craco-less
npm install craco-less
2.craco.config.js 配置
const CracoLessPlugin = require('craco-less')
module.exports = {plugins: [{plugin: CracoLessPlugin,options: {lessLoaderOptions: {lessOptions: {modifyVars: { '@primary-color': '#1DA57A' },javascriptEnabled: true}}}}]
}3.index.js 引入
import 'antd/dist/antd.less'
2.2.2 配置别名
const path = require('path')
const resolve = dir => path.resolve(__dirname, dir)module.exports = {webpack: {alias: {'@': resolve('src')}}
}
1三、react-router
React Router的版本4开始，路由不再集中在一个包中进行管理了：
- react-router是router的核心部分代码
- react-router-dom是用于浏览器的
- react-router-native是用于原生应用的
安装react-router：
- 安装react-router-dom会自动帮助我们安装react-router的依赖
npm install react-router-dom
3.2 路由组件
3.2.1 <NavLink><Link>
相当于 vue 的 router-link，渲染成 a 标签。
区别：
NavLink 比 Link 拥有更多的属性，如：exact、className、activeClassName…
<NavLink className="list-group-item" to="/home">Home</NavLink> /* 封装<NavLink> */
// MyNavLink 组件
import React from 'react'
import { NavLink } from 'react-router-dom'// 传过来的 body 内容也在 this.props.children 中
return <NavLink className="list-group-item" activeClassName="linkActive" {...this.props} />// 使用的组件
<MyNavLink to="/home">Home</MyNavLink>
<MyNavLink to="/about">About</MyNavLink>
1
