React fundamentals

React is a JavaScript library for building user interfaces. It lets you compose complex UIs from small, reusable pieces called components.

Components

A React component is a function that returns JSX — a syntax that looks like HTML but is compiled to JavaScript. Components can accept data via props.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>
}
export default function App() {
  return <Greeting name="World" />
}

JSX Rules

JSX must return a single root element. Use a <> fragment when you don't want an extra wrapper div. All tags must be closed, including self-closing ones like <img />.

export default function Card() {
  return (
    <>
      <img src="/avatar.png" alt="Profile" />
      <h2>John</h2>
      <p>Web Developer</p>
    </>
  )
}

State with useState

State lets components remember values between renders. When state changes, React re-renders the component.

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>
  )
}

Rules of Hooks

Hooks like useState must be called at the top level of your component — never inside loops, conditions, or nested functions. Always call them in the same order every render.

function Form() {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  return (
    <form>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
      />
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
    </form>
  )
}

Side Effects with useEffect

useEffect runs code after a render. Use it to fetch data, set up subscriptions, or sync with external systems.

import { useState, useEffect } from 'react'
function UserProfile({ userId }) {
  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 <p>{user.name}</p>
}

The Dependency Array

The second argument to useEffect controls when it runs. An empty array [] means run once on mount. Listing values means run whenever those values change.