Getting Started with React

Why React?

React pairs a tiny API surface with a huge ecosystem. You describe what the UI should look like for a given state and React takes care of keeping the DOM in sync. That means fewer imperative updates and more predictable interfaces.

Install the Tooling

1. Install the current LTS version of Node.js.
2. Run npm create vite@latest my-react-app -- --template react-ts to scaffold a modern React + TypeScript project.
3. cd my-react-app && npm install to pull dependencies and npm run dev to start the development server.

Learn the Core Concepts

• Components: Functions that return JSX. Keep them small and focused.
• Props: Component inputs. Use TypeScript interfaces to document them.
• State: Call useState for local state and useEffect for side effects such as fetching data.
• Composition over inheritance: Build complex UIs by nesting components.

import { useState } from "react";

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

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

Project Structure Tips

• Keep UI primitives in a /components folder and domain-specific logic in /features or /modules.
• Co-locate CSS (or SCSS) modules with the component they style so refactors stay simple.
• Add ESLint + Prettier early to enforce consistent patterns.

Practice Next Steps

1. Fetch remote data with fetch inside useEffect, render loading and error states, and memoize derived data with useMemo.
2. Try React Router or Remix to add multiple pages.
3. Ship a small component library to cement the basics.

React rewards iteration. Start tiny, keep your components pure, and the rest of the ecosystem—hooks, routers, build tools—will slot neatly into place.