- An expense tracking application proving CRUD using React.
- How to run?
- pull it, and run
yarn install
andyarn start
- pull it, and run
App
|___ Summary
|___ Form _ _ _ _ RecordsAPI
| |
|___ Table |
|_______ TableRow
|____ TableDisplay
|____ TableEdit
- App Component: is the data hub
- state:
records
for entries in Table component - state:
isLoaded
show loading info, before showing Table - state:
error
- method:
componentDidMount()
get data from database - method:
addRecord()
passed to Form - method:
deleteRecord()
passed to Table and TableRow - method:
updateRecord()
passed to Table and TableRow - method:
credits()
passed to Summary - method:
debits()
passed to Summary - method:
balance()
passed to Summary
- state:
- Summary Component: displays negative/ positive summation for the
records
- Form Component: add
record
intorecords
, updating Table - Table Component: just pass
records
to TableRow - TableRow Component: display each
record
inrecords
- RecordsAPI: utility providing interface to make RESTful API call
|__node_modules
|
|__public
| |___ index.html
|
|__ src
|___ utils: RecordsAPI.js
|
|___ components:
|___ App.js
|___ Form.js
|___ Summary.js
|___ Table.js
|___ TableRow.js
-
Ajax Libraries
- Axios
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.options(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- jQuery AJAX
- Axios
-
Browser built-in
window.fetch
No need to prepend "window" before
fetch()
: default obj
## No need to prepend "window" before fetch, this is the default obj
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
Do it in componentDidMount
lifecycle method. So you can use setState to update your component when the data is retrieved.
componentDidMount() {
fetch("https://api.example.com/items")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result.items
});
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
-
父组件M -> 子组件V
- 父组件prop 之间传给 子组件 prop
-
子组件M -> 父组件V
- 回调函数 + 父组件向子组件传递回调函数 + JS中,function是一等公民,因此传入的值会作为自身field保存起来;与C/Java不同。
-
sibling 组件间传值 M->V
- 必须依靠二者共同父组件来传递
- 但等组件之间的关系越来越复杂时候,这种依靠父组件作为中间人传值方式 would be a mess!
- Redux comes into picture
- 通过绑定
<input>
的onChange()
监视 View的变换 - 在 onChange Handler中更新组件的值,完成 View => Model 的数据流。
- Mount
- constructor()
- componentWillMount()
- render()
- componentDidMount()
- Update
- componentWillReceiveProps(): 将接收新的props
- shouldComponentUpdate(): 是否应该被更新?
- componentWillUpdate(): 组件即将更新
- render(): 组件被渲染
- componentDidUpdate(): 组件完成更新
- Unmount
- componentWillUnmount(): 组件被卸载前做一些数据清除