⚛

React

Build user interfaces

React is a JavaScript library for building component-based, declarative user interfaces. It powers millions of web and mobile apps.

Single-Page Apps

Next.js (SSR/SSG)

React Native (mobile)

Dashboards

Design Systems

Time to learn: 1-2 months (after JS)

1Function Component

beginner

A React component is just a function returning JSX.

export function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

2useState Hook

beginner

State lets components remember information between renders.

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Clicked {count} times
    </button>
  );
}

3useEffect Hook

intermediate

Run side effects after render — fetching data, subscriptions, etc.

import { useEffect, useState } from "react";

export function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("/api/users").then(r => r.json()).then(setUsers);
  }, []);

  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

4Custom Hooks

advanced

Extract reusable stateful logic into your own hook.

import { useEffect, useState } from "react";

export function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    let cancel = false;
    fetch(url).then(r => r.json()).then(d => !cancel && setData(d));
    return () => { cancel = true; };
  }, [url]);
  return data;
}

Built something with React?

Generate a professional README for your project in seconds.

Generate README Next: Learn JavaScript