Open in app

Sign in

Write

Sign in

React.js cheatsheet for beginners

Vishnu Sivan
Coinmonks
Published in
6 min readJun 15, 2022

--

React is a JavaScript library developed by Meta for building user interface efficiently with minimal coding. The main objective of React.js is to provide the best possible rendering performance by breaking down the pages into smaller UI components.

The main feature of React.js is the easiness of code writing. We can embed JavaScript codes inside HTML codes using JSX syntax unlike technologies such as Angular where we have to write more lines of code.

In this article, we will learn the basics of React.js.

Getting Started

Table of contents

React Environment Setup

Prerequisites for creating react apps: Node.js and NPM

Sample app creation commands,

npx create-react-app hello-world
cd hello-world
npm start

Components

Components are independent and reusable bits of code. It is similar to JavaScript functions which returns HTML via a render() function. Components are broadly classified into two - Class components and Function components.

Class component

Function component

State

The state is an instance of React Component Class that can be used to store property values which belongs to the component. The component re-renders when a change in state occurs.

Props

Props (Properties) are read-only immutable components. It is an object which stores the value of attributes and serves as a medium to pass data from one component to another. It passes values to the component in the same way as an argument is passed to a function.

Setting default props/state

The defaultProps is used to set default values for the props. It can be defined as a component property to set the default props for the class. It also provides default values for the state in the constructor.

default props

default state

Life cycle methods

React is used to call multiple life cycle methods during the component execution of each stage. The method called when the component is created is called mounting. Each component update is called updating. The removal of components is called unmounting. The entire process is called the ‘Component Lifecycle’.

  • Mounting lifecycle methods
    constructor()
    static getDerivedStateFromProps()
    render()
    componentDidMount()
  • Updating lifecycle methods
    static getDerivedStateFromProps()
    shouldComponentUpdate()
    render()
    getSnapshotBeforeUpdate()
    componentDidUpdate()
  • Unmounting lifecycle method
    componentWillUnmount
  • Error handling lifecycle methods
    static getDerivedStateFromError()
    componentDidCatch()
Image credits projects.wojtekmaj.pl

DOM references

React uses refs for DOM access in the component. It can be achieved by adding a ref attribute to an element in your application.

DOM events

Event is an action that could be triggered as a result of the user action or a system-generated action. React has its own event handling system known as Synthetic Events which is very similar to the event handling on DOM elements.

React events has some syntactic differences from the DOM events. They are:

  • React events are named in the camelCase format instead of the lowercase format.
  • React event handler requires a function instead of a string.

JSX (Javascript XML)

JSX enables users to write JavaScript in HTML. It writes HTML elements in JavaScript and places them in the DOM without any createElement() or appendChild() methods.

Conditional rendering

React offers conditional rendering to render a particular component or code snippet based on some condition or the state of our application.

Property validation

Props validation is a mechanism used to avoid props data-related issues. The PropTypes is a react component property which enables users to validate data types of values passed through props.

React Router

React Router is a JavaScript library used to create routing in the React application. Routing is a mechanism where we can navigate to different pages when the URL path matches any ‘route’ inside the router file.

Installation

npm install react-router-dom --save

There are two types of router components:

  • BrowserRouter: It is used for handling dynamic URLs.
  • HashRouter: It is used for handling static requests.

Example

React Hooks

Hooks were introduced in React 16.8. It enables users to use props and states directly inside a function component. It is useful to manage the component state and perform an after-effect when certain changes occur in the state without writing a class.

Hooks are similar to JavaScript functions, but it is essential you follow these rules while using them.

  1. Only call Hooks at the top level
    Hooks should always be used at the top level of the React functions and it is necessary not to call them inside loops, conditions, or nested functions.
  2. Only call Hooks from React functions
    Call Hook only from function components and custom Hooks.

The built-in Hooks are divided into two — Basic hooks and additional hooks.

Basic Hooks

  • useState
  • useEffect
  • useContext

Additional Hooks

  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue

React context

Context enables users to pass data to the child components without passing props down manually at each level.

Reactstrap

Reactstrap is a javascript library that provides inbuilt Bootstrap components that makes it easier to create UI for your application with inbuilt validations. Reactstrap now supports Bootstrap 5.1.

Installation:

npm install reactstrap react react-dom
npm install --save bootstrap

Example:

Error Boundaries

React 16 introduces a new approach in handling errors within your application by using error boundaries. It allows the user to keep the app running in spite of an error occurring during the runtime and displays a fallback UI to the user.

React.js vs React native

React.js is an open-source JavaScript library used to build the user interface for Web Applications whereas React Native is used for developing a mobile application for iOS and Android. React Native is almost similar to React, however, it uses native components instead of web components as building blocks and targets mobile platforms over browsers.

Image credits Javapoint

Summary

Thanks for reading this article.

Thanks Gowri M Bhatt for reviewing the content.

To get the article in pdf format: React.js-cheatsheet.pdf

The article is also available on Dev

If you enjoyed this article, please click on the clap button 👏 and share to help others find it!

If you are interested in further exploring, here are some resources I found helpful along the way:

Join Coinmonks Telegram Channel and Youtube Channel learn about crypto trading and investing

Also, Read

Reactjs
Cheatsheet
For Beginners

--

--

Vishnu Sivan
Coinmonks

Written by Vishnu Sivan

734 Followers

Try not to become a man of SUCCESS but rather try to become a man of VALUE

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams