Build interactive user interfaces with React - components, props, state, hooks, routing, and a real mini project.
What Is React and Why Components Matter React is a JavaScript library, created by Meta, for building user interfaces. It is not a full framework. React focuses on one job: ...
Setting Up a React Project with Vite or CRA Modern React development runs on a build tool that bundles your files, runs a dev server, and optimizes production output. Two popular ...
JSX Syntax Explained JSX is a syntax extension that writes HTML-like markup inside JavaScript. It is not required, but it makes your components readable and is the standard style ...
Components and Props Components are the building blocks of any React app. You split your interface into logical pieces, render each with a component, and pass data between them ...
State with the useState Hook State is data that changes over time and triggers re-renders. In function components you manage it with the useState hook. The basic pattern useState ...
Handling Events in React React events look like HTML events but follow JSX conventions. Handlers are passed as props, and they receive a synthetic event object that wraps the ...
Lists and Keys Rendering a collection of data is one of the most common jobs in React. You map over an array and turn each item into an element. Mapping data to JSX Each call to ...
useEffect and the Component Lifecycle useEffect lets a component perform side effects after it renders, like fetching data, subscribing to events, or changing the document title. ...
React Router Basics React Router is the standard library for navigation in React apps. It maps URLs to components so users can share links and use the back button just like a ...
Build a Mini Task List App Put everything together with a small but complete task list. You will use state, events, lists, and keys in one component. The data model Each task is ...