📄 Table of Contents

How react works

import React, { Component, 
PureComponent,
lazy, Suspense,
useState, useEffect
}
from "react";
import ReactDOM from "react-dom";
import {createStore, applyMiddleware} from "redux";
import { Provider, connect } from "react-redux";
Class App extends Component{
constructor(props){
super(props);
this.state= {
count:0
}
}
render(){
return(
<div>
<Count />
</div>
)
}
ReactDOM.render(<App />, document.getElementById("root"));ReactDOM.hydrate(<App />, document.getElementById(‘root')); # 'hydrate' in case of Server-side Rendering
class MyComponent extends Component {
state = {
counter: 0;
counter: this.props.initialCounterValue,
};
}
React Life Cycle version 15.6

this.setState()

this.setState(prevState => ({ expanded: !prevState.expanded }), ()=> )

Event Handling (recommended method) :

handleClick = (item) => (e) => {
e.preventDefault();
e.stopPropagation();
};
<MyInput onClick={this.handleClick(item)} />;
handleClick(item){
e.preventDefault();
e.stopPropagation();
};
<button onClick={() => this.handleClick()}>//OR<MyInput onClick={(e) => this.handleClick(item, e)}} />;
ComponentWillReceiveProps vs getDerivedStateFromProps
ComponentWillReceiveProps vs ShouldComponentUpdate

Provider:

import { Provider, connect } from "react-redux";
const store=createStore(myReducer, applyMiddleware);<Provider store={store} />

connect()

const mapStateToProps = (state) => {
return {
myName: state.name
}
}
const mapDispatchToProps = (dispatch) => {
return {
changeName:(name)=>{dispatch({type:"CHANGE_NAME", payload: name
})
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Middleware:

import logger from "redux-logger";
import thunk from "redux-thunk";
import promise from "redux-promise-middleware"
const customMiddleWare = store => next => action => {
console.log("Middleware triggered:", action);
next(action);
}
const store=createStore(myReducer,
applyMiddleware(customMiddleWare, promise, thunk, logger
));
<Provider store={store} />

ContextAPI:

const {Provider, Consumer} = createContext({
locale:{},
logout: () =>{}
}

High Order Component:

const LoaderHOC = (WrappedComponent) => {
return class LoaderHOC extends Component {
render(){
return {
<WrappedComponent {...this.props} />}
}
}
}
export default LoaderHOC

Lazy Loading of Components (≥16.6):

import React, {lazy, Suspense } from "react";
const MyComp = lazy(() => import ('./components/myComp'));
<Suspense fallback = {<div> Loading... </div>}>
<MyComp> </MyComp>
</Suspense>

React Hooks (≥16.8)

import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
# const [growth, setGrowth] = useState(0);
# const [nirvana, setNirvana] = useState(false);
# const [message, setMessage] = useState(‘’)

One -way Binding vs Two-way Binding

Reducers

Why to call super() & pass props to it

React.cloneElement vs this.props.children

render() {   
return(
<Paragraph>
<Sentence>First</Sentence>
<Sentence>Second</Sentence>
<Sentence>Third</Sentence>
</Paragraph>
)
}
render() {
return (
<div>
{React.Children.map(this.props.children, child => {
return React.cloneElement(child, {
onClick: this.props.onClick })
})}
</div>
)
}
render() {   
return(
<Paragraph onClick={this.onClick}>
<Sentence>First</Sentence>
<Sentence>Second</Sentence>
<Sentence>Third</Sentence>
</Paragraph>
)
}

Render Props:

When Should We Use setState() in React?

those with GREEN background are the ones where setState() is allowed.

Conclusion

As discussed above, please remember NOT to use setState in render, componentWillUpdate and componentDidUpdate which lead to an infinite loop and throw an error.

◉ 9 popular ways to implement css in react

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.