关于前端:新手入门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标签外面间接写入required：true

    <Form rules={[{required:true}]}>
        <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()};
    }