ReactJS
- https://codeburst.io/how-to-call-api-in-a-smart-way-2ca572c6fe86
- https://obedparla.com/code/a-visual-guide-to-react-mental-models/
- https://obedparla.com/code/a-visual-guide-to-react-mental-models-part-2-use-state-use-effect-and-lifecycles/
From official first generated readme
- Create React App documentation.
- React documentation.
- Code Splitting
- Analyzing the Bundle Size
- Making a Progressive Web App
- Advanced Configuration
- Deployment
npm run build
fails to minify
Setup
Node
npm install -g create-react-app
npx create-react-app my-app
cd my-app
CDN
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js'></script>
Component Life Cycle (pre 16.3, 16.3)
- Creation
constructor()
componentWillMount()
– deprecatedrender()
- create all direct-child component
componentDidMount()
- Re-rendering due to re-rendering parent
componentWillReceiveProps()
– deprecatedshouldComponentUpdate()
componentWillUpdate()
render()
- send new props to all direct child components
componentDidUpdate()
- Re-rendering due to
this.setState()
shouldComponentUpdate()
componentWillUpdate()
render()
- send new props to all direct child components
componentDidUpdate()
- Re-rendering due to
this.forceUpdate()
render()
- send new props to all direct child components
componentDidUpdate()
- Re-rendering due to catching error
- parent
render()
- send new props to all direct child component
- error thrown in any life-cycle method
- parent componentDidCatch() - store error data
- parent
Using react element ref (more)
class RefComponent extends React.Component {
onFocus() {
this.myInput.setAttribute("class", "highlight");
}
onBlur() {
this.myInput.setAttribute("class", "");
}
render() {
return (
<div>
<input
ref={input => {
this.myInput = input;
}}
onFocus={this.onFocus.bind(this)}
onBlur={this.onBlur.bind(this)}
/>
</div>
);
}
}
JSX
JSX = Script to render component
Multiple tag component
function renderSomething(){
return <>
<div>div-1</div>
<div>div-2</div>
</>
}
Hook
Second argument of useEffect is dependency option
- none: run on every render
[]
: run once[a,b]
: run when a or b change
Run once example
useEffect(() => {
fetchSettings().then((settings) => {
setSettings(settings);
});
}, []);