https://ljx213101212.github.io/Learn-ZTM-React-2021/monsters-rolodex/
jsx
key - reconciliation
webpack - jsx -> js
arrow function -> this -> JS execution context
declarative
HOC
pure function
generator function
debouncing
1. Decide components. cut big components(root node) into small components(leaf modes)
2. Decide where does state and props locate. (lift up) -> prop drilling -> sol: Context API & Redux Store
3. What changes when component state changes.
- Use NVM
- Use React Developer Tools (chrome extension)
- Use SSH Key (Github)
- Update package version (npm/yarn)
- Dingbats
- For dependency security issues
npm audit fix [good] yarn audit (can show but cannot fix, need manually fix now: 7/4/2021) https://javascriptbit.com/yarn-audit-fix-security-issues/ - Use Rendering (chrome devtool) - Paint flashing
- Eslint
To resolve 'cr'[prerrer/prettier] issue:
1. "prettier/prettier": "off",
2. yarn run lint
3. "prettier/prettier": "error",
- reconciliation
- Familiarize the usage of prop.children
- SyntheticEvent
- Virtual DOM
- SVG loader
- High Order Component
- [Use Effect Cheat Sheet]
ComponentDidMount
//Class
componentDidMount() {
console.log('I just mounted!');
}
//Hooks
useEffect(() => {
console.log('I just mounted!');
}, [])
ComponentWillUnmount
//Class
componentWillUnmount() {
console.log('I am unmounting');
}
//Hooks
useEffect(() => {
return () => console.log('I am unmounting');
}, [])
ComponentWillReceiveProps
//Class
componentWillReceiveProps(nextProps) {
if (nextProps.count !== this.props.count) {
console.log('count changed', nextProps.count);
}
}
//Hooks
useEffect(() => {
console.log('count changed', props.count);
}, [props.count])- [ ]useReducer
when state becomes complex, can use useReducer to swap all useState hooks.
use header and custom-button component to experience.
Key Mindset: Don't judge things uniformly, need to thinking about the tradeoff, in which case its good to use styled-components? which case it is not worth the effort?
https://stripe.com/docs/testing#cards
4242 4242 4242 4242
https://stripe.com/docs/js/elements_object/create
https://github.com/stripe-archive/react-elements-card-payment
(bitbucket)
https://www.youtube.com/watch?v=AXlN-f6Uk64&list=PLzvRQMJ9HDiSaisKr7OnM4Fl7JXCDDcmt&index=2
(github)
https://www.youtube.com/watch?v=Z3S2gMBUkBo
https://plugins.jenkins.io/github/
https://ci.example.com/jenkins/github-webhook/
https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-20-04
https://www.digitalocean.com/community/tutorials/how-to-install-java-with-apt-on-ubuntu-20-04#installing-specific-versions-of-openjdk
https://www.digitalocean.com/community/tutorials/how-to-install-jenkins-on-ubuntu-20-04
https://www.digitalocean.com/community/tutorials/ufw-essentials-common-firewall-rules-and-commands
https://www.arclab.com/en/kb/email/list-of-smtp-and-imap-servers-mailserver-list.html
outgoing: smtp.gmail.com SSL 465 incoming: imap.gmail.com SSL 993
prepare two gmails A (sending) and B (receving) Access for less secure apps - Turn on for A which used for sending
remembr in "Extended E-mail Notification"
tick use SSL
click Advanced... and configure your sending gmail username and password.
https://github.com/ljx213101212/ztm-react-heroku-2021
Note: Don't forget to authorize heroku domain in firebase authentication console. -> https://ztm-react.herokuapp.com/
https://www.selenium.dev/
http://watir.com/guides/form-example/
- Why NPM ? or why Yarn?