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:

• Build Interactive and Responsive Web Applications: You will gain hands-on experience creating dynamic, modern web apps using React and industry-standard libraries like Material UI, ensuring your applications are engaging and user-friendly.
• Master Core React Concepts and Modern Hooks: You will confidently implement React components with essential hooks such as useState, useEffect, and useContext, leveraging functional programming to write cleaner and more efficient code.
• Implement Advanced State Management and Routing: You will learn to manage complex application states using Redux and Context API, and implement dynamic routing with React Router to enable seamless navigation within your apps.
• Integrate APIs and Data Handling: You will become proficient in consuming RESTful APIs using fetch and axios, handling asynchronous operations and managing data flow between your client-side and server-side applications.
• Test and Debug Your React Applications: You will develop robust testing strategies with Vitest and JEST, using proven techniques to debug and troubleshoot common issues with tools like React Developer Tools and Chrome Debugger.
• Optimize Performance and Code Efficiency: You will learn to implement performance optimizations such as code splitting, lazy loading, and server-side rendering (SSR) to deliver fast, scalable applications that enhance user experience.

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.

The ideal audience for this boot camp includes front-end developers, full-stack developers, and software engineers looking to deepen their React skills and build high-performance web applications.

Attendees should have incoming hands-on experience working with JavaScript, HTML, and CSS, along with some experience building simple web apps or working with front-end frameworks. Ideal roles include Web Developers, UI/UX Engineers, and Full-Stack Developers who want to master modern React practices and implement real-world projects.

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

• Creating a new React project with Vite
• Understanding the project structure
• Installing necessary dependencies

2. Functional Components

• What is a component?
• Class components
• Functional components - Motivation behind Hooks
• Our first component
• Building the App
• Props - Making the App data-driven
• Events - Your applications first interaction with the useEffect() Hook
• State - Updating state with the useState() Hook
• Implementing Material UI and other third-party libraries

3. 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
• useState() Hook Example

4. JSX

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

5. Essential React Hooks

• useState
• useEffect
• useContext

6. Forms

• Forms 101
• Text Input
• Multiple fields
• Validation
• Creating reusable form components
• Controlled vs. uncontrolled components

7. Routing

• What is in a URL?
• Navigating and routing in a React application
• Defining routes and rendering components based on URL
• Dynamic routing and parameters
• React Router core components
• Building the components of react-router
• Outlet component
• Router Hooks: useNavigate, useLocation, useParams

8. Unit Testing

• Vitest
• Testing components
• Testing strategies for React applications
• JEST

9. Debugging React

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

10. REST

• REST Basics
• Using fetch
• Handling responses and errors
• Using axios

11. 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
• Modules
• Classes

12. Advanced React Hooks

• useReducer
• useMemo
• useCallback
• useRef

13. Custom Hooks

• Custom Hook rules
• Creating reusable hooks
• Common examples of custom Hooks

14. Third-party Hooks

• React Hook Form
• Formik
• Hooks for routing and navigation

15. Code Optimization

• Minifying and concatenating code
• Code splitting
• Lazy load
• Lazy loading components
• Using Suspense

16. Optional: TypeScript

• Type safety in React Components
• TypeScript in JSX (TSX)

17. Authentication and React

• Authentication with Okta and Auth0
• JWT and React

18. React and Server-side Rendering (SSR)

• Benefits of SSR (SEO, performance)
• Setting up a server
• Rendering React components on the server
• Hydrating the client-side

19. Optional/time-permitting: Overview of React Frameworks

• Next.js
• SSR
• Static-site Generation (SSG)
• Built-in data fetching
• File system routing
• Automatic code-splitting
• API routes
• Automatic image optimization

20. Optional/time-permitting: Overview of Redux

• Single Source of Truth
• Core concepts: State, Actions, Reducers, Store
• Workflow