Frontend
React
20 topics cover React across the Foundation 100.
Module 5 · React Foundations
React Components
The building block of a React app: a function that returns markup describing a piece of the UI, which you compose together to build whole screens.
JSX
The syntax that lets you write markup directly inside JavaScript, embedding dynamic values with curly braces so UI and logic live together.
Props
The inputs a parent component passes down to a child, making components configurable and reusable, and always flowing one way down the tree.
State
A component's memory: data that changes over time and, when updated through the setter, causes React to re-render the component with the new value.
Events
How React components respond to user interaction by attaching handler functions to elements, typically updating state in response.
Conditional Rendering
Showing different UI depending on the current data or state, using ordinary JavaScript conditions such as if, the ternary operator, and logical AND.
Lists & Keys
Rendering a collection by mapping an array to elements, and giving each element a stable key so React can track items efficiently across updates.
Hooks
Special functions that let function components use React features like state and side effects, subject to the Rules of Hooks that keep them reliable.
Forms
Handling user input in React with controlled components, where form state lives in the component and drives each input, plus validating before submit.
Component Composition
Building complex UIs by combining small, focused components — including passing JSX through the children prop — rather than through inheritance.
Module 6 · Frontend Architecture
Client-Side Routing
How a single-page app maps URLs to views and swaps them in the browser without a full page reload, keeping the address bar and navigation in sync.
Context API
React's built-in way to share a value with a whole subtree of components without passing props through every level, avoiding prop drilling.
Custom Hooks
Functions that extract reusable stateful logic out of components by calling built-in hooks, so several components can share behaviour without duplication.
State Management
Deciding where state lives and how it is shared as an app grows — from lifting state up, to context, to dedicated libraries — and keeping server data separate.
Data Fetching & API Integration
How a frontend loads data from an API and handles the three states every request has — loading, success, and error — while keeping the UI in sync.
Frontend Authentication Flow
The client side of authentication: logging in, storing the resulting credential safely, attaching it to requests, gating routes, and handling logout.
Error Boundaries
A React component that catches rendering errors in the subtree below it and shows a fallback UI, so one broken component does not crash the whole app.
Performance Optimization
Keeping a React app responsive by measuring first, then reducing unnecessary re-renders and expensive work with tools like memoization, applied deliberately.
Lazy Loading
Deferring the loading of a component or resource until it is actually needed, so the initial page loads faster and the rest arrives on demand.
Code Splitting
Breaking an app’s JavaScript bundle into smaller chunks that load on demand, so users download only the code the current view needs.
Projects using React
Practice React on real Padlor projects — coming soon.