React Fundamentals

React is the most widely adopted frontend library for building user interfaces. This guide covers the core concepts you need to know.

What is React?

React is a JavaScript library for building component-based UIs. It uses a declarative approach — you describe what the UI should look like, and React handles the DOM updates efficiently.

Creating a React App

The fastest way to start a new React project in 2024+:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

Core Concepts

Components

Components are the building blocks of any React application:

function Greeting({ name }: { name: string }) {
  return <h1>Hello, {name}!</h1>;
}

export default function App() {
  return (
    <div>
      <Greeting name="Developer" />
    </div>
  );
}

State Management with useState

State allows components to remember and react to user interactions:

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Side Effects with useEffect

Handle data fetching, subscriptions, and DOM manipulation:

import { useState, useEffect } from 'react';

function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);

  if (!user) return <p>Loading...</p>;
  return <h2>{user.name}</h2>;
}

Best Practices

1. Keep components small — If a component exceeds 100 lines, split it.
2. Lift state up — Share state between sibling components through their common parent.
3. Use TypeScript — It catches bugs early and improves developer experience.
4. Avoid premature optimization — Use React.memo and useMemo only when profiling confirms a bottleneck.

Next Steps

Continue to REST API Design to learn how to build backends that complement your React frontend.