React Glossary

React Basics

What is React?

React, aka React.js or ReactJS, is an open-source front-end JavaScript library used for building user interfaces using UI components.

Developed and maintained by Meta (ex-Facebook) and the developers’ community, React can be used for developing single-page or mobile apps.

React Card
  • Original author: Jordan Walke
  • Developer: Meta (formally Facebook) and community
  • Release date: May 2013
  • Stable release: Version 17.0.2
  • Written in: JavaScript
  • Platform: Web platform
  • Type: JavaScript library
  • License: MIT License
  • Website: reactjs.org
  • Users: 56,162 and counting
React Core Concepts
  • JSX

    JSX (JavaScript XML) is a syntax extension to JavaScript that provides a method to structure component rendering using syntax that is familiar to many developers. React defines JSX as a tag syntax that is neither a string nor HTML, but it is a syntax extension to JavaScript.

  • Declarative API

    React’s declarative API allows you to design simple views for each state of your application, and React automatically and efficiently updates and renders the right components when notices that your data changes.

  • ReactDOM

    DOM = Document Object Model.

    ReactDOM is a package of DOM-specific methods that can be used at the top level of the app to enable managing DOM elements more efficiently.

  • Virtual DOM

    The programming concept virtual DOM (VDOM) is an ideal representation (virtual) of a UI kept in memory and synced with actual DOM by a library. This process is known as reconciliation. ReactDOM is a clear example of this.

    The reconciliation process enables the declarative API of React, so you tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This saves you time, and the process is faster.

  • Elements

    Elements are the building blocks of React app. A React element shows you what you want to see on the screen, and they are immutable.

  • Components

    The core building blocks of React are entities named components. Every app built in React is made of pieces or blocks known as components. Components make the building of the UI much easier, and they can be rendered to a particular element in the DOM by using the library.

    Components allow you to split the UI into single, reusable blocks and see them as an independent piece of code. Moreover, components can be broken down into separate pieces of functionality and reused within other components.

    Types of components:

    - Function components

    Simply put, functional components are JavaScript functions, but these function components must be valid to work in React. When you write JavaScript functions in React, they should return some JSX in order to be a valid React function component and work perfectly.

    - Class components

    Class components are more complex than function components. They provide more features and are declared using JavaScript ES6 classes. The class components can pass data from one class to other class components.

  • Lifestyle Methods

    The custom functionalities that allow execution of the code during the different phases of a component are known as lifecycle methods. Some of the methods available in React are called when:

    - The component is created and inserted into the DOM

    - The component is updated

    - The component gets removed from the DOM, etc.

  • React Hooks

    Hooks are JavaScript functions that allow you to use React state and lifecycle methods from other components without writing a class. In fact, hooks do not work inside classes, but they let you use React without classes. They allow you to extract static stateful logic for a component, so you can test and reuse it in another component without changing the component hierarchy.

  • Rules of Hooks

    There are two rules that you need to follow if you want to use hooks in React:

    1. Call Hooks at the top level

    Do not call Hooks inside loops, conditions, or nested functions. This rule ensures you that Hooks are called in the same order each time a component renders.

    2. Call Hooks from React function and from custom Hooks

    Do not call Hooks from JavaScript functions. Following this rule, ensures you that all stateful logics are visible from its source code.

  • React State Management Libraries

    The state in React is a plain JavaScript object that holds information that may change the lifetime of the component. In fact, the only difference between props and state is that the state is managed inside, within the component, while props get passed to the component.

    React offers many ways how to store, use and manage state. React itself is powerful and you can create quite complex apps only with it. However, there are many State Management libraries created for React, and here is a list of a few most used React state management libraries:

    - Redux
    - MobX
    - Recoil
    - Akita
    - Hookstate
    - Zustand