Author:  React.js Cheatsheet – The Ultimate Guide

Table of Contents

React.js is your go-to for designing dynamic, efficient user interfaces. Whether you’re a seasoned developer or new to web development, this blog will explain React components, elements, and key ideas. We’ll help you master JSX syntax, React properties, and conditionals. 

React Cheat Sheet

Utilized for building user interfaces in a declarative and efficient manner, React stands as an open-source JavaScript library. Operating exclusively within the view layer of a Model View Controller (MVC) architecture, it adopts a component-based approach. Facilitating the creation of modular user interfaces, React encourages the development of reusable UI components capable of presenting dynamic data through react context.

The React Cheat Sheet serves as a concise and swift reference for frequently employed React methods. This single-page resource encapsulates key components and methods for easy accessibility. Let’s watch some cheat sheet for React:

React Elements

React elements mirror regular HTML elements in their syntax. Any valid HTML element can be expressed in React.

These React elements are constructed using JSX, a distinctive feature of React that blends HTML syntax with JavaScript functions.

However, due to JSX’s nature as JavaScript functions (as opposed to HTML), there are some syntactical differences. Notably, single-tag elements, like the img element, must be self-closing and terminate with a forward slash /:

React Element Attributes

JSX introduces a modified syntax for attributes, aligning with JavaScript’s camelCase convention. For instance, the class attribute in HTML becomes className in JSX.

React Element Styles

Applying inline styles in JSX involves using double curly braces instead of double quotes. Styles are expressed not as plain strings, but as properties within objects:

React Fragments

React provides a special element known as a fragment to address the requirement of returning all elements within a single parent component. This is essential as React mandates a single “parent” for returned elements. If you prefer not to use a container element like a div, you can use a fragment:

Fragments can be written in regular or shorthand syntax: <React.Fragment></React.Fragment> or <></>.

React Components

In the realm of React useState Hook, we have the ability to organize clusters of elements into what we call React components.

A fundamental function component is crafted in a manner quite similar to a standard JavaScript function, with a couple of nuances to be mindful of.

Firstly, component names must kick off with a capital letter. That is, we’d go for something like MyComponent instead of myComponent. Furthermore, unlike regular JavaScript functions, components must gracefully return JSX.

The basic syntax of a React function component is as follows:

React Props

In the world of React, components have the ability to receive data passed down to them, which we refer to as props.

These props are dispatched from the parent component to the child component. As an illustration, consider the passing of a prop named “name” from the App component to the User component:

Since props is essentially an object, we can extract the value of the “name” prop within the User component through react hooks.

For a cleaner code approach, especially when dealing with a single prop like “name,” object destructuring can be employed:

It’s worth noting that any JavaScript value, including other elements and components, can be passed as a prop.

React Children Props

Props can also be conveyed by placing data between the opening and closing tags of a component. These props, passed in this manner, reside within the children’s property.

As an example, consider passing content between the tags of the User component:

React Conditionals

React components and elements can be conditionally displayed. One approach is to employ a separate return statement with an if-statement.

If you wish to create a conditional within a return statement, you must use a conditional that resolves to a value.

To utilize the ternary operator, enclose the entire conditional in curly braces.

React Lists

Lists of React components can be generated using the .map() function, which allows us to iterate over arrays of data and produce JSX.

Consider the example of outputting a list of soccer players using the SoccerPlayer component:

It’s imperative to include the key prop when looping over an array of data, and this key must be assigned a unique value, not merely an element index. In the above example, a unique value, the playerName, serves as the key.

React Context

React Context serves as a mechanism for seamlessly conveying data throughout our component tree, eliminating the need for relying solely on props.

The challenge with props lies in the occasional need to pass them through intermediary components that don’t necessarily require the data—an issue commonly referred to as props drilling.

Consider this simplified scenario where props are passed unnecessarily through a ‘Body’ component:

Before embracing Context, it’s worthwhile to explore if our components can be better structured to circumvent the practice of passing props through unnecessary segments.

When implementing Context, we employ the createContext function provided by React. This function can be called with an initial value that becomes the starting point for the context.

The resultant context comprises a Provider and a Consumer property, both functioning as components. The Provider is wrapped around the component tree where the data needs to be propagated, while the Consumer is placed within the component set to consume this value.

By adopting this approach, we enhance the organization of our components and sidestep the need to pass props through superfluous elements in the component tree.

React Hooks 

React Hooks emerged with React version 16.8, providing a convenient way to integrate reusable, stateful logic into React function components, thereby extending their capabilities beyond what was traditionally exclusive to class components.

These hooks empower us to leverage features previously reserved for class components, and we can even craft our own custom hooks tailored to bestow specific functionalities upon our applications. The React library has incorporated numerous essential hooks, and we’ll delve into six that are pivotal for your understanding:

  • useState
  • useEffect
  • useRef
  • useContext
  • useCallback
  • useMemo

The useState hook, in particular, lives up to its name by enabling us to employ stateful values within function components. This hook is preferred over a simple variable because, upon state modification, the component automatically re-renders to reflect the updated value.

When using useState, we initiate it at the top of our component, optionally passing an initial value for its state variable. Employing array destructuring on the returned value allows us to access both the stored state and a function to update that state.

A practical illustration involves a basic counter that increments upon interaction:

This showcases how useState facilitates the management of state in a functional and straightforward manner, enriching the functionality of React function components.

React useState Hook

The React useState hook serves a straightforward purpose—it enables the utilization of stateful values within function components.

Rather than relying on a basic variable, useState is employed because, upon the modification of state, our component undergoes a re-render, typically to showcase the updated value.

In keeping with the pattern of other hooks, we invoke useState at the outset of our component, allowing us to provide an initial value that populates its state variable.

The use of array destructuring on the value returned from useState enables us to conveniently access both the stored state and a function dedicated to updating that state.

For a practical demonstration, let’s consider a basic example involving the incrementation of a counter.

This showcases how the useState hook simplifies the management of state in function components. By facilitating a seamless way to handle state changes, it enhances the functionality of React components, as illustrated in this uncomplicated counter scenario.

React useEffect Hook

The React useEffect hook comes into play when we need to interact with the external environment, such as making API calls. Its primary purpose is to handle side effects, encompassing operations beyond our application with unpredictable outcomes.

The basic syntax of useEffect involves providing a function as the first argument and an array as the second argument.

To illustrate its usage in fetching and displaying a list of posts, consider the following example:

If we require a value from outside the effect function, it must be included in the dependencies array. If that value undergoes changes, the effect function will be re-executed.

As an illustration, consider this code snippet that toggles the “overflow-hidden” class on the body element based on whether the mobile menu is open or closed:

This exemplifies how useEffect efficiently manages side effects, ensuring that our interactions with the external world are seamlessly integrated into the React component lifecycle.

React useRef

The React useRef hook provides a direct gateway to a JSX element, offering a mechanism for accessing it without the need for prop drilling.

To utilize useRef, simply call the hook, retrieve the returned value, and assign it to the ref prop of the desired React element. It’s important to note that refs are not inherent properties of components but rather of React elements.

The fundamental syntax for useRef is as follows:

Once a ref is linked to a specific element, the value stored in ref.current can be utilized to directly interact with the underlying element. As an example, suppose we want to focus on a search input when users employ the key combination Control + K:

In this scenario, the inputRef is employed to directly access the input element, demonstrating how useRef enhances our ability to interact with specific elements within a React component.

React useContext

The React useContext hook streamlines the consumption of context compared to employing the standard Context.Consumer component.

The syntax entails passing the entire Context object that we intend to consume into useContext. The returned value corresponds to the value propagated through the Context.

To adapt our previous example using the useContext hook:

This showcases how useContext simplifies the process of accessing context values, providing a more concise and readable approach compared to the traditional Context.Consumer component.

React useCallback

React’s useCallback hook is a valuable tool for optimizing our application’s performance by preventing the recreation of functions each time a component re-renders. This is crucial for maintaining efficiency in our app.

To illustrate, consider our previous example with a PlayerList. If we enhance it to allow adding players to our array and pass down a function (handleRemovePlayer) via props to remove players, this function would be recreated with every re-render, potentially impacting performance.

To address this, we can employ useCallback by encapsulating our callback function and including its sole argument, player, in the dependencies array. Here’s a human-written version of the code:

  

React useMemo

Moving on to useMemo, this performance-enhancing hook allows us to ‘memoize’ operations, remembering the results of expensive calculations to avoid unnecessary recomputation.

In contrast to useEffect and useCallback, useMemo is designed to return a value. It requires a callback function and a dependencies array, and the callback must explicitly return the value. Let’s consider a real-world example from the mdx-bundler documentation, which converts .mdx files into React components:

Here, useMemo ensures that the Component value is not needlessly recreated during re-renders, contributing to better performance.

Berry MUI Template

berry -material ui - react

Berry MUI React Dashboard Template accelerates backend application development with its stunning React Template and an array of pre-built MUI Core components. Featuring a modern UI, 6+ color presets, and font family options, Berry caters to diverse projects like User Management, Chat, and SaaS interfaces. 

With both light and dark layouts, RTL support, and responsive design, Berry ensures compatibility across browsers. The Figma Design Resource file and TypeScript version are exclusive to Standard Plus and Extended licenses, providing a seamless design experience. 

Benefit from its organized code structure, internationalization support, and comprehensive documentation. Enjoy technical support and updates with React useEffect Hook upon purchase for a smooth development journey.

Check out – How to Migrate smoothly from CRA to Vite for React?

Share this:
Share

Riti Rathod

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Popular Products
Popular Posts