一 、 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 

3.1 基本使用

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