React

React basics

• onClick instead of onclick.
• className instead of class.
• Rendering root element

  	const container = document.getElementById('root');
  	const root = ReactDOM.createRoot(container);
  	root.render(<p>Hello</p>);

• With JSX you can write expressions inside curly braces { }.
• The HTML code must be wrapped in ONE top level element.
• A fragment looks like an empty HTML tag: <></>.
• onClick={shoot} instead of onClick="shoot()".
• onSubmit
• To pass an argument to an event handler, use an arrow function.

  	<button onClick={() => shoot("Goal!")}>Take the shot!</button>
  	<button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>

• Alternative of v-if

    {
  	cars.length > 0 &&
  	<h2>
  	You have {cars.length} cars in your garage.
  	</h2>
    }

• If cars.length < 0 is equates to true, the expression after && will render.
• useEffect: Used to prevent execution of a block of code on every re-render.

    useEffect(() => {
    	//Runs on the first render
  	//And any time any dependency value changes
    }, [prop, state]);

• useContext: It is used to manage state. Like Vuex. createContext, context.provider, useContext
• useRef: Creates state directly which does not re-renders on update. Used to handle all DOM manipulation.
• useReducer: const [ state, dispatch ] = useReducer( reducer, initialValue );
• call dispatch with a parameter
• this parameter will be the first argument of reducer function
• Returned value of reducer is the value of state.
• useCallback: Used to stop recreating a function on re-render.
• useMemo: Used to stop executing a function on re-render.

Labels: React.js