Hands-On React. Build advanced React JS Frontend with expert

Explore TypeScript basics by compiling TypeScript to JavaScript, learning primitive types (number, boolean, string), interfaces and types, optional properties, and basic generics for React frontends.

Explore parametric types with generics, using type variables like T to create reusable functions and arrays, and implement a universal get-first pattern for any array in React apps.

Explore interfaces and types in TypeScript, learn how to merge interfaces, extend types with intersections, and build advanced user types using unions and generics for robust React frontend data modeling.

Explore how TypeScript utility types like read-only, required, partial, and record shape a basic user with permissions, using exclude and return type for flexible unions.

Explore typing and cell states in a minesweeper-style grid, defining empty, bomb, hidden, flag, and weak flag, and model a field as an array of arrays with coordinates.

Explore Create React App to quickly set up a modern web app with one command, using TypeScript templates and built-in scripts via react-scripts.

Explore JSX basics and component composition in React, including elements, props, and children. Learn to build header and link components with TypeScript typing and render them with React DOM.

Discover how JSX compiles to object calls and how babel transforms render divs and components, and explore the React 17 JSX transform's automatic runtime injection.

Explore how Ecma TC39 defines JavaScript through stage processing from strawperson to finished. See Babel as a JavaScript compiler that transpiles next-gen features with presets env, React, and TypeScript.

Set up webpack dev server to run, watch, and serve a React app with a public HTML template. Add style loader and URL loader for images to enable live reloading.

Explore jest, the delightful JavaScript testing framework, and compare test-driven development with traditional testing by installing jest, configuring TypeScript types, and writing simple mass functions tests.

Practice building a field generator in a React project using test-driven development. Create an empty field generator, implement a scalable field with density handling, and verify behavior with tests.

Continue building a field generator by implementing bomb placement based on probability, refactoring density to probability, validating with tests, and handling 2x2 and larger boards with random bomb positions.

Develop a random minefield generator using math.random to place bombs with 50% probability, test scenarios, and plan a neighbor-increment function to update surrounding cells.

Master a field generator in React by implementing increment neighbors, get neighbors items, and check item in field to update surrounding cells around bombs, with robust tests.

Discover how to debug your React frontend in VS Code with breakpoints, inspect variables, and manage tests by running all tests, watching all tests, or debugging a single file.

debugs a field generator with bombs, stepping through code with breakpoints, verifying bomb distribution, neighbor increments, and Jest tests in VS Code.

Master the styled-components API to build reusable components with template literal strings and rough strings. Use props, inheritance, and css prop to create dynamic UI with emotion.

Discover how to build a components library with Storybook on Webpack 5, using props, controls, and addons to document, preview, and interact with UI components like a button.

Learn to set up eslint and storybook, install and configure recommended storybook plugins, migrate to the new API, and enforce rules for reliable React components.

Refactor a React component to compose game name with a legend using a legend props interface, prop destructuring, and a top component for flexible Storybook documentation.

Learn how chromatic enables visual regression testing across browsers for your React components, using hermetic to build and publish storybooks, verify changes, and review or accept visual diffs.

Learn how a top container passes props to child components to build a Minesweeper UI, including a counter, timer, reset, and mapping string arrays to select options with unique keys.

Explore how useState powers dynamic data in a functional component by building a counter with initial state, a setter, and on click to increment or decrement, plus tests.

Apply useState to track mouse down and render a smile or astonished face, using onMouseDown, onMouseUp, onMouseLeave, plus a reset action to revert.

Learn to test a reset component in React with React Testing Library, rendering the component, querying text, and simulating click and mouse events to verify state changes and reset behavior.

Build a reusable React scoreboard displaying timer, levels, and mines, wired with props and a reset action, and master fragment based composition with an empty stack.

Build a grid cell component for a minesweeper-style game in React, implementing closed and empty frames, bomb-surrounding logic (0–8), bomb/hidden states, and hover brightness, with styled components and story setups.

Build and refine a cell component with empty, bomb, flag, weak flag, and digits, using a color mapper and revealed versus closed frames showcased in Storybook.

Explore how React handles events, focusing on mouse events and context menus, using the synthetic event system, preventDefault, and type-driven documentation to understand event properties across browsers.

Build and validate cell component tests that prevent default context menus, verify click and context menu handlers for active cells, and ensure full coverage across cell states.

Learn to share mouse down logic across reset and cell components with a custom hook useMouseDown, handling mouse down/up states, active cell behavior, and tests, plus storybook verification.

Explore how to debug custom hooks with useDebugValue by wiring a useMousedown hook, logging the mouse down state, and viewing serialized data in React DevTools.

Refactor the game field grid by removing is active checks, using a components map, and passing coordinates via on click and context menu, while building a responsive two-dimensional field grid.

Reviewing the Storybook components library, the lecture demonstrates presentational cells, counters, and top panel, including game name and legend, and outlines wiring logic with context, Redux, and redux-saga.

Analyze how to use the test coverage wrapper to collect coverage, review per-file statistics, and enforce global thresholds for reliable CI/CD in React projects.

Discover how the striker mutator mutates ts/tsx files to test quality and interpret mutation reports. See how configuration, running mutations, and refactoring raise the mutation score from 66% to 95%.

Explore snapshot testing in a React project by creating and validating visual and markdown snapshots, integrating Stryker mutation testing, and refining tests for components and grid behavior.

Learn to configure git hooks with husky to run npm test on pre-commit and pre-push, block failed commits, and prepare for continuous integration checks in a React workflow.

Deploy your app with AWS Amplify by connecting GitHub, selecting the master branch, and deploying with built in dist; enable previews, custom domains, password protection, and continuous delivery and integration.

Configure a GitHub Actions CI workflow to run tests, build, and Striker mutator checks with hermetic tokens, and enable branch protection with AWS Amplify deployment.

Configure a two-part GitHub Actions workflow for a React project, with automatic runs on pushes and pull requests and a manual dispatch for mutation testing.

Build a static version of a minesweeper game in React by composing presentational components, a wrapper, top panel, scoreboard, grid, and a game over screen with static data.

Implement dynamic game field logic in a React frontend, enabling open cell behavior, bomb handling, and recursive reveal of empty cells using test-driven development.

Create a dynamic minesweeper board using React hooks and useState, wiring game levels with settings and a field generator to regenerate the field on level change.

Explore how to simulate user actions with React Testing Library's user-event, compare it with fire-event, and verify input changes and searches through practical test cases.

Explore building and testing a React test player field generator, rendering the default 9x9 and validating level changes to 16x16 and 22x22 via user events and a level select.

Generate a minesweeper game field using hooks, implement an open cell handler with coordinates, and update the player field through state, resetting on level changes.

Debug a React game by leveraging useMemo to prevent unnecessary renders, configure webpack source maps, set breakpoints, and identify bugs through the debugger tool.

Mock the field generator and render the game field to test cell opening with default state. Click tests verify empty and non-empty cells across beginner, intermediate, and expert levels.

Test and implement reset logic for the game field by changing levels, regenerating the field with useState and useMemo, and validating cell opening and reset behavior through TDD.

Implement game over behavior in a react frontend with TDD: add is game over and is win states, show a pop-up on loss, and reset the field to default.

Build a custom React hook useGame to encapsulate game logic and separate it from the UI. Test hook behavior with renderHook and act, covering level changes and click interactions.

Refines the Striker test suite by fixing the use game hook, ensuring correct game field behavior on reset and click, and preventing mock mutations for fast, reliable snapshots and coverage.

Develop and test the set flag action in a React minesweeper frontend, refactoring open cell logic, and implementing three-state flag handling (empty, flag, weak flag) via the game hook.

Build a solved puzzle detector that counts bombs, flags, hidden cells, and discovered bombs across game and player fields to determine a win state, validated by test cases.

Refactor the open cell and set flock logic to call detect solved puzzle and return the updated player field, solved status, and flag counter for win detection.

Add a test case for the win state by iterating the game field, flagging bombs via context menu, opening non-bomb cells, and validating game over and win statuses.

Explore how the useEffect hook handles side effects by updating the document title and managing a document click listener, with dependencies, empty, or no array, plus cleanup on unmount.

Learn to implement a timer in React using useEffect, setInterval, and time state that starts on cell click or flag, stops on game over, and resets with a button.

Learn to fix the game timer by using setTimeout instead of setInterval inside useEffect. Observe dependency updates and rely on clearInterval for resource cleanup to ensure reliable time updates.

Implement a bomb counter and enforce a flag limit in a react game by updating the setFlag signature and hook logic, with tests validating the behavior.

During the refactoring session, the team runs tests with striker, generates a mutation report, and refines hidden cell, flag, and puzzle solved logic using the use game hook and snapshots.

Refactors and test reports improve React game tests, focusing on on-click flow, win conditions, reset and game-over handling, useEffect, and timer behavior with fake timers, achieving strong mutation coverage.

Rename the helpers to core and refactor hooks to centralize time management with a dedicated use time hook, then split use game and validate changes with tests and fake timers.

Refactor use game hook with a finite state machine driven by use status, exposing is game started, is win, is game over, and setters for new, in progress, win, lose.

Explore how to use the React developer tools and the RDT profiler to diagnose and reduce rerenders with React.memo and useCallback, optimizing top components and a scoreboard timer.

Optimize rendering in a grid-based game by applying React.memo and useCallback to stabilize callbacks, memoize the grid and cell components, and prevent redundant rerenders during reset and level changes.

Learn to use Stryker to disable specific mutations with global and per-line disables, including disable next line comments, to tailor mutation testing and improve report results.