This course is designed to help you become confident and job ready with React by giving you hands-on experience and practical skills you can use right away. Whether you are a web developer with some JavaScript knowledge or someone looking to strengthen your React abilities for your team or company, this course will guide you through the key tools and techniques used in modern React development.

Working in a hands-on learning environment, guided by our expert React instructor you will learn how to:

• Build modern React applications confidently using functional components and Hooks.
• Style your applications with TailwindCSS, Material UI, and styled-components to create polished user interfaces.
• Create smart, reusable forms with validation using React Hook Form, Formik, Zod, and Yup.
• Implement routing and navigation using the latest React Router tools, including dynamic routes and loader patterns.
• Connect your React apps to REST APIs using fetch and axios while handling responses and errors smoothly.
• Write meaningful unit tests and debug effectively using Vitest, React Testing Library, and React Developer Tools.

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 introductory-level course is designed for experienced web developers who have a basic understanding of JavaScript and want to strengthen their React skills to become confident and job ready. It is a great fit for roles like front end developers, full stack developers, or software engineers who want to build modern web applications using React. The course is fast paced but welcoming, making it ideal for anyone ready to roll up their sleeves and apply what they learn through hands-on practice.

Before attending, you should have a general comfort working with JavaScript and a basic understanding of how web applications work.

Please note that this list of topics is based on our standard course offering, evolved from current 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. The course tools, topics, use cases and hands-on labs can also be easily adjusted to suit your specific needs, goals or requirements. Please inquire for details and options.

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 6.30+ and 7

• Navigating and routing in a React application
• Defining routes and rendering components based on URL
• Dynamic routing and parameters
• loader, errorElement
• 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