Mastering React Boot Camp (TT4195)

Learning Objectives

Our engaging instructors and mentors are highly experienced practitioners who bring years of current "on-the-job" experience into every classroom. Working in a hands-on learning environment, guided by our expert team, you’ll learn how to:

• Design and Implement Interactive Web Applications: Harness the power of React's core principles to craft dynamic, user-centric web interfaces that respond efficiently to user interactions.
• Integrate Advanced React Features: Seamlessly incorporate advanced React functionalities such as state management, routing, and complex component structures into their projects, elevating the overall user experience of their applications.
• Craft Data-Driven Applications: Implement and manipulate Props to create applications that efficiently handle and present data, enhancing user interaction and information flow.
• Optimize Web Performance: Understand and leverage the benefits of the Virtual DOM, enabling faster rendering and efficient updates, resulting in smoother user experiences and reduced page load times.

Audience & Pre-Requisites

This fast-paced course is for intermediate skilled web developers new to React who are proficient in HTML5, CSS3 and JavaScript. This course is not for beginners.

Take Before: 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 – 3 days

Related Courses

The following is a small subset of related courses. We offer many additional courses and topics on modern web, mobile and full stack development. Please see the online catalog for a complete list of courses and learning paths.

• TT4002          Introduction to HTML5 / CSS3 - 2 days
• TT4003          Introduction to HTML5, CSS3 & JavaScript - 3 days
• TT4110          Introduction to Moden JavaScript – 3 days
• TT4165          Introduction to Angular Essentials - 3-day subset of this course
• TT4168          Mastering Angular Boot Camp - 5 days
• TT4190          Getting Started with React Essentials – 3 days
• TT4195          Mastering React Boot Camp |With Redux, Flux, Unit Testing, JSX & More – 5 days (TT4190 superset)
• TT4198          Introduction to React Native – 3 days
• TT4203          Introduction to GraphQL with React – 3 days
• TT4205          Advanced GraphQL in React – 3 days

1. Your first React Web Application 

• Setting up your development environment
• JavaScript ES6 /ES7
• Next.js Introduction
• Getting started

2. Functional Components

• What’s a component?
• Functional components - Motivation behind Hooks

3. Our first component

• Building the App
• Props - Making the App data-driven
• Events - Your app’s first interaction with useEffect() Hook
• State - Updating state with useState() Hook

4. JSX and the Virtual DOM

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

5. JSX

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

6. Forms

• Forms 101
• Text Input
• Multiple fields
• Validation

7. Routing

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

8. Advanced Component Configuration with context

• Context - Provider/Consumer
• useContext() Hook Example

9. Unit Testing & Jest

• Writing tests without a framework
• What is Jest?
• Using Jest
• Testing strategies for React applications
• React Testing Library

10. Debugging React

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

11. React Custom Hooks

• Writing and Using Custom Hooks

12. REST

• REST Basics
• Using fetch
• Using Axios

13. A larger Component React Application:

• 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

14. Flux and Redux Basics

• Why Flux?
• Flux is a Design Pattern
• Flux implementations
• 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 

15. Intermediate Redux

• Building the redux store
• Representing messages as objects in state
• Introducing chat threads for the chat application
• Adding the ThreadTabs component
• Supporting threads in the reducer
• Adding another action to the reducer 

Bonus Content / Time Permitting

16. 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

17. Using Vite:

• Using Vite to create the TypeScript React application
• Start it up and watch it run
• Unique features of Vite
• Why combine TypeScript and Vite?
• Benefits of using React with Vite
• Creating a Vite project
• Project structure
• Running the application
• Building a blog application
• Creating the blog data
• Creating a blog component
• Adding authentication with Okta to the application
• Performance comparison: CRA vs. Vite

18. Legacy Class Components:

• Class components
• Props – this.props vs props
• How Hooks Map to Component Classes
• Events – Class component lifecycle
• State – this.state object and this.setState()