React

React has several unique differentiators that set it apart from other JavaScript libraries for building user interfaces. Here are a few examples:

Components: React is built around the idea of components, which are small and reusable pieces of code that make up a user interface. A component is defined as a JavaScript class or function, and it has a render method that returns the HTML for the component. Here is a simple example of a function component in React:

import React from "react";

function HelloWorld() {
    return <h1>Hello, World!</h1>;
}

export default HelloWorld;

Props: React provides a way for components to receive data from their parent components, known as props. Props are passed as attributes to a component, and they allow for the flexible and dynamic reuse of components with different data. Here is a simple example of using props in React:

import React from "react";

function UserGreeting({ name, age }) {
    return (
        <p>
            Hello, my name is {name} and I am {age} years old.
        </p>
    );
}

function App() {
    return (
        <div>
            <UserGreeting name="John" age={30} />
            <UserGreeting name="Jane" age={25} />
        </div>
    );
}

export default App;

In the example above, note the name and age props being set on the two instances of the UserGreeting component. The values of these props get set in the parent App component and flow downward into the UserGreeting where they are rendered within a <p> tag as specified by the UserGreeting component.

State: React has powerful state management capabilities, allowing components to store their state, or the data that determines their behavior and appearance. React provides ways to update and pass data between components, making it easier to manage the state of an application, even for complex and dynamic user interfaces. Here is a simple example of using state in React:

import React, { useState } from "react";

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

    const increment = () => {
        setCount(count + 1);
    };

    const decrement = () => {
        setCount(count - 1);
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
        </div>
    );
}

export default Counter;

JSX: React uses a syntax extension called JSX to write HTML-like code directly in JavaScript. This makes it easier to write and read the HTML for components, and it also allows for the dynamic generation of HTML based on the component's state or props. See the examples above for some JSX in action. Note the curly braces, { and }; these allow the use of JavaScript right inside HTML.

Hooks: React introduced a new feature called hooks in version 16.8, which provides a way for functional components to have state and use other features previously only available to class components. Hooks make it easier to manage and reuse state and other logic in a functional component, and they have become a popular way to write React components. Here is an example of a custom hook in React:

import { useState } from "react";

function useCounter(
    initialCount: number = 0
): [number, () => void, () => void] {
    const [count, setCount] = useState<number>(initialCount);

    function increment() {
        setCount(count + 1);
    }

    function decrement() {
        setCount(count - 1);
    }

    return [count, increment, decrement];
}

export default useCounter;

In the example above, note the use of React’s built-in useState hook. Custom hooks in React are really just functions that use and build upon other React hooks. This body of this hook should look familiar as we used it in our React state example above; however, with this useCounter hook, we can encapsulate our counter behavior outside the context of any one React component so that we can reuse this behavior in any component we choose. Here’s what our Counter component looks like once we refactor it to make use of our new custom hook:

import React from "react";
import useCounter from "../hooks/useCounter";

function CounterWithHook() {
    const [count, increment, decrement] = useCounter();

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
        </div>
    );
}

export default CounterWithHook;

A little more simplified, eh? If we wanted to, we can now use our useCounter hook in any other component that needs to implement counter behavior.

These are just a few more examples of the unique differentiators of React, and there are many more features and capabilities that make it a powerful and flexible library for building user interfaces.