React Programming Cheat Sheet

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

1. JSX
2. Components of React
3. Props
4. Children Props
5. Fragments
6. Lists and Keys
7. State and useState
8. useCallBack and CallBack Function
9. useMemo and Memoization
10. React.memo and Restricting Re- renders

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;

No browser is able to understand JSX. To convert it into something that is understood by browsers, you will need to compile it to plain JavaScript, which the browser will be able to understand.

The most common compiler that we use to write programs in JSX is called Babel.

There is a notable difference between JSX and HTML.

You can add inline styles to JSX elements by using the style attribute. Plus, all the styles are updated within an object, unlike in HTML, where it happens within a set of double quotes.

JSX gives us full control over JavaScript elements directly within our user interface. You can insert or embed simple JS expressions using the curly braces syntax.

Using JSX, you can nest elements within one another.

If you want to write comments in JSX, you can do that by writing them as JS comments that are written between curly braces.

To write any react app, you will need three things:

1. ReactDOM.render() method, which is used to render or show the app by mounting it onto an HTML element.
2. A root node, which is a JSX element. It acts as the root of the application. So, whenever you render the root node, it will render all the children that are within it.
3. An HTML element where we insert the app within an HTML page. Generally, the element is a div with an id of “root” and is located in an index.html file.

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>;
 }
}

To distinguish React components from plain JS functions, function and class components are capitalized.

Despite being functions, they are not called conventional JavaScript functions. Plus, they are executed by rendering them like we render JSX in apps.

The benefit of using these components is that they can be reused across apps whenever needed.

These components leverage the power of JS functions, so we are able to logically pass data to them by passing one or more arguments.

Props

This function can be used to pass data to another component. Its values are identical to those in simple JSX / HTML components. But we can access their values within the props themselves.

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 this, 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 within the child component. As such, props ought to never show signs of change since props are JavaScript objects.

Plus, they are available in parameters of the component to which they are passed.

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. These children props can be useful if we want to pass elements or components as props to other components.

Since children props are JS expressions, you can use them in combination with if-else statements and switch statements so that we can show information based on conditions.

You can utilize ternary operators and short-circuiting to use conditions within a component’s returned JSX.

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.

These fragments are ideal for conditional logic that has multiple components and adjacent elements.

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.

Every React element present within a list of elements needs a key prop which is used by React to keep track of each element that is being iterated with the .map() function.

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>

State and useState

useState is a React hook that is used to find the state in a function component. State can be used to access certain values in the components over time.

useState also manages the local component state. It gives us a state variable and a function that we can update.

useState can also be used to get a ‘setter’ function to update a state once we create it.

We can use this hook once or multiple times within a single component. Plus, it is able to accept primitive or object values to manage the state.

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 */
});