Introduction

React is a popular JavaScript library used for building user interfaces. It was first introduced by Facebook in 2013 and has gained widespread adoption since then. React is known for its declarative programming style, which allows developers to describe what they want their UI to look like, and React takes care of the rest.

In this article, we'll explore how React works by examining its latest versions and features.

Function Components

Function Components are a type of component in React, which are defined as JavaScript functions that return a React element. They are a simpler and more concise way to define components compared to Class Components.

A Function Component receives input data (props) and returns a description of what should be displayed on the screen, which is a React element. Function Components do not have any internal state or lifecycle methods, and their input is read-only. They are mainly used for rendering static content or for UI elements that don't require complex logic.

Here's an example of a simple Function Component that renders a heading:

function Heading(props) {
  return <h1>{props.text}</h1>;
}

In this example, the Heading function receives a text prop as input and returns a h1 element containing the value of the text prop. This component can be used by passing a text prop to it like this:

<Heading text="Hello, World!" />

This would render a h1 element with the text "Hello, World!" on the screen.

Class Components

In React, a class component is a type of component that is defined using ES6 classes. Class components provide additional features such as lifecycle methods and access to state and props, making them more flexible than function components.

To create a class component, you must extend the React.Component class and define a render() method that returns a React element. The render() method is responsible for rendering the UI for the component.

Here's an example of a simple class component:

import React from 'react';

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

In this example, Greeting is a class component that extends the React.Component class. It takes a name prop as input and renders a greeting message using that prop. The render() method returns a React element representing the greeting message.

Class components can also define other methods such as componentDidMount() and componentWillUnmount(), which are lifecycle methods that are called by React at specific points in the component's lifecycle. This allows you to perform actions such as fetching data from an API or cleaning up resources when the component is unmounted.

Props

In React, props is a shorthand for "properties," which are used to pass data and configuration settings between components. A React component can have one or more props, which are passed down from a parent component to a child component. Props are read-only, which means that a child component cannot modify the props it receives from its parent. Instead, a child component can use the props to render its output or pass them to its own child components.

Props can be any JavaScript value, including strings, numbers, arrays, objects, or even functions. To pass props to a component, you can use JSX syntax like this:

<MyComponent name="John" age={25} />

In this example, name and age are two props passed to the MyComponent component. They can be accessed within the component using the props object:

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>You are {props.age} years old.</p>
    </div>
  );
}

In this example, the name and age props are interpolated into the output of the MyComponent component.

Hooks

In React, hooks are functions that let you use state and other React features without writing a class component. They are functions that hook into the React lifecycle and allow you to use stateful logic in functional components. Hooks were introduced in React version 16.8 as a way to simplify state management and reuse logic across components.

There are several built-in hooks in React, such as useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, useImperativeHandle, and useLayoutEffect.

useState

useState is a built-in hook in React that allows functional components to manage state. Before the introduction of hooks, state could only be managed within class components in React. With the useState hook, you can add state to a functional component by declaring a state variable and a function to update that variable.

Here is an example of how to use useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

In this example, the useState hook is used to declare a state variable called count and a function to update it called setCount. The initial value of count is set to 0. When the button is clicked, the setCount function is called with the new value of count, which causes a re-render of the component with the updated state value.

useEffect

useEffect is a built-in hook in React that allows functional components to use lifecycle methods, perform side effects and manage state. The useEffect hook runs after every render of the component and is a replacement for the componentDidMount, componentDidUpdate and componentWillUnmount lifecycle methods in class components.

The syntax of the useEffect hook is as follows:

useEffect(callback, dependencies)

The first argument callback is a function that will be called after every render, and the second argument dependencies is an optional array of values that the callback depends on.

Here is an example of how to use the useEffect hook to perform a side effect after the component is rendered:

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Component has mounted or updated');
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

In this example, the useEffect hook is used to log a message to the console after the component has mounted or updated. Since the dependencies array is not specified, the callback will be called after every render.

If the dependencies array is specified, the callback will only be called when the values in the array change. Here is an example:

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Component has mounted or updated');
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

In this example, the useEffect hook will only be called when the count state variable changes. This is because the count variable is included in the dependencies array.

Hooks like useState , useEffect allows functional components to have state and side effects, which were previously only available in class components. This makes it easier to write and maintain complex React applications.

JSX

JSX is a syntax extension for JavaScript that allows developers to write HTML-like syntax in their JavaScript code. It is used in React to define the structure and appearance of UI components. JSX makes it easier to read, write, and reason about the structure of a UI. Instead of creating and manipulating DOM elements directly using JavaScript, JSX enables developers to write HTML-like code directly within their JavaScript code.

In JSX, tags that look like HTML represent React components, which can include other components and/or plain text. For example:

function MyComponent() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

In this example, the MyComponent function returns a div element containing an h1 element with the text "Hello, world!". The HTML-like syntax in the return statement is actually JSX code, which will be transformed into JavaScript code by the React compiler. The resulting JavaScript code will create a React element, which will then be rendered as HTML by the browser.

JSX also allows for the interpolation of variables and expressions using curly braces. For example:

function Greeting(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

In this example, the name prop is interpolated into the h1 element using curly braces. This is a common pattern in JSX, which enables the dynamic rendering of content based on the state of a component or its props.

Virtual DOM

In React, the Virtual DOM (Document Object Model) is an in-memory representation of the actual DOM, which is used for efficient updates of the UI. Whenever the state or props of a React component change, a new virtual DOM tree is created, which is compared to the previous virtual DOM tree. React then determines the difference between the two trees, and updates only the parts of the actual DOM that have changed, minimizing the amount of re-rendering required.

React uses the virtual DOM because updating the actual DOM can be a slow and expensive operation, especially for large and complex UIs. By using the virtual DOM, React can perform updates more efficiently and reduce the performance overhead of updating the UI.

The virtual DOM in React is a JavaScript object that mirrors the structure of the actual DOM, but with lightweight representations of the elements. This makes it faster to manipulate and compare than the actual DOM, which is a complex and fully-formed tree of nodes.

React also provides a set of APIs to work with the virtual DOM, such as ReactDOM.render() to render components to the actual DOM, and React.createElement() to create virtual DOM elements. By using these APIs, developers can work with the virtual DOM in a declarative and easy-to-understand way, without needing to worry about the low-level details of manipulating the actual DOM.

Conclusion

React is a powerful and popular library for building user interfaces. Its declarative programming style and use of a Virtual DOM make it efficient and easy to reason about. Function Components, Class Components, Hooks, JSX, and the Virtual DOM are all key features of React and understanding them is essential for building high-quality React applications.

React continues to evolve with new features and improvements being added regularly. As of the latest versions, React has introduced features such as Concurrent Mode, Suspense, and Server Components that make it more powerful and flexible.

By mastering React and its features, developers can create amazing user interfaces and build high-performance applications that are easy to maintain and scale. With its vibrant community and extensive ecosystem, React is a great choice for any web development project.