An extensive visual cheat sheet has been assembled to help you ace every one of the significant ideas and highlights of the React library.

React Programming Cheat Sheet

Basics of React

JSX

JSX is used by React to create templates instead of regular JavaScript. You don’t have to use it, but here are some benefits associated with it. Such as, It upgrades the code while it’s being compiled into JavaScript and it makes it faster. It saves you time and helps minimize errors.

import React from 'react';
 class app extends React.Component {
   render() {
      return (
         <div>
            Bonjour !!!
         </div>
      );
   }
}
export default App;

Components of React

  • Function Component: A component that returns JSX.
import React from "react";
 function FunctionalComponent() {
 return <h1>Bonjour</h1>;
}
  • Class Component: When characterizing a class part, you need to make a class that extends React components.
Bring in React, { Component } from "react";
 class ClassComponent extends Component {
 render() {
   return <h1>Bonjour</h1>;
 }
}

Props

This function can be used to pass data to another component. Its values are identical to those in simple JSX / HTML components.

For example, you need to pass custom information to our part from a parent segment or to show the client’s name in our application header.

const username = "Sam";

To do as such, we add custom ‘ascribes’ to our part called props.

We can add a large number of them as we like. And you give them names that suit the information we pass in.

To pass the client’s name to the header, you utilize a prop you properly called ‘username’

ReactDOM.render(
  <Header username={username} />,
  document.getElementById("root")

We called this prop ‘username,’ however can utilize any legitimate identifier we would give,

For instance, a JavaScript variable prop is an item that each part gets as a contention.

function Header(props) {
return <h1>Hello {props.username}</h1>;
}

Prop segments can’t be directly changed. As such, props ought to never show signs of change since props are JavaScript objects.

function Header(props) {
  props.username = "Doug";
  return <h1>Hello {props.username}</h1>;
}

Children Props

It is utilized to show whatever you add between the opening and shutting labels while requesting a segment.

An example of a stateless task that is utilized to make a component. This is a capacity, and there is no catchphrase, so use {props.children}.

const Picture = (props) => {
  return (
    <div>
      <img src={props.src}/>
      {props.children}
    </div>
  )
}

This part contains a <image> that is accepting a few props, and afterward, it is showing {props.children}.

At whatever point this segment is summoned {props.children} will likewise be shown, and this is only a reference to what in particular is between the opening and shutting labels of the segment.

//App.js
render () {
  return (
    <div className='container'>
      <Picture key={picture.id} src={picture.src}>
          //what is placed here is passed as props.children  
      </Picture>
    </div>
  )
}

Rather than requesting the part with a self-shutting label <Picture/> if you summon its full opening and shutting labels <Picture> </Picture>, you would then be able to put more code between it.

This separates the <Picture> part from its substance and makes it more reusable.

Fragments

A typical example in React is for a part to return different components. Sections let you bunch a rundown of children without adding additional hubs to the DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Lists & Keys

Lists are a constant group of texts or pictures. They are made out of essential and supplemental activities, which are addressed by symbols and text.

function ListItemLink(props) {
  return <ListItem button component="a" {...props} />;
}

//...

<ListItemLink href="#simple-list">
 <ListItemText primary="Spam" />
</ListItemLink>

React utilizes keys to performantly refresh singular components when their information changes rather than re-delivering the whole rundown.

Keys need to have different qualities to have the option to recognize every one of them as per their key worth.

function App() {
  const people = [
    { id: 'Ksy7py', name: 'Jack' },
    { id: '6eAdl9', name: 'Bobby' },
    { id: '6eAdl9', name: 'Fredrick' },
  ];

  return (
    <ul>

keys should have different qualities, preferably a remarkable string, like an id.

{people.map(person =>
         <Person key={person.id} name={person.name} />
      )}
    </ul>
  );
}

If the data that you have is different from the data that is available, then the map’s second parameter should be used to have each element index. 

function App() {
  const people = ['Jack', 'Bobby', 'Fredrick'];

  return (
    <ul>

useCallBack & CallBack Function

A callback snare is a method used to improve the execution of a segment. It uses three components: the callback capacities, parent part names, & callback use.

UseCallback is a React memo that works similarly to React. It memoizes callback capacities and doesn’t allow re-rendering.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useMemo & Memoization

useMemo is the same as useCallback and is for improving execution. Be that as it may, rather than being for callbacks, it is for putting away the consequences of costly computations

useMemo permits us to memorize or recall the aftereffect of costly computations when they have been made for specific information sources.

Memoization implies that if an estimation has been done before with a given contribution, there’s no compelling reason to do it once more since we now have the put-away aftereffect of that activity.

useMemo returns a worth from the calculation, which is then put away in a variable.

const List = React.useMemo(() => 
  listOfItems.map(item => ({
    ...item,
    itemProp1: expensiveFunction(props.first),
    itemProp2: anotherPriceyFunction(props.second) 
  })), [listOfItems]
)

React.memo & Restricting Re- renders

It is a service that permits us to enhance how our segments are delivered. Specifically, it plays out a cycle considered memoization that assists us with keeping our parts from re-delivering when they don’t have to do so (see React.useMemo for the complete meaning of memoization).

React.memo helps most with keeping arrangements of segments from being re-delivered when their parent parts re-render.

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});