新手入门react,学习引导
source link: https://segmentfault.com/a/1190000040789011
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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()}; }
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK