Explore a CodeSandbox starter project with an html file and assets, where you output content in the console to refresh your JavaScript knowledge for building React apps.

Explore how JavaScript runs in the browser and beyond, and how to add code to web pages using external scripts, defer, and modules with import/export, within React projects.

Understand how React projects rely on a build process to transform JSX into browser-ready code, inject script tags, and optimize output for production using tools like React Scripts and NodeJS.

Explore import and export syntax in JavaScript and React, including named and default exports, and how to import from util.js into app.js using relative paths and aliases.

Revisit core JavaScript concepts like variables, values, and operators, and learn to create and store strings, numbers, booleans, null, undefined, and objects using let and const.

Explore how plus, minus, times, and division perform math and concatenate strings, and use the triple equals operator and other comparison operators for conditional logic with if statements.

Define and call functions in JavaScript using the function keyword or arrow syntax, explore parameters, defaults, and returns, and learn to reuse code across React projects.

Learn how arrow functions define anonymous functions in React, compare them with traditional function syntax, and use them for on-click handlers while recognizing both approaches.

Explore how JavaScript objects group values into key-value pairs, access data with dot notation, and implement methods with this and class blueprints using constructors and new.

Learn how arrays work in JavaScript—created with square brackets, indexed from zero, and transformed by map to new arrays, with push and findIndex for updates and lookups.

Master destructuring of arrays and objects to pull values by position or name, using array brackets and object curly braces, and aliasing with colon.

Explore the JavaScript spread operator, using three dots to merge arrays without nesting and to combine objects by spreading properties, enabling seamless addition of values and keys.

Explore control structures such as if statements with else and else if, and for loops like for of to iterate over arrays.

Explore why this course avoids manual DOM manipulation and shows how React handles DOM updates declaratively, so you read and change the UI through React rather than querySelector.

Learn to pass functions as values to other functions using setTimeout. Explore anonymous and named functions, arrow functions, and why you omit parentheses to delay execution.

Define functions inside other functions and observe scoping; call a nested greet inside init, while greet remains inaccessible outside, a pattern you'll use in React code.

distinguish primitive values from reference values in JavaScript, showing how strings and numbers create new values on manipulation while objects and arrays mutate via their memory address.

Explore essential React concepts like components, JSX, props, and state while building a demo web app with static and dynamic content.

Learn how components act as reusable building blocks that wrap HTML, CSS, and JavaScript to define parts of the user interface, enabling code reuse and simpler maintenance.

Set up the starting React project by running npm install and npm run dev to launch the development server for live previews, using CodeSandbox or a local setup.

Create your first React component as a JavaScript function with an uppercase name that returns JSX. Learn how JSX describes UI and how the dev server transforms it for browsers.

Create and reuse your own React components by turning header markup into a separate function component named with an uppercase letter, then render it in the app with JSX.

Explore how React renders a component tree from the index.html root by booting with index.jsx, rendering App through createRoot and render, and distinguishing custom components (uppercase) from built-in elements (lowercase).

Learn to output dynamic content in a header component with curly braces in JSX, randomly selecting between fundamental, crucial, and core concepts using a helper to generate a random index.

Learn to load images in React with dynamic values using curly braces, via import statements and relative paths for robust deployment and bundling optimization.

Learn how to build reusable components with props in React by passing data like title, description, and image to a core concept component and render multiple instances.

Explore alternative props syntaxes in React by importing core concepts from data.js, then dynamically render core concepts with props or the spread operator, and use object destructuring to reduce code.

Structure your React project by moving components into separate files under a src/components folder. Export and import Header and CoreConcept, adjust paths for maintainability.

Split styles into component-specific css files and import them in each component, noting the rules are not scoped and may affect headers; organize with a header subfolder and update imports.

Explore component composition in React by using the special children prop to wrap content inside a tab button component, and compare using children with passing a label prop.

Learn to handle click events in React with the onClick prop, passing a function as a value and avoiding imperative DOM manipulation.

Pass a function as a prop to a custom TapButton, forward it to the onClick handler, and update dynamic content in the app based on the selected button.

Master how to pass custom arguments to React event handlers by using arrow functions, enabling selection-based content updates with identifiers like components, JSX, props, or state.

Learn why updating a plain variable won't re-render in React, and discover how state drives component re-renders to update the UI when tabs are selected.

Learn how to manage component state in React using the useState hook to update the user interface and cause the component to re-execute, enabling interactive, dynamic interfaces.

Leverage the state feature to render dynamic content from the examples constant, outputting a title, description, and code for the selected topic.

Master conditional rendering in React by showing a fallback message until a topic is selected, and render content with ternary expressions, the logical and operator, or a tabContent variable.

Apply dynamic styling to tabs by passing an isSelected boolean and using a dynamic className, giving the active tab visual feedback in the App and TabButton components.

Learn how to render lists dynamically in react by transforming an array of data with map into jsx, and assign unique keys to each item to avoid warnings.

Build an interactive React demo to master components, props, jsx, and the children prop; manage state with useState, handle events, render conditional content, and map data to jsx with keys.

Explore essential React concepts in depth, including JSX alternatives, components and state, patterns for structuring projects, and best practices, then explore a tic-tac-toe project to study advanced state usage.

Explore how JSX relates to HTML in JavaScript, learn that React can work without JSX using createElement, and compare JSX with the non-JSX approach that avoids a build process.

Learn how to manage JSX return values by using a single parent wrapper, explore the role of fragments and empty tags, and avoid unnecessary divs in React components.

Split the app component into smaller sub components to separate responsibilities and improve state management, illustrated by how topic selection updates the header and core concept data.

Split the big app into feature-based components, create core concepts and examples components, and centralize state management using useState to keep the app lean.

Build a reusable section component that renders a title and content via props and children, and use forwarded or proxy props to inner elements to preserve styling.

Learn how to forward props to wrapped elements using the rest and spread operators, creating flexible wrapper components like Section and TabButton by forwarding remaining props to built-in elements.

Explore building a reusable tabs component in React that forwards props and introduces multiple slots, using children for content and a custom buttons prop for tab controls.

Make the tabs component flexible by using a buttonsContainer prop to wrap buttons with a dynamic container, and distinguish built-ins from custom components using strings or capitalized identifiers.

Learn how to set default prop values in a Tabs component by using destructuring with defaults, so the Tabs wrapper uses a built-in menu element when ButtonsContainer is unset.

Advance your React skills by building a tic-tac-toe game, deepening understanding of components, props, JSX, state management, list rendering, deriving state, and patterns, with local or CodeSandbox setup.

Place static header markup in index.html above the React app and reference public assets by name, illustrating that not all content must go into components when building tic-tac-toe.

Set up the tic-tac-toe UI in React by adding a players area with names and symbols, a game container, game board and log, and enable dynamic editing of player names.

Learn to avoid repeating markup by creating a reusable Player component, pass data via props, and refactor App.jsx to import and render the component.

Learn to build in‑place name editing by toggling an input field with React useState, an edit button, and conditional rendering that updates the user interface when changes occur.

Explore how React creates isolated instances for each use of the same player component, so edits in one instance don’t affect others and enable safe, reusable components.

Toggle isEditing to switch between edit and save, render a dynamic button caption, and pre-populate the input with the current name from props.

Update state based on the previous value in React by passing a function to the updater, such as setIsEditing. This practice ensures the latest state is used for reliable toggling.

Learn how to implement two-way binding in React by switching from value to editable state, handling onChange events, and saving updated player names with useState.

Render a dynamic tic-tac-toe board with a GameBoard component that outputs a three-by-three grid of clickable buttons, populated with X or O from initialGameBoard using map.

Update a game board state immutably with useState, handling button clicks via handleSelectSquare, and copy nested arrays with spread and map to render Xs and Os.

Lift the state up in the app component to manage the active player, pass it to the Player and GameBoard components, and highlight the active player while handling square selections.

Lift state up to the app component by managing an array of game turns with useState, creating a log component, and derive log and board state from one source.

Lift the game state to the App component and update turns immutably using onSelectSquare; store turns as objects with row, col, and player, deriving currentPlayer from the latest turn.

Derive the gameboard from the turns state by passing a turns prop to the Gameboard and computing a multi-dimensional board through destructuring and mapping, illustrating derived state in React.

Share state across components by passing gameTurns from App to the Log component, mapping turns to log items showing the player and row and col coordinates.

Learn to reduce state in a React app by deriving active player from gameTurns instead of storing it as separate state, use a helper deriveActivePlayer, and eliminate code duplication.

Learn to disable game buttons after selection in React by using the disabled prop and a dynamic check of the player symbol (X or O) to prevent multiple clicks.

Outsource the winning data by creating a separate winning combinations file and importing it from winningcombinations.js to check all possible winning lines on every turn.

Derive the winner from gameTurns and lift the computing logic from the gameBoard into the app component, checking all winning combinations after each turn.

Deriving computed values from other computed values, this lecture demonstrates traversing a game board to extract symbols from winning combinations. It determines a winner and displays a 'you won' message.

Create a GameOver component that shows the winner or a draw and a restart button, shown when there is a winner or when hasDraw detects nine turns and no winner.

Explore immutability in practice by using a single source of truth for gameTurns, implementing rematch logic, and applying a deep copy of the game board for reliable restarts.

Learn how to manage player names in a tic-tac-toe app without lifting state up, using useState to store an X–O map in app state and updating on save.

Learn how to pass a name change handler through components, trigger updates when editing, and derive the winner’s name from dynamic property access in React.

Refactor the app by extracting winner and board logic into separate helper functions. Use a players constant for X and O and rename the initial board to uppercase underscores.

Practice React essentials by building an investment calculator web app, focusing on components, state, list and conditional rendering, using a starter project with calculateInvestmentResults and a currency formatter.

Build a header component in React by exporting header.jsx, importing the investment-calculator.png from assets, and rendering an image and title in the app component, styled via the header id.

Add a dedicated React user input component in the investment calculator app to collect four numeric fields—initial investment, annual investment, expected return, and duration—with two-way binding.

Use useState to manage a single state object for initialInvestment, annualInvestment, expectedReturn, and duration. Implement a handleChange with onChange to enable two-way binding and update values via the value prop.

Lift the user input state up to the app component and share it with a dedicated results component, then calculate investment results with the provided function for display.

Derive investment results from user input by importing a calculate investment results function and coercing input values to numbers to prevent string concatenation, then output a yearly results table.

Output a dynamic React table with five columns (year, investment value, interest earned, total interest earned, invested capital), rendering rows from a results array and formatting numbers.

Validate user input to prevent crashes by enforcing duration greater than zero, render results conditionally, and show a fallback message like please enter a duration greater than 0.

Explore styling React components with vanilla CSS, CSS modules, styled components, and Tailwind, including static, dynamic, and conditional styles. Initialize the project with npm install and npm run dev.

Explore splitting CSS into multiple files in a React app, import CSS into JavaScript with Vite, and place header styles in header.css alongside its component.

Learn how vanilla CSS can be imported into JSX files to style React apps, enabling decoupled collaboration and direct CSS control, while noting potential scoping issues and style clashes.

Vanilla CSS styles are not scoped to components, so header and paragraph rules bleed across components when importing a CSS file, and Vite injects styles into the head globally.

Learn how inline styles in React apply CSS directly to JSX elements using the style prop, passed as an object with camelCase keys for dynamic, component-scoped styling.

Demonstrate dynamic and conditional inline styling for auth inputs by using the emailNotValid condition to apply a red background, and compare inline styles with class names and vanilla CSS.

Switch from inline styles to class-based styling with standalone CSS files, and learn to conditionally apply classes using a ternary expression and template literals to merge always-applied and conditional classes.

Learn how CSS modules scope styles to components by transforming class names via the build tool, enabling header.module.css usage with a generated object of unique class names.

Learn how styled components replace separate CSS files with CSS-in-JS in React, installing and importing styled from styled-components, and creating reusable styled elements via tagged template literals.

Explore building flexible React components with styled components, mixing styling approaches, creating labeled inputs, forwarding props, and maintaining validation and onChange behavior in forms.

Learn to build reusable wrappers with styled components and apply prop-driven dynamic styling for conditional states. Use the $invalid prop and injection syntax to adjust label and input colors.

Discover how to implement media queries, pseudo selectors like hover, and nested rules with styled components, including ampersand usage, by transforming header and button elements into styled components.

Explore building reusable React UI elements by refactoring into Button and Input components, and creating a CustomInput to combine label and input, using styled-components for scoped styling.

Explore tailwind css as a utility-first framework for styling react apps, install and configure it, and apply tailwind classes to build responsive layouts and typography quickly.

Learn to customize Tailwind CSS in a React project by extending the font-family with a Google font, adding a background, and applying utility classes efficiently.

Explore how Tailwind CSS handles responsive design with media query prefixes (like md:) and how to apply hover and other states using pseudo selectors, customizing buttons with utility classes.

Master dynamic and conditional styling with tailwind by implementing input and label class strings that adapt to invalid states, using base classes and conditional concatenation.

Finish migrating the demo app to Tailwind CSS by updating the auth inputs with Tailwind CSS utilities, including max-w-sm, p-8, rounded, shadow-md, and a gradient from stone-700 to stone-800.

Explore Tailwind CSS pros and cons, including long class lists, React compatibility through reusable input components, rapid styling with utility classes, and trade-offs like JSX edits and wrapper components.

Master debugging React apps by interpreting error messages, diagnosing logical errors with browser developer tools and debugger, and installing and using React Strict Mode and DevTools for efficient troubleshooting.

Explore a tweaked investment calculator with small bugs, using the attached starting project to practice finding and fixing mistakes in a simple React app that manages state and derives values.

Learn to read React error messages and follow the stack trace to locate an undefined value, then add a guard to handle empty results without crashing.

Use the browser debugger and breakpoints to locate logical errors in React code, inspecting values in the sources tab and converting inputs to numbers to prevent string arithmetic errors.

Explore how React's StrictMode surfaces errors by double-invoking components in development and wrapping the app to catch issues like duplicate keys in lists.

Explore the React DevTools browser extension to inspect your app's component tree, view props and state via hooks, and edit values to see immediate UI changes.

Explore refs and portals in React, using refs for direct DOM access and non-state values, exposing component APIs, and building a timer-based demo game to apply these features.

Explains two-way binding in React, using useState to capture input, reflect it in the field, and conditionally display a welcome message after submission, illustrating state management and ref simplification.

Use useRef to connect an input to a ref, access its current value on demand, and update state on click for leaner components without on-change handlers.

Explore how to manipulate the document object model with refs in React by clearing an input and recognizing when to prefer declarative state over imperative document object model updates.

Explore the difference between refs and state in React, showing when to use state for UI updates and when refs provide direct DOM access without re-renders.

Introduce a reusable timer challenge component in a React app to create four timers (easy, not easy, getting tough, pros only) with start/stop controls and run-state feedback.

Use setTimeout to run a timer in JavaScript, track timerStarted and timerExpired with useState, and update the UI to reflect running or inactive states.

Discover how to manage a timer with refs in React, using timer.current to store setTimeout pointers per component instance and avoid cross-instance interference across re-renders.

Learn to add a ResultModal for the timer challenge using the native dialog element, showing the target time and outcome with an open attribute.

Forward a dialog ref from TimerChallenge to the ResultModal dialog via a ref prop. In older React versions, wrap with forwardRef to receive the ref; newer versions allow ref props.

Use forwardRef with useImperativeHandle to expose an open method on a ResultModal, detaching the dialog from external components and improving stability and reusability.

Demonstrate using refs and state in a React timer by replacing setTimeout with setInterval to track time remaining, clearing the interval on stop or expiry, and showing a result modal.

Pass the remaining time as a prop to the result modal, compute user lost on expiry, format remaining time, and wire reset and on-submit to restart and show a score.

Calculate a 0–100 score in result modal by dividing remaining time (milliseconds) by target time (seconds) after multiplying target time by 1000, then rounding and displaying your score across challenges.

Learn how portals move JSX out of its original location using React DOM's createPortal to render a modal in a separate DOM node, improving accessibility and avoiding deep nesting.

Practice building a React project management app that lets you create projects, add tasks, view projects, and delete or clear tasks. Use components, state, refs, portals, and Tailwind CSS styling.

Create a ProjectsSidebar component in a new components folder, wrap content in an aside with 'your projects' and an 'add project' button, and integrate it into the app.

Style the app’s sidebar and button with Tailwind CSS utilities, applying h-screen, my-8, w-1/3 md:w-72, px-8, py-16, bg-stone-900, text-stone-50, rounded-r-xl, and hover effects to enable opening a project detail screen.

Build a NewProject component with a reusable Input that renders an input or textarea via a textarea prop, labeled Title, Description, and Due Date, plus Cancel and Save buttons.

Style buttons and inputs with Tailwind CSS, applying custom values, flexbox layouts, hover and focus states, and reusable class strings to ensure consistent, polished components.

Split jsx and tailwind styles by creating a NoProjectSelected component with fallback content and a Button, and use props spreading for conditional rendering between no project and new project states.

Use the useState hook in the App component to conditionally render either the no project selected or new project components based on selectedProjectId, enabling adding new projects.

Collects user inputs with refs in a React app, validates on save, and lifts state to add a new project that appears in the sidebar, using forwardRef for custom inputs.

Learn to handle project creation and update user interface by resetting selected project id to undefined to return to the fallback screen, and render project list in the sidebar.

Validate inputs and show an error modal when fields are empty; implement a reusable portal modal with forwardRef and useImperativeHandle exposed as an open method.

Style the modal with tailwind css, including a backdrop with bg-stone-900/90, padding, rounded corners, and shadow. Connect cancel behavior and onCancel props to close or reset the modal.

Implement a Selected Project component and wire it through the project sidebar to display the selected project's header, formatted date, and description, highlight the active project, and enable deletion.

Implement a handleDeleteProject function in the app component to remove a selected project immutably using filter, update selectedProjectID to undefined, and pass the onDelete prop to the selected project component.

Build a tasks feature for a project by creating a tasks component with an input to add tasks and a Tailwind CSS styled conditional list showing tasks or no-tasks message.

Learn to manage tasks in a React app by capturing input with useState, wiring two-way binding, and forwarding add and delete task handlers through components to illustrate prop drilling.

Learn to delete tasks by wiring handleDeleteTask through SelectedProject to the tasks component, enabling the clear button to pass the task ID and fix the useState initial value and validation.

Explore advanced state management in React, tackle prop drilling, and learn solutions through component composition, the context API, and reducers with useReducer.

Explore the prop drilling problem in a multi-component react app, where the app holds cart state and passes data through props to header, shop, and cart modal.

Explore how component composition helps reduce prop drilling by lifting product rendering to the app component, using wrappers and the children prop, while weighing trade-offs.

Learn how React's context API eliminates prop drilling by providing a shared context value connected to state, wrapping components to let them access and update state directly.

Create a shopping cart context with React's createContext and export CartContext in a store/shopping-cart-context.jsx file. Wrap header and shop with CartContext.Provider to share items and provide context to components.

Link the context value to state by exposing shopping cart items and an addItemToCart function through context. Use useContext to share and update cart state across components, avoiding prop drilling.

Compare useContext with the legacy Consumer approach for accessing context in React, explore how a context value flows through a provider, and learn why useContext is the modern, default method.

React re-executes a component when its consumed context value changes, ensuring the UI updates. This happens via the useContext hook.

Migrate the demo project to the context API by removing props and wiring cart data via CartContext, enabling header and cart components to access items and update quantities with useContext.

Move cart state management into a dedicated cart context provider to share data across components, keeping the app component lean and ready for multiple contexts.

Dispatch actions with useReducer to update the shopping cart state, handling add_item and update_item via a reducer that uses payload for item data and shares state through context.