Welcome to my React cheat sheet! In this article, I'll cover all the common concepts and techniques we use every day when developing React. I'll be covering topics such as React elements, element attributes, element styles, fragments, components, props, children's props, conditionals, lists, context, and hooks.
Whether you're an experienced developer or new to React, this cheat sheet aims to provide you with a quick reference for all the key concepts and techniques you need to know to build powerful and scalable applications with React.
So let's get started and dive into my React cheat sheet!
React Element Attributes
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="App"></div>
React Element Styles
In addition to attributes, elements can also have inline styles applied to them. To set inline styles in React, you'll need to use the style attribute and pass in an object containing the desired styles. For example:
<div style={{color: 'red', fontSize: '16px'}}>Hello World</div>
React Fragments
Sometimes, you may want to render a group of elements without adding an extra DOM node around them. In these cases, you can use React fragments, which allow you to wrap multiple elements in a single container without adding any extra markup. To use a fragment, you can use the <> syntax:
<>
<div>First element</div>
<div>Second element</div>
</>
React Components
Components are the building blocks of a React application and allow you to split your UI into reusable pieces. You can create a component by defining a JavaScript function or class that returns a React element. For example:
function MyButton(props) {
return <button>{props.label}</button>;
}
React Props
Props (short for "properties") are a way for components to accept data from their parent components. When a parent component renders a child component, it can pass data to the child component through props. For example:
<MyButton label="Click me" />
React Children Props
Sometimes, you may want to render a component's children inside the component itself. To do this, you can use the props.children property, which represents the content between the opening and closing tags of a component. For example:
function MyContainer(props) {
return (
<div>
{props.children}
</div>
);
}
<MyContainer>
<p>Content goes here</p>
</MyContainer>
React Conditionals
React allows you to use JavaScript expressions to conditionally render elements based on certain conditions. For example, you can use the && operator to only render an element if a certain condition is true:
{isLoggedIn && <p>Welcome back!</p>}
React Lists
React provides a map function that allows you to render a list of elements based on an array of data. For example:
const items = ['item 1', 'item 2', 'item 3'];
<ul>
{items.map((item) => (
<li>{item}</li>
))}
</ul>
React Context
React Context is a way to pass data through the component tree without having to pass props down manually at every level. It is often used for global data that needs to be accessible by multiple components, such as a user's theme preference or a language setting.
To create a context, you can use the createContext function and provide a default value for the context. Then, you can use the Provider component to provide the context value to its children, and the useContext hook to consume the context value from a component.
React Hooks
React Hooks are a new addition to React that allows you to use state and other features in functional components, rather than just class-based components. There are several built-in hooks that provide common functionality, such as managing state or performing side effects.
I am going to cover the 6 essential hooks you absolutely need to know:
useState
useEffect
useRef
useContext
useCallback
useMemo
React useState Hook
The useState hook allows you to add a state to a functional component. It returns an array with two elements: the current state value and a function to update it. You can use the hook like this:
import { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
React useEffect Hook
The useEffect hook allows you to perform side effects in a functional component, such as making an API call or setting up a subscription. It takes a function as an argument that will be called after the component renders. You can use the hook like this:
import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
// Perform side effect here
});
return <div>My component</div>;
}
React useRef Hook
The useRef hook allows you to create a mutable reference to a DOM element or value. It returns a mutable ref object whose current property is initialized to the provided argument (or null if no argument is given). You can use the hook like this:
import { useRef } from 'react';
function MyComponent() {
const inputRef = useRef(null);
return (
<div>
<input ref={inputRef} />
</div>
);
}
React useContext Hook
The useContext hook allows you to consume a context value from a functional component. It takes the context object as an argument and returns the current context value. You can use the hook like this:
import { useContext } from 'react';
const MyContext = createContext(defaultValue);
function MyComponent() {
const value = useContext(MyContext);
return <div>{value}</div>;
}
React useCallback Hook
The useCallback hook returns a memoized callback function that only changes if one of the dependencies has changed. It can be used to optimize the performance of components that rely on expensive functions or callbacks. You can use the hook like this:
import { useCallback } from 'react';
function MyComponent() {
const callback = useCallback(() => {
// Expensive function or callback
}, [dependency1, dependency2]);
return <div onClick={callback}>Click me</div>;
}
React useMemo Hook
The useMemo hook returns a memoized value that only changes if one of the dependencies has changed. It can be used to optimize the performance of expensive calculations by only re-computing the value when necessary. You can use the hook like this:
import { useMemo } from 'react';
function MyComponent() {
const value = useMemo(() => {
// Expensive calculation
}, [dependency1, dependency2]);
return <div>{value}</div>;
}
Conclusion
In this article, we provided a cheat sheet for some of the most common techniques and concepts used in React development, including element attributes, styles, fragments, components, props, conditionals, lists, context, and hooks. By familiarizing yourself with these concepts, you'll be well-equipped to build powerful and scalable applications with React.