The Ultimate React Cheat Sheet

React is an open-source, front-end, JavaScript library for building user interfaces or UI components. Just like Vuejs, It gives us the ability to create components, layouts etc in our application. In this article we will go through all the fundamentals of Reactjs in this React Cheat Sheet.

Installation

Using React in our application is quite easy as we can add it using the CDN or by using the CLI to install it from npm.

To add React using the CDN, add this script tags in your html

Or you can install it using NPM:

The --save flag will add react and react-dom into our application depenency.

Using create-react-app

Create React App is a tool that gives you a massive head start when building React apps. It gives us the ability to scaffold a new react project with no configuration. We can install this globally on our local machine by running this command on our terminal:

The -g command will install it globally on our local machine.

With this installed, we can now scaffold a react project using this command:

When the setup is completed, we can now move into the project and then download the projects dependencies

After install, to server your application, run npm start on your terminal.

React DOM

To setup a simple react DOM, we can import ReactDOM, this is what we will use for rendering.

  • The ReactDOM.render() function takes two arguments, HTML code and an HTML element where the code will be mounted.

Functional Component

This is otherwise known as a stateless component which is is just a plain javascript function which takes props as an argument and returns a react element:

Now to use this component, we can do this:

Class Component

A Class component acts like a function that receives props, but that function also considers a private internal state as additional input that controls the returned JSX.

We can pass in some states:

Lifecycle Hooks

React component passes through 3 phases which are Mounting, Updating and Unmounting.
When a component is about to be mounted, React calls 4 built-in methods:

  • Constructor()
  • getDerivedStateFromProps()
  • render()
  • ComponentDidMount()

Mounting Phases

  • Constructor()

This method is called before anything else in the component, when the component is initiated, and it is the natural place to set up the initial state and other initial values. This method passes a prop as a parameter and always start by calling super(prop) before setting any state or anything else.

  • getDerivedStateFromProps()

The method gets called before rendering elements in the DOM. It is invoked after a component is instantiated as well as when it receives new props.

  • Render()

This method outputs the defined HTML into the DOM. This is a required method.

  • ComponentDidMount()

This method gets called immediately after the component is rendered. This is the best place to write statements that requires that the component is already placed in the DOM.

Updating Phase

The component updates whenever there is a change in the component state or props. Some react built-in method gets called when the component is in this state.

  • getDerivedStateFromProps:This method gets called immediately a component is updated. This basically does the same thing as the method in the mounting phase.
  • ShouldComponentUpdate: This method returns a boolean(True or False) which specifies whether React should continue with the rendering or not.
  • render:This method gets called when the component is updated. It re-renders the HTML to the DOM with the new values:
  • getSnapshotBeforeUpdate: This method gives you the ability to have access to the props and state before the component is updated.
  • ComponentDidUpdate: This method gets called after the component has been updated.

Unmounting Phase

This is a state where react removes a component from the DOM. This phase comes with a componentWillUnmount built-in method. The method gets called when the component is about to be removed:

Props

Props is a concept used in passing data from one component to another. basically it is used for data communication:

React Map

We can iterate through items using the map method. Just like you could use it in Vanilla js, we can have an array of items and then use the map method:

We can also use it in our react component like this:

Here we are passing it as an array to the component.

Events

Just like any other framework or library, we have the ability to bind event listeners to our template, this events listen to methods defined. In React, we could define a click event like this:

We can also use the change event listeners too on input fields:

State

State is basically storing of data. We can store objects, arrays, strings and then use them in our react components. To use the data stored in the state, we can use the this keyword

React HMR

The hot module reload retains the application state which is lost during a full reload. It saves compilation time as it only updates what was changed and not the entire application:

React Router

To handling routing in react, we have to install the react router using NPM:

To route to a component, we can use the <Route /> tag which takes the path and the component we routing to as an attribute:

React State Hooks

This is basically a state management system. To use this, we have to import useState from react. lets write a simple method which will increment the value of a state when a button is clicked:

Please let me know if you think we should add in our react cheat sheet. We will be looking for your feedback.

React Templates

Well as above mentioned thins of react cheat sheet will help you creating your project quicker, there is other option also available, which can save your time. Reactjs Templates are always best to learn as well as to use in your react project to make it complete faster. It gives you many ready to use and well designed components, which will increase your speed of creating project. Do checkout WrapPixel for best react templates.

Avid designer cum developer at WrapPixel.com who is passionate about solving complex UX challenges across digital businesses.