Mastering React Web Developers Boot Camp

React revolves around the creation of dynamic, interactive, and efficient web applications. By understanding the fundamental principles of React, you ll be armed with the knowledge to craft visually appealing web interfaces and practical user experiences. This is perfect for developers eager to push their web development capabilities further and enhance their existing digital platforms or craft new web projects from scratch.

Geared for experienced web developers, our Mastering React Boot Camp is a five-day, comprehensive hands-on program that explores the latest features, skills and benefits React has to offer. Throughout the course you ll learn the practical real-world, foundational and core React skills required to solve the usual challenges you might face when developing modern web applications. 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 React right away.

By the end of this course, you will have built diverse projects like a time-logging app, all while getting familiarized with React's state management, event handling, and various hooks. You ll leave this course equipped with the skills to efficiently design and implement responsive web applications using React. You ll also understand the importance and role of the Virtual DOM, and the nuances of JSX. Above all, you'll be fully equipped with the confidence and skills required to efficiently design and implement responsive web applications using React.

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()

In order to be successful in the course, you should have solid, current hands-on experience developing basic web applications, and be well versed in HTML5, CSS3 and JavaScript.

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.