very interesting video1 corse
very interesting video2 corse
very interesting video3 corse
very interesting video4 corse Use Ref
very interesting video5 cource useDispach
Flex container tutorial very fine
Create Project : npx create-react-app form
Install bootstrap : npm install react-bootstrap bootstrap
vs
Install martial-ui : npm install @material-ui/core @material-ui/icons
useful commands with Simple React Snippet installed in VCode
Comment Code Block Ctrl+K+C/Ctrl+K+U
Snippets
| Snippet | Renders |
|---|---|
imr |
Import React |
imrc |
Import React / Component |
imrs |
Import React / useState |
imrse |
Import React / useState useEffect |
impt |
Import PropTypes |
impc |
Import React / PureComponent |
cc |
Class Component |
ccc |
Class Component With Constructor |
cpc |
Class Pure Component |
sfc |
Stateless Function Component |
cdm |
componentDidMount |
uef |
useEffect Hook |
cwm |
componentWillMount |
cwrp |
componentWillReceiveProps |
gds |
getDerivedStateFromProps |
scu |
shouldComponentUpdate |
cwu |
componentWillUpdate |
cdu |
componentDidUpdate |
cwu |
componentWillUpdate |
cdc |
componentDidCatch |
gsbu |
getSnapshotBeforeUpdate |
ss |
setState |
ssf |
Functional setState |
usf |
Declare a new state variable using State Hook |
ren |
render |
rprop |
Render Prop |
hoc |
Higher Order Component |
react native snippets install plugin in visual code
rfc
syntax example code :
tag : [‘tag1’, ‘tag2’, ‘tag3’]
{tags.map(tag => <li key={tag.id}>{tag}</li>)}
tags.map((item, index) => (
<FormControlLabel value={item.id} control={<Radio />} label={item.title}>
))
handleIncrement() {
if “this” is called in a part of a method of object : obj.method() this is the reference of the obj
if “this” is called in the function : function() return a reference to the window
object so can be undefined id the strict mode is enabled
}
contructor() {
super();// referring to the extend class ex Component
console.log(‘Contructor’, this);
this.handleIncrement = this.handleIncrement.bind(this);
}
OR
handleIncrement = () => {
console.log(‘Contructor’, this);
}
setState(prevState => {
return { …prevState, {count: prevState.count – 1} }
})
ADD a router
create-react-app material-ui-react-router
OR
install datepicker MUI npm i @material-ui/pickers npm i @date-io/date-fns@1.x date-fns
npm install @material-ui/lab
npm install axios
I can use the ThremeProvider in the index.js to import the default theme to customize
const [index, setIndex] = useState(0);
const [shiftArr, setShiftArr] = useState([]);update react project :
sudo npm install -g npm-check-updates