新手入门react，学习引导

React 学习文档

​ 作者：Sunny

一、学习 轴

1、阅读react官网文档

• 阅读顺序：

  • 核心概念
  • hooks
  • API reference
  • 高级指引

• 边学边练，跟着官网文档里面的例子

  • 创建一个react项目

    首先全局安装

    npm install -g create-react-app

    新建项目并命名

    create-react-app project

    到项目文件下启动

    npm start

• 新建一个.jsx ，要在index.js中引入并且在render里面写入

2、学习 ant-design官网文档

• 全局安装antd

  npm install antd --save

• 用的时候引入即可，例：

  import { DatePicker } from 'antd'

3、学习 TypeScript

• 从手册指南开始
• 手册指南看完后看 typeScript 深入理解版

• 安装一个用tsx写的react项目

  安装命令

  npx create-react-app demo02-ts-template --template typescript

二、Demo 练习（function）

• demo要求：form表单里面填写内容，点击确认添加之后，下面表格里面会新增一条数据，form表单支持非空验证，模拟后台请求。table支持删除，修改，加载中效果，表格支持筛选效果等功能

• 开发顺序以及技术

  • v0.1

    • func component（用函数组件写）
    • antd Form/Table
    • modify with modal（用模态框来修改）
    • status change with radio

  • v0.2

    • tag attribute（每个item创建标签，根据重要程度）
    • tag filter（根据重要程度筛选）

  • v0.3

    • mock.js + axios（用mock.js模拟请求后台）
    • spin（加载中效果）

• 技术点与笔记

  • 因为用到antd组件库，所以在开头的时候每个用到的组件都要引入，否则报错

  • form表单里面默认值用法

    initialValues={{tagImportance: 'important', event: '', time: ''}}

  • form表单的每一个非空或者规则验证直接跟在Form.Item后面

    <Form>
        <Form.Item  rules={[{required: true, message: 'Please input your password!'}]}>
        </Form.Item>
    </Form>

  • 触发form表单验证的方法validteFields

    form.validateFields(['event', 'date', 'tagImportance']).then(values=>{...})

  • 定义初始值并且改变初始值的方法用useState
  • 尽量用解构
  • 比较尽量用严格比较 “ === ”

三、class组件

• 定义初始值不需要用useState,直接用state

  this.state={
      value: '',
      numbers: ['苹果', '香蕉', '橘子', '桃子']
  }

• 改变变量的时候

   this.setState({numbers: list})

• 方法最好用箭头函数，调用直接用this

• 始终使用props来调用父类的构造函数

    constructor(props) {
      super(props);
      this.state = {date: new Date()};
    }