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.

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.

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

2. Functional Components

• What is 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 is 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()