The Modern React Bootcamp (Hooks, Context, NextJS, Router)

Master the basics of JSX: writing html-like code in JavaScript, Babel's transpilation, and rules such as a single root element, self-closing tags, and wrapping siblings in a div.

Explore how JSX is syntactic sugar for React.createElement, turning HTML-like tags into React.createElement calls. See Babel demos and learn basic tag rules and embedding JavaScript expressions in JSX.

Embed JavaScript expressions directly inside JSX using curly braces to render dynamic values, call functions, and drive conditional rendering and data-driven content in React components.

Explore conditional rendering in JSX by building a num picker that displays different messages or a GIF when the number is seven, using ternary operators, boolean &&, and precomputed variables.

Adopt a conventional React app layout by separating components into files, building an App component as the entry point, and rendering it into the DOM with proper script order.

Explore how props make React components configurable and reusable by passing data from a parent to a child. Use to and from props in a Hello component to personalize greetings.

Learn that props configure child components and are immutable; you can read them but cannot assign or update their values directly, and you will manage changes with state.

Learn how to pass diverse prop types in React, including numbers, booleans, arrays, and expressions using curly braces, and how to embed values like image sources as props.

Explore how pie chart components receive and pass props, including data, radius, colors, labels, and stroke, from the app to pie to individual slices.

Build a simple slot machine with three React components that accept props; display you win when all symbols match, otherwise you lose, using an app and a separate Machine file.

Build a slot machine in React by defining a machine component, wiring up props, using object destructuring, and computing a winner or loser to render dynamic emojis.

Map over arrays in JSX to render dynamic lists, converting data like messages or hobbies into bullets or child components.

Learn to set default values for props in React by defining a default props object, providing fallbacks for missing props like from and bangs, and overriding them when passed.

Explore styling React components with CSS as well as inline style objects, using className and camelCase properties. Implement dynamic styles with a conditional (ternary) to render winner or loser states.

Learn how Create React App, the official Facebook tool, accelerates React development by scaffolding a full project, enabling Babel-transpiled modern JavaScript, and streamlining testing and deployment from the command line.

Learn two main ways to install Create React App using npx or npm global install, ensure Node is installed and versions are checked, and start the app with npm start.

Create a new React app with create-react-app, inspect the project skeleton (node_modules, public, src), review package.json and readme, and prepare for running the server with webpack and live server.

Start the app with npm start to run on local host 3000, edit app.js, and rely on Create React App’s Webpack bundling and hot reloading.

Explore 2015 modules and learn import and export syntax, including default vs named exports, to share functions across files in a Create React App.

Create a React app and export fruits array from foods.js. Implement and export choice and remove in helpers.js, import them in index.js, then log a random fruit and update stock.

Learn to scaffold a React app, create modular foods and helpers, and implement export/import patterns with default exports, including functions to pick and remove random fruits.

Master Create React App conventions by placing each component in its own file, capitalized and matching file and component names, and exporting the default app from app.js.

Explore how Create React App handles css and assets, import css and svg images from the source folder, and apply component-scoped class names like house or dog to style elements.

Create a pokedex app rendering pokemon cards via props for name, image, type, and experience; build a pokey game that compares two hands by total experience and highlights the winner.

Create a React app and build a Pokey card component that uses props (id, name, type, XP) to render a pokemon card with image from the Pokey API and styling.

Create a Pokedex component in React, render eight pokey cards by mapping pokemon data from default props, and display id, name, type, and XP.

Style the pokedex cards with flexbox and css imports to lay them out cleanly. Add padding, margins, box shadows, and subtle borders, and center text for a polished look.

Replace basic images with fancier ones by padding Pokémon IDs to three digits and updating image URLs in the pokey card JS, using a pad two three function.

Build a pokie game component that randomly deals two pokemon hands, renders two pokey dex cards, and uses reduce to sum experience and determine a winner via is winner prop.

Style the pokedex component for the pokey game by conditionally applying winner and loser classes, centering with flexbox, and adding hover effects, transitions, and font tweaks.

Introduce React state as the engine of interactivity, and show how to model, initialize, and set state, triggering changes via events with a preview of React Developer Tools.

Explore how to use React Developer Tools to inspect a component tree, view props and future state changes, and debug without console.log, enabling smoother state management.

Explore the general concept of state, separating UI logic from business logic, and track how state changes update what users see, from modals to accordions and a chess board.

Learn how to initialize and manage state in a React class component by setting this.state in the constructor, using super props, and rendering state values such as score.

Learn about the alternate class properties syntax for initializing state in React components, its Babel dependency, and why the instructor favors the explicit constructor approach for beginners.

Learn why React components extend the base component, why you must call super in constructors, and when to pass props with super(props) to access this.props in the constructor.

Learn to update component state correctly using setState instead of direct assignment, understand its asynchronous nature and batched updates, and know that setState patches only specified keys and triggers re-renders.

Learn how to handle click events in React by wiring an onClick handler to update state. Practice proper this binding with constructor bindings and class properties to avoid undefined context.

Explore the alternate syntax for React class components, including class properties for state and methods with automatic binding, and compare constructor binding versus arrow function definitions.

Create a stateful component that shows a number starting at 1, updates with a random 1–10 on click, and reveals a win message when seven appears using set state.

learn to build a stateful React clicker that generates a random number one through ten, updates state on clicks, and conditionally displays a win message when seven.

Explore the state and props in React, including the stateful parent pattern that passes state down as props to stateless children, enabling downward data flow and re-render on change.

Build a two-dice rolling app in React using a parent roll dice component and two stateless die components, with props, state, random faces, and Font Awesome icons.

Create a die component in React by building a die.js class component, rendering Font Awesome dice faces via props, styling with CSS, and planning a parent component to manage state.

This lecture builds a stateful RollDice component that manages dice faces and a roll button, passing values to Die components. It covers state, props, default sides, and binding this.

Learn to style the roll dice component with a focus on the roll dice button, hover effects, and basic flexbox centering, setting up future animation in the next video.

Manage a rolling state in React to toggle the dice button, disable it during roll, and apply a wobble animation via CSS keyframes when rolling, using a rolling prop.

Learn to update state based on existing values using the set state callback, illustrated with a score counter. Grasp asynchronous updates, batching, and refactoring updates for arrays and objects.

Learn to update complex state safely by copying data structures, using map and the spread operator, maintaining immutability, then setting state.

Minimize your state by keeping only data that changes, deriving values when possible. Move static attributes like first name, last name, and birthday to props, and keep mood in state.

Learn to design state with downward data flow by centralizing state in a parent, then passing data as props to stateless children, keeping most components simple and predictable.

Design a reusable lottery component that centralizes state in the parent and uses downward data flow, rendering configurable numbers from 1 to a max and regenerating them on button click.

Build a lotto ball app in React by composing a lottery component and a ball component, using default props, a stateful numbers array, and a click to generate new numbers.

Implement a stateful lottery component with default props, render six empty balls, and generate random numbers on click by updating state with a copied array.

Create a coin flipper app that flips a coin randomly, tracks heads, tails, and total flips, and uses at least two components with downward data flow.

Build a React coin flipper with a stateful parent managing heads, tails, flips, and current coin, using a coin container and a simple coin component.

Practice state and set state with color boxes and props, exploring downward data flow. Load multiple colored boxes; click to change to a different color.

Implement color boxes with a stateful Box component that picks random colors from a default colors array via a choice helper, rendering 18 boxes in a flexbox container.

Explore commonly used React events, including mouse, keyboard, and copy events, and learn how to attach handlers with onClick, onMouseEnter, and onKeyUp. Understand binding strategies and event objects.

Explore method binding in React, compare binding in line, arrow functions, and binding in the constructor, and understand how this, props, and default props affect event handlers.

Explore the experimental public class fields syntax for binding in React class components, enabled by Babel and Create React App, and compare it to binding in the constructor.

Learn how to bind with arguments to pass a color into an event handler and update state to change the container background.

Learn how to pass functions down as props from a parent to child components to trigger state changes and re render, using bind in the constructor and child handlers.

Learn practical naming conventions for parent and child components in React, using handle and action pairs like handle remove, handle add, and handle update to keep code consistent.

Learn how to use unique keys when mapping lists in React, why keys identify changes, and why not to rely on array indices when data can change.