Notes of React 2
4th Set JSDB
1. install json server
create a new folder
copy json file from GitHub
1 |
|
2. Add API
in products.js
Install axios
yarn add axios
import axios from 'axios';
1 |
|
new file in commons to set axios
1 |
|
3. Search Product
In toolbox.js, change text into controlled component
In Products.js, create search function (because search function is to filter all the products)
// 1. Get New Array
// 2. Filter New Array
用match搜索
// 3. set State
得到新的products数组的值,重新渲染UI
5th Add animation effects to products
products wrapped by Transition Group (多个元素)
用CSSTransition包裹单个元素
1 |
|
6th POP window
首先构建页面,然后添加ADD, EDIT, DELETE 功能
https://github.com/typicode/json-server (json-server instruction)
children component 调用父组件函数 button
构建表单,通过表单传递信息给API,重新渲染页面
构建可控组建:
新建
1 |
|
然后新建
1 |
|
然后绑定
1 |
|
用submit函数获取表单数据
1 |
|
ToastContainer使用
https://fkhadra.github.io/react-toastify/introduction
container在index.js导入,与Router同级,用一个div包裹
toast放在AddInventory.js
Edit Inventory
https://developer.mozilla.org/en-US/docs/Web/JavaScript
similar to Addinventory, but need to put the existed info to the form
And write the update fuction in Products.js (为了实时更新)
first find the product we need to update (find index), and then update the product list and source list based on the changed info
子组件调用父组件可以通过参数传递
delete函数从products 传递到product
1 |
|
<Product product={p} update={this.update} delete={this.delete}></Product>
(已经传递给product组件)
从product传递到EditInventory
toEdit里props加一个deleteProduct: this.props.delete
delete btn bind onClick={this.onDelete}
7th Cart
async function查找是否product已经在购物车里
状态提升,toolbox和product都是products的子组件,是兄弟组件,所以把state里面的cartNum 提高到父组件products进行处理。
8th JWT
update
import useForm from 'react-hook-form';
to
import { useForm } from 'react-hook-form';
update
const { register, handleSubmit, errors } = useForm();
to
const { register, handleSubmit, formState: { errors } } = useForm();
9th Deploy
deploy on zeit.co
install now sudo npm install -g now
connect your github account with zeit
change “scripts” in package.json to
1 |
|
install serve in vscode
yarn add serve
then
now