Learn by Example : ReactJS

Learn how React is a UI library, not a framework, focused on the view and component driven development; build reusable, single responsibility components that compose into complex UIs.

Discover what makes React cool: its component-based architecture, virtual DOM, and server-side rendering for fast startup. Learn how props and state enable top-down data flow, composition, and maintainable UI.

Install npm, configure environment variables, and set up a simple http server to run local examples using nvm and bash across macOS, Windows, and Linux.

Set up a ReactJS development environment by creating an organized examples directory with per-example subfolders, then start an http server from the project root and view each example at localhost.

Access the development version of React from the official site, note production builds differ, and load the dev version via script tags in an HTML page.

Set up Sublime Text for React development by installing the editor, enabling package control, and adding the React plugin (with GSX hints) for a productive coding environment.

Learn to build a simple hello world in React by creating a React element and rendering it into a DOM node, demonstrating mounting and the hello world setup.

Understand how the virtual dom mirrors the real dom with React nodes, enabling fast updates. Learn how reconciliation computes differences and updates only the needed dom elements to boost performance.

Learn to nest react elements by composing headers and paragraphs with keys and fragments, then render them in a section with react-dom.

Explore how React builds a virtual DOM of React elements, React nodes, and fragments, with text and DOM representations, forming an immutable, hierarchical UI model.

Learn how React factory functions simplify creating elements and rendering them to the dom. See how unique keys identify list items for efficient updates in an unordered list and fragments.

Discover how JSX defines a readable dom hierarchy inside JavaScript, transforming GSX into browser-friendly code with Babel, enabling React elements without tedious native element setup.

Explore the Babel REPL environment by typing GSX and seeing real-time translation to JavaScript, revealing how GSX becomes the JavaScript createElement calls for rapid prototyping.

Babel enables transforming GSX into JavaScript for development and production environments, showing on-the-fly browser compilation for rapid prototyping and build-time compilation for production.

Explore writing elements with JSX in React by using Babel to transform JSX into JavaScript, render a list of headmasters with proper keys in the virtual DOM.

Learn by example: React components combine a React element with a state machine to respond to user and server events, rendering different elements as state changes.

Build a stateless React component, render it with React.createElement or JSX, and mount it on the page. Learn how Babel compiles JSX and heed the development warning about production use.

Learn how the render function selects which component to display based on a global casual variable, using three simple components—Hai, Hello, and Greeting—with pink and blue css class styling.

Use the render function to dynamically determine what a component displays, with props as read-only data from the parent and state as the component's internal data changed by external events.

Learn how props drive a React component by defining default props, accessing props within the component, and rendering content to display a message based on props.

Learn how a parent component passes props to nested components, with the content component accessing text via this.props and supporting expressions inside curly braces that are evaluated as JavaScript.

Learn how to transfer props from a parent student component to nested academic and extras components in React, passing name, grade, clubs, and subjects, and discuss scalability concerns.

Explore how the spread operator passes all parent props to a child component, avoiding explicit prop listing, while allowing overrides for specific properties.

Learn how to render dynamic components with props, create reusable box components with color-based styles, and build a random box that selects blue, red, or green using an index prop.

Discover how to validate React component props with PropTypes, including primitive validators, required props, default values, and custom validation functions to catch type errors in development.

Learn to access a component’s children with props.children in React, see how red x renders its nested elements in red, and how green text displays its own children.

Learn how lambda expressions enable rendering of list items in ReactJS by mapping over an array to produce to-do components, each with a unique key and an item prop.

Demonstrates passing a function as a child to a component to render a dynamic 1-to-n list, with the parent invoking the child to render each number.

Explore how components act as state machines by managing intrinsic state and rendering data via props, while emphasizing stateless components and centralized top-level state through purposeful composition.

Learn to build a stateful React component: create a box whose color and background color come from state, initialize with getInitialState, and render the box using inline styles.

Update React components by using on click handlers to change x color and background color through setState, showing how a box component maintains state and renders updates efficiently.

Learn by example: ReactJS shows updating a counter using the previous state in a functional setState updater. Increment by a prop value every 1.5 seconds and render the new count.

Use setState, not direct mutation, to update a component's state and trigger re-renders. Learn which properties belong in state—those affected by events or UI—and update them with functional setState.

Explore how events propagate in the DOM through capture and bubble phases, and learn how React handles event propagation with default bubbling and optional capture.

Hook up a click event in a React component, incrementing a counter from zero using a synthetic event, and explore onClick, bubble and capture phases with console logs.

Discover how React's synthetic event wraps browser events to normalize cross-browser differences, provide a unified interface, and boost performance via event pooling and a top-level universal event handler.

Explore how synthetic events standardize cross-browser differences and drive a counter component that increments by 1, 10, or 100 depending on alt or shift key during click.

Build a React comment app by composing the comment box and list. Render individual comments with hardcoded data, apply css, and wire state and event handlers.

Wires a React comment app by initializing state with messages, passing them as props to a comment list, and rendering each message with a comment component using map and keys.

Learn how to add a new comment in a React app by wiring a comment box to the top-level state, updating messages via props and setState, and rendering the list.

Show how the top-level comment app deletes a comment by passing an index to a delete function and updating state with a copied messages array.