React - Fundamentals Overview

Overview

Estimated time: 15–25 minutes

This page gives you a hands-on, copy‑pasteable tour of the React fundamentals you’ll use everywhere: components, props, state, events, and lists with keys. Each section includes a Try it demo you can run in your browser—no setup required.

Learning Objectives

• Recognize a React component and how JSX renders to the page.
• Pass data via props and update local state with events.
• Render lists with stable keys and understand why keys matter.

Prerequisites

• Basic knowledge of HTML, CSS, and JavaScript (ES6+).

Try it

// Components + Props + State + Events + Lists (all-in-one mini app)
const { useState } = React;

function Greeting({ name }){ // props example
  return <h3>Hello, {name}!</h3>;
}

function TodoList({ items }){ // list + keys example
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

function Counter(){ // local state + events example
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c - 1)}>−1</button>
      <span style={{margin: '0 10px'}}>{count}</span>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  );
}

function App(){
  const [name, setName] = useState('React learner'); // controlled input
  const todos = [
    { id: 't1', title: 'Learn JSX' },
    { id: 't2', title: 'Use props' },
    { id: 't3', title: 'Manage state' },
  ];
  return (
    <div>
      <label>
        Your name:
        <input value={name} onChange={e => setName(e.target.value)} style={{marginLeft: 8}} />
      </label>
      <Greeting name={name} />
      <Counter />
      <h4>Today’s todos</h4>
      <TodoList items={todos} />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('try-fundamentals'));
root.render(<App />);

Syntax primer (for newcomers)

• Component: A function returning JSX, e.g., function Hello(){ return <h1>Hi</h1>; }
• JSX: HTML‑like syntax in JS. Use className, not class; wrap JS expressions in {...}.
• Props: Inputs to a component, e.g., <Greeting name="Ada" />.
• State: Local data that changes over time. const [count, setCount] = useState(0).
• Events: Use camelCase like onClick; pass a function, e.g., onClick={() => setCount(c => c + 1)}.
• Lists & keys: Use a stable key (e.g., id) when rendering arrays.

Vocabulary

• Render: Produce UI from component functions and data.
• Reconciliation: React updates only what changed in the DOM.
• Controlled input: Form element whose value is driven by state, updated via events.

Common pitfalls

• Mutating state directly (e.g., count++)—use the setter instead.
• Using array index as key for dynamic lists—prefer a stable id when items can reorder.
• Passing the result of a function to an event instead of a function (write onClick={() => ...}, not onClick={handleClick()}).

Exercises

1. Change the initial name to your own and add a suffix prop to Greeting that defaults to "👋".
2. Add an input to append a new todo with a generated id; ensure each item has a stable key.
3. Extend the counter with a step prop that defaults to 1.