Mastering React Web Developers Boot Camp

1. Your first React Web Application
   
   • Setting up your development environment
   • JavaScript ES6 /ES7
   • Next.js Introduction
   • Getting started
2. Functional Components
   
   • What’s 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’s 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

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
2. 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
3. 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()

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 Angular right away. The course is rich with hands-on activities, challenge labs, knowledge checks, valuable discussions and focused projects.