乐趣区

关于前端:新手入门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()};
      }
退出移动版