React JS - Technological watch

What is React ?

React is a javascript library for building user interfaces. It is developed by Facebook and released in 2013.

Big websites like Facebook, Messenger or Instagram are made with React.

React is the most influential library, and have 11 billion weekly downloads on npm.

Architecture and design

Components

We use React to make and use different component that represent logical reusable part of the UI.

<Header>
  <Logo icon="icon.png" />

  <Title text="Welcome to my website !" />

  <Action onClick={() => subscribeToMyNewsletter()} />
</Header>

React offers an easy way to build a component.

It is just about to create a function:

function Title() {
  return <h1>My blog title !</h1>;
}

The return value represents the HTML code (in jsx) you want to render.

And you can pass props to the component with passing it as an argument, and write variables putting them between brackets.

function Title({ text }) {
  return <h1>{text}</h1>;
}

If the variable text has changed, the component is automatically refreshed.

Of course, you can represent give our component his own internal state with the react hook useState.

This hook is simply a function that returns an array. The first index represents the value of the variable, the second index is a function you can use to change the variable value.

They are a getter and a setter.

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

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

React offers many other hooks.

useEffect is a hook made to catch events related to the component.

function Articles() {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    // The component is mounted in the DOM
    // Doing AJAX request here...

    return () => {
      // The component is unmounted
      // Doing cleaning stuff here if needed...
    };
  }, []);

  useEffect(() => {
    // The variable "articles" has changed...
  }, [articles]);

  return <ul></ul>;
}

If you want to learn more, here is the hook reference.

And you can create of course your own hook to share logic between your components.

Render

When the state or props component change, React performs re-renders. It first creates a new virtual DOM (representing JSX HTML elements) from scratch. However, instead of updating the actual HTML nodes directly, it compares this new virtual DOM with the previous version to identify any changes. Only the necessary updates are then applied to the real HTML nodes.

To optimize this process and reduce unnecessary comparisons, React provides hooks like useMemo and useCallback. These hooks allow you to memoize values or functions, respectively, so that they are only recomputed when their dependencies change. By using these hooks strategically, you can improve performance and avoid unnecessary re-renders.

Other libraries

React doesn’t care about routing, state management or animation. If you want to use it, you can use open source libraries and its huge ecosystem here.

Do you need a static website ? You have gatsby. Do you need server site rendering ? You have NextJS. For animation ? You have spring. For forums ? You have formik. For state management ? You have redux, mobx, flux, recoil, xstate.

React native

Finally, one other amazing part of React is about React Native, who can allow you to build native mobile applications.

Typescript

React and typescript are compatible together.

The jsx syntax can be used as tsx.

type CardProps = {
  title: string;
  paragraph: string;
};

export const Card = ({ title, paragraph }: CardProps) => (
  <aside>
    <h2>{title}</h2>
    <p>{paragraph}</p>
  </aside>
);

const el = <Card title="Welcome!" paragraph="To this example" />;

Jobs

React developer jobs are highly in demand in 2021.