XirfadHub Roadmap
Frontend Developer Roadmap
Step 10 / 18180 min

React

React Ecosystem

Explanation

React lets you build UIs from reusable components with props, state, and hooks.

Code example

tsx
import { useState } from "react";

type Props = { title: string };

export function Counter({ title }: Props) {
  const [count, setCount] = useState(0);

  return (
    <section>
      <h2>{title}</h2>
      <p>{count}</p>
      <button onClick={() => setCount((value) => value + 1)}>
        Increment
      </button>
    </section>
  );
}

Helpful resources

Exercise

Create a React app with a reusable Card component and a filtered list of learning resources.