Mastering React Boot Camp (TT4195)

Course Objectives

Learning Objectives

The course is rich with hands-on activities, challenge labs, knowledge checks, valuable discussions and focused projects.  Working in a hands-on learning environment, guided by our expert team, attendees will learn about and explore:

• React's core principles to craft dynamic, user-centric web interfaces that respond efficiently to user interactions.
• How to tools like Vite and Vitest to streamline the development process, optimize application performance, and conduct comprehensive testing to ensure application robustness.
• How to 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.
• How to implement and manipulate Props to create applications that efficiently handle and present data, enhancing user interaction and information flow.
• How to integrate secure authentication solutions, like Okta, ensuring user data protection and tailored user experiences within their applications.
• Leveraging 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

Course Agenda

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

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

3.    JSX

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

4.    Using Vite

• Using Vite to create the TypeScript React application
• Start it up and watch it run
• Adding authentication with Okta to the application
• 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
• Performance comparison: CRA vs. Vite

5.    Forms

• Forms 101
• Text Input
• Multiple fields
• Validation

6.    Routing

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

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

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

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

9.    Using Vitest

• What Is Vitest?
• Requirements
• Project Setup
• Installing & Configure Vitest
• Writing Our First Test
• Adding React Support
• Testing Events
• Extending Vitest With Jest Dom
• Vitest with React Testing Library

10.  Debugging React

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

11.  React Hooks

• Writing and Using Custom Hooks

12.  REST

• REST Basics
• Using fetch
• Using axios

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