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’s a component?
- Class components
- Functional components - Motivation behind Hooks
- Our first component
- Building the App
- Props - Making the App data-driven
- Events - Your app’s first interaction with the useEffect() Hook
- State - Updating state with the useState() Hook
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
4.JSX
- JSX Creates Elements
- JSX Attribute Expressions
- JSX Conditional Child Expressions
- JSX Boolean Attributes
- JSX Comments
- JSX Spread Syntax
- JSX Gotchas
- Enhance Component with TailwindCSS, Material UI, styled-components
5.Essential React Hooks
- useState
- useEffect
- useContext
6.Forms
- Forms 101
- Text Input
- Multiple fields
- Validation
- Creating reusable form components
- Controlled vs. uncontrolled components
- React Hook Form
- Formik
- Zod and Yup for Validation
7.Routing
- What’s in a URL?
- Navigating and routing in a React application
- Defining routes and rendering components based on URL
- Dynamic routing and parameters
- React Router’s core components
- Building the components of react-router
- Outlet component
- Router Hooks: useNavigate, useLocation, useParams
8. Unit Testing
- Vitest + React Testing Library
- Snapshots, async testing, mocking, coverage
- Optional: 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.Code Optimization
- Minifying and concatenating code
- Code splitting
- Lazy loading components
- Using Suspense
- React Compiler
- Concurrency, Transitions and Deferred Values
15.TypeScript
- Type safety in React Components
- TypeScript in JSX (TSX)
- 16.State Management
- Redux Toolkit
- Zustand
- Jotai
17.Fetch/axios Alternatives
- TanStack Query (React Query)
- Mutations, catching
18.Authentication and React
- Authentication with Okta and Auth0
- RBAC
- JWT and React
- Comparison of Authentication Tools, including Supabase and Clerk
19.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
20.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
