The React Cheatsheet for 2022

React Elements

React elements are written just like regular HTML elements. You can write any valid HTML element in React.

<h1>My Header</h1>
<p>My paragraph</p>
<button>My button</button>

We write React elements using a feature called JSX.

However, because JSX is really just JavaScript functions (and not HTML), the syntax is a bit different.

Unlike HTML, single-tag elements (like the img element), must be self-closing. They must end in a forward slash /:

<img src="my-image.png" />
<br />
<hr />

React Element Attributes

Additionally, JSX requires a different syntax for its attributes.

Since JSX is really JavaScript and JavaScript uses a camelcase naming convention (that is, “camelCase”), attributes are written differently than HTML.

The most common example is the class attribute, which we write as className.

<div className="container"></div>

React Element Styles

To apply inline styles, instead of using double quotes (“”), we use two sets of curly braces.

Inline styles are not written as plain strings, but as properties on objects:

<h1 style={{ fontSize: 24, margin: '0 auto', textAlign: 'center' }}>My header</h1>

React Fragments

React also gives us an element called a fragment.

React requires that all returned elements be returned within a single “parent” component.

For example, we can’t return two sibling elements, like an h1 and a paragraph from a component:

// this syntax is invalid
function MyComponent() {
  return (
    <h1>My header</h1>
    </p>My paragraph</p>
  );
} 

React Components

We can organized groups of elements into React components.

A basic function component is written similarly to a regular JavaScript function with a couple of differences.

React Props

React components can accept data passed to them called props.

Props are passed from the parent component to a child component.

Here we are passing a prop name from App to the User component.

function App() {
  return <User name="John Doe" />
}

function User(props) {
  return <h1>Hello, {props.name}</h1>; // Hello, John Doe!
}

Props is an object, so we can select the nameprop within User to get its value.

function App() {
  return <User name="John Doe" />
}

function User({ name }) {
  return <h1>Hello, {name}!</h1>; // Hello, John Doe!
}

React Conditionals

React components and elements can be conditionally displayed.

function App() {
	const isAuthUser = useAuth();

  return (
    <>
      <h1>My App</h1>
      {isAuthUser ? <AuthApp /> : <UnAuthApp />}
    </>
  ) 
}

React Lists

Lists of React components can be output using the .map() function.

.map() allows us to loop over arrays of data and output JSX.

function SoccerPlayers() {
  const players = ["Messi", "Ronaldo", "Laspada"];

  return (
    <div>
      {players.map((playerName) => (
        <SoccerPlayer key={playerName} name={playerName} />
      ))}
    </div>
  );
}

React Hooks

React hooks were introduced in React version 16.8 as a way to easily add reusable, stateful logic to React function components.

Hooks let us use all the features that were previously only available in class components.

Additionally, we can create our own custom hooks that give our app custom functionality.

Many React hooks were added to the core React library as well. We are going to cover the 6 essential hooks you absolutely need to know:

Visit -