React - Introduction

Overview

Estimated time: 15–20 minutes

React is a JavaScript library for building user interfaces. It helps you describe UI as a function of state using components. In this series, you’ll go from absolute basics to production-ready patterns, with lots of runnable examples you can try in your browser.

Learning Objectives

• Understand what React is and where it fits in the web stack.
• Know the core ideas: components, props, state, and rendering.
• Be ready to run your first React app in the browser without any build tools.

Prerequisites

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

Try it

function Greeting({ name }){
  return <h3>Hello, {name}!</h3>;
}
function App(){
  return (
    <div>
      <Greeting name="React learner" />
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('try-intro'));
root.render(<App />);

Primary Objective

By the end of this tutorial series, you will know every fundamental you need to build production-ready web apps using React—covering inputs and validation, API calls, data flow between components and screens, non-blocking async patterns, lists with pagination and filtering, and pragmatic routing and testing.

Why React?

• Component model scales from small widgets to large apps.
• Declarative rendering keeps UI in sync with state.
• Thriving ecosystem and compatibility with many toolchains.

What You’ll Build

• Interactive components (forms, lists, conditional UI).
• Reusable patterns with hooks and context.
• Small runnable demos using CDN links (no setup required).

Syntax primer (for newcomers)

• Component: A function that returns JSX, e.g., function App(){ return <h1>Hi</h1>; }
• JSX: HTML-like syntax in JavaScript, compiled to React.createElement.
• Props: Inputs passed to components like attributes, e.g., <Greeting name="Ada" />.
• State: Component data that changes over time, managed via hooks.

Vocabulary

• Render: Produce UI from component functions and data.
• Reconciliation: React’s process for updating only what changed in the DOM.
• Hook: Special function (e.g., useState) adding React features to components.

Common pitfalls

• Confusing JSX with HTML: JSX uses className instead of class, and camelCased event names like onClick.
• Mutating state directly: Always use state setters (e.g., setCount), never modify state variables in place.

Checks for Understanding

1. What problems does a component-based approach solve?
2. How does React update the DOM when state changes?

Exercises

1. Extend Greeting with a new prop called suffix and render it after the name (for example, "Hello, Ada 👋").
2. Create a separate Info component that renders a short paragraph and include it inside App.
3. Render two Greeting components from an array using map. Use stable keys (e.g., an id field) instead of array indexes.