Mastering React Web Developer Boot Camp

Mastering React is a comprehensive hands-on course that aims to be the single most useful resource on getting up to speed quickly with React. Geared for more experienced web developers new to React,...

Read More
$2,495 USD
Course Code TT4195
Duration 5 days
Available Formats Classroom, Virtual
7368 Reviews star_rate star_rate star_rate star_rate star_half
Course Image

Mastering React is a comprehensive hands-on course that aims to be the single most useful resource on getting up to speed quickly with React. Geared for more experienced web developers new to React, this course provides students with the core knowledge and hands-on skills they require to build reliable, powerful React apps. After the first few modules, you’ll have a solid understanding of React’s fundamentals and will be able to build a wide array of rich, interactive web apps with the framework. The first module is an introduction to the new functionality in ECMAScript 6 (JavaScript). Client-side routing between pages, managing complex state, and heavy API interaction at scale are also covered. This course consists of two parts. In the first part of the course students will explore all the fundamentals with a progressive, example-driven approach. You’ll create your first apps, learn how to write components, start handling user interaction, and manage rich forms. We end the first part by exploring the inner workings of Create React App (Facebook’s tool for running React apps), writing automated unit tests, and building a multi-page app that uses client-side routing. The latter part of the course moves into more advanced concepts that you’ll see used in large, production applications. These concepts explore strategies for data architecture, transport, and management:

  • Redux is a state management paradigm based on the Flux architecture. Redux provides a structure for large state trees and allows you to decouple user interaction in your app from state changes.
  • Hooks is the powerful, new way to maintain state and properties with functional components and the future of React according to Facebook.

Skills Gained

Working in a hands-on learning environment, guided by our expert team, attendees will learn about and explore:

  • A comprehensive understanding of core React components
  • An advanced, in-depth knowledge of how React works
  • A complete understanding of using Redux
  • How to build, validate, and populate interactive forms
  • How to use inline styles for perfect looking components
  • How to test React components
  • How to build and use components
  • A deep understanding of data-driven modeling with props and state
  • How to use client-side routing for pages in your apps
  • How to debug a React application

Who Can Benefit

This fast-paced course is for intermediate skilled web developers new to React who have prior experienced working HTML5, CSS3 and JavaScript.


Attendees should have experience with the topics in the following courses, or should have recently attended these as a pre-requisite:

  • TT4003: Introduction to HTML5 / CSS3 & JavaScript Essentials

Course Details

Course Agenda

ES6 Primer

  • Prefer const and let over var
  • Arrow functions
  • Modules
  • Object.assign()
  • Template literals
  • The spread operator and Rest parameters
  • Enhanced object literals
  • Default arguments
  • Destructuring assignments

Your first React Web Application (Overview)

  • Setting up your development environment
  • JavaScript ES6 /ES7
  • Getting started

Using Webpack with Create React App

  • JavaScript modules
  • Create React App
  • Exploring Create React App
  • Webpack basics
  • Making modifications
  • Hot reloading; Auto-reloading
  • Creating a production build
  • Ejecting

Class and Functional Components

  • What’s a component?
  • Class components
  • Functional components - Motivation behind Hooks
  • How Hooks Map to Component Classes
  • Our first component
  • Building the App
  • Props - Making the App data-driven
  • Props – this.props vs props
  • Events - Your app’s first interaction
  • useEffect() Hook Example
  • State - Updating state
  • useState() Hook Example

JSX and the Virtual DOM (Overview)

  • React Uses a Virtual DOM
  • Why Not Modify the Actual DOM?
  • What is a Virtual DOM?
  • Virtual DOM Pieces
  • ReactElement


  • JSX Creates Elements
  • JSX Attribute Expressions
  • JSX Conditional Child Expressions
  • JSX Boolean Attributes
  • JSX Comments
  • JSX Spread Syntax
  • JSX Gotchas


  • Forms 101
  • Text Input
  • Multiple fields
  • Validation


  • What’s in a URL?
  • React Router’s core components
  • Building the components of react-router

Unit Testing & Jest

  • Writing tests without a framework
  • What is Jest?
  • Using Jest
  • Testing strategies for React applications
  • Testing a basic React component with Enzyme

Components – with both class and functional examples

  • A time-logging app
  • Getting started
  • Breaking the app into components
  • The steps for building React apps from scratch
  • Step 2: Build a static version of the app
  • Step 3: Determine what should be stateful
  • Step 4: Determine in which component each piece of state should live
  • Step 5: Hard-code initial states
  • Step 6: Add inverse data flow
  • Updating timers
  • Deleting timers
  • Adding timing functionality
  • Add start and stop functionality
  • Methodology review

Advanced Component Configuration with props, state, and children (Overview)

  • PropTypes
  • Context
  • useContext() Hook Example
  • More on state
  • Talking to Children Components with props.children

Flux and Redux Basics

  • Why Flux?
  • Flux is a Design Pattern
  • Flux implementations
  • Redux & Redux’s key ideas
  • Building a counter
  • The core of Redux
  • The beginnings of a chat app
  • Building the reducer()
  • Subscribing to the store
  • Connecting Redux to React

Intermediate Redux

  • Using createStore() from the redux library
  • Representing messages as objects in state
  • Introducing threads
  • Adding the ThreadTabs component
  • Supporting threads in the reducer
  • Adding the action OPEN_THREAD

BONUS CONTENT / Time permitting

Debugging React

  • Using React Developer Tools
  • Using Visual Studio Code
  • OPTIONAL - Using the Chrome F12 Debugger

React Hooks

  • Using Custom Hooks


  • REST Basics
  • Using fetch
  • Using axios