一 、 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')
        }
      }
    }

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