React.js ¶

React.js (219k ⭐) is a popular front-end framework. Due to its popularity, there are some front-end frameworks based on React:

• Next (118k ⭐, web)
• React Native (114k ⭐, mobile)
• Preact (35.8k ⭐, small)

There are also libraries of components such as MUI (87k ⭐).

Useful links 📌

• React Examples
• react-philosophies

You'll write components returning some HTML.

import React from 'react';

const MyExample = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
};

You can use ReactDOM to render components:

import { createRoot } from "react-dom/client";

const root = createRoot(document.getElementById("root")!);
root.render(
  <React.StrictMode>
    <MyExample />
  </React.StrictMode>
);

You can use the useState react hooks for views with variables that may change. The view is updated when the variable is updated, and the view can update the variable.

[...]
const MyExample = () => {
  const [count, setCount] = useState<number>(0);
  useEffect(() => { /* onCountUpdated */ }, [count]);
  
  const increaseCount = () => {
    setCount(count + 1)
  }
  
  return (
    <>
      <p hidden={count !== 0} className="text-center">count > 0</p>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>count++</button>
      <button onClick={increaseCount}>count++</button>
    </>
  );
};

{
    entries?.map(function(entry: XXX) {
        return <p>{ entry.text }</p>
    })
}

JS: "react", "react-dom",
TS: "@types/react", "@types/react-dom"