Mastering React Boot Camp (TT4195)

Hands-on React! Explore React Essentials, Best Practices, Forms, Redux, Flux, Routing, Hooks, Unit Testing, Rest & More

TT4195 / TTSREACT3

Introductory and Beyond

5 Days

Course Overview

Overview

React revolves around the creation of dynamic, interactive, and efficient web applications. By understanding the fundamental principles of React, you’ll be armed with the knowledge to craft visually appealing web interfaces and practical user experiences. This is perfect for developers eager to push their web development capabilities further and enhance their existing digital platforms or craft new web projects from scratch.

Geared for experienced web developers, our Mastering React Boot Camp is a five-day, comprehensive hands-on program that explores the latest features, skills and benefits React has to offer. Throughout the course you’ll learn the practical real-world, foundational and core React skills required to solve the usual challenges you might face when developing modern web applications.   The lab intensive course includes plenty of hands-on lab work designed to immerse you in the skills required to get you up and running with React right away. 

By the end of this course, you will have built diverse projects like a time-logging app, all while getting familiarized with React's state management, event handling, and various hooks. You’ll leave this course equipped with the skills to efficiently design and implement responsive web applications using React. You’ll also understand the importance and role of the Virtual DOM, and the nuances of JSX.  Above all, you'll be fully equipped with the confidence and skills required to efficiently design and implement responsive web applications using React.

 

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.

If your team requires different topics or tools, additional skills or custom approach, this course may be further adjusted to accommodate.  We offer additional full stack development, React, React Native, web development, design and security courses which may be blended with this course for a track that best suits your development objectives.

Course Objectives

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.

If your team requires different topics or tools, additional skills or custom approach, this course may be further adjusted to accommodate.  We offer additional full stack development, React, React Native, web development, design and security courses which may be blended with this course for a track that best suits your development objectives.

Course Prerequisites

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

Next Steps / Follow-on Courses: We offer a wide variety of follow-on courses for next-level web development, React, React Native, Full Stack and more. Please see our Modern Web Developer / Full Stack Courses & Learning Journey Paths for options based on your specific role and goals. 

Course Agenda

 

Course Topics / Agenda

Please note that this list of topics is based on our standard course offering, evolved from typical industry uses and trends. We will work with you to tune this course and level of coverage to target the skills you need most. Course agenda, topics and labs are subject to adjust during live delivery in response to student skill level, interests and participation.

  1. Your first React Web Application 
  • Setting up your development environment
  • JavaScript ES6 /ES7
  • Next.js Introduction
  • Getting started
  1. Functional Components
  • What’s a component?
  • Functional components - Motivation behind Hooks
  1. 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
  1. 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
  1. JSX
  • JSX Creates Elements
  • JSX Attribute Expressions
  • JSX Conditional Child Expressions
  • JSX Boolean Attributes
  • JSX Comments
  • JSX Spread Syntax
  • JSX Gotchas
  1. Forms
  • Forms 101
  • Text Input
  • Multiple fields
  • Validation
  1. Routing
  • What’s in a URL?
  • React Router’s core components
  • Building the components of react-router
  1. Advanced Component Configuration with context
  • Context - Provider/Consumer
  • useContext() Hook Example
  1. Unit Testing & Jest
  • Writing tests without a framework
  • What is Jest?
  • Using Jest
  • Testing strategies for React applications
  • React Testing Library
  1. Debugging React
  • Using React Developer Tools
  • Using Visual Studio Code
  • OPTIONAL - Using the Chrome Debugger
  1. React Custom Hooks
  • Writing and Using Custom Hooks
  1. REST
  • REST Basics
  • Using fetch
  • Using Axios
  1. 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
  1. 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 
  1. 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

  1. 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
  1. 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
  1. 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()

Course Materials

Setup Made Simple! Learning Experience Platform (LXP) 

All applicable course software, digital courseware files or course notes, labs, data sets and solutions, live coaching support channels, CodeCoach.AI anytime tutor access, and rich extended learning and post training resources are provided for you in our “easy access, single source, no install required” online Learning Experience Platform (LXP), remote lab and content environment. Access periods vary by course. We’ll collaborate with you to ensure your team is set up and ready to go well in advance of the class. Please inquire about set up details and options for your specific course of interest.

Raise the bar for advancing technology skills

Attend a Class!

Live scheduled classes are listed below or browse our full course catalog anytime

Special Offers

We regulary offer discounts for individuals, groups and corporate teams. Contact us

Custom Team Training

Check out custom training solutions planned around your unique needs and skills.

EveryCourse Extras

Exclusive materials, ongoing support and a free live course refresh with every class.

Attend a Course

Please see the current upcoming available open enrollment course dates posted below. Please feel free to Register Online below, or call 844-475-4559 toll free to connect with our Registrar for assistance. If you need additional date options, please contact us for scheduling.

Course Title Days Date Time Price
Mastering React Boot Camp (TT4195) 5 Days Apr 29 to May 3 10:00 AM to 06:00 PM EST $2,595.00 Enroll
Mastering React Boot Camp (TT4195) 5 Days Jun 10 to Jun 14 10:00 AM to 06:00 PM EST $2,595.00 Enroll
Mastering React Boot Camp (TT4195) 5 Days Aug 5 to Aug 9 10:00 AM to 06:00 PM EST $2,595.00 Enroll
Mastering React Boot Camp (TT4195) 5 Days Sep 30 to Oct 4 10:00 AM to 06:00 PM EST $2,595.00 Enroll
Mastering React Boot Camp (TT4195) 5 Days Nov 18 to Nov 22 10:00 AM to 06:00 PM EST $2,595.00 Enroll

Mix, Match & Master!
2FOR1: Two Courses, One Price!

Enroll in *any* two public courses (for 2023 *OR* 2024 dates!) by December 31, for one price!  Learn something new, or share the promo!

Click for Details & Additional Offers

Learn. Explore. Advance!

Extend your training investment! Recorded sessions, free re-sits and after course support included with Every Course
Trivera MiniCamps
Gain the skills you need with less time in the classroom with our short course, live-online hands-on events
Trivera QuickSkills: Free Courses and Webinars
Training on us! Keep your skills current with free live events, courses & webinars
Trivera AfterCourse: Coaching and Support
Expert level after-training support to help organizations put new training skills into practice on the job

The voices of our customers speak volumes

Special Offers
Limited Offer for most courses.

SAVE 50%

Learn More