Unlock new career opportunities by mastering React in our immersive three-day course, customized for experienced JavaScript developers ready to build dynamic, high-performance web applications with tools like TailwindCSS and Material UI.
EnrollBuild modern React applications confidently using functional components and Hooks.
Design reusable forms and components using React Hook Form and Formik.
Implement and manage state and routing dynamically with React Router and REST API integration.
Enhance testing and debugging skills with Vitest, React Testing Library, and React Developer Tools.
React is one of the most in-demand tools for building fast and interactive web applications, and learning it can open the door to exciting new projects and career opportunities. In this engaging three day expert-led course, you will get hands-on experience creating modern React applications from the ground up. You will not just follow along with examples but build real projects that help you understand why React works the way it does and how to use it effectively. You will walk away with the confidence to create polished user interfaces using tools like TailwindCSS and Material UI and apply best practices that keep your code clean and easy to maintain. You will strengthen your ability to create powerful React applications by working directly with the key patterns and tools used every day on the job. You will learn how to manage dynamic data and interactions with React Hooks, create reusable components, handle complex forms, and work smoothly with routing and REST APIs. You will also sharpen your testing and debugging skills so you can catch problems early and deliver reliable applications. The course is about fifty percent hands-on so you will spend plenty of time applying what you learn and getting expert feedback in a supportive environment. This course is designed for web developers who have some JavaScript experience and want to become fully job ready with React. Whether you are moving into a React role for the first time or want to strengthen your skills for your team or company, this course will give you the real world techniques and knowledge you need to succeed. You will leave with the ability to build modern applications using the latest React features and tools, ready to take on new challenges and contribute with confidence. NOTE: For a deeper dive into React essentials with extended topics and labs, you might consider the five day React Boot Camp (TT4195) course as an alternative. The five day Boot Camp is a superset of this three day React Essentials (TT4190) course.
Creating a new React project with Vite
Understanding the project structure
Installing necessary dependencies
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
React Uses a Virtual DOM
Why Not Modify the Actual DOM?
What is a Virtual DOM?
Virtual DOM Pieces
ReactElement
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
useState
useEffect
useContext
Forms 101
Text Input
Multiple fields
Validation
Creating reusable form components
Controlled vs. uncontrolled components
React Hook Form
Formik
Zod and Yup for Validation
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
Vitest + React Testing Library
Snapshots, async testing, mocking, coverage
Optional: JEST
Using React Developer Tools
Using Visual Studio Code
Using the Chrome Debugger
REST Basics
Using fetch
Handling responses and errors
Using axios
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
Your team deserves training as unique as they are.
Let us tailor the course to your needs at no extra cost.
Trusted by Engineers at:
and more...
Aaron Steele
Casey Pense
Chris Tsantiris
Javier Martin
Justin Gilley
Kathy Le
Kelson Smith
Oussama Azzam
Pascal Rodmacq
Randall Granier
Aaron Steele
Casey Pense
Chris Tsantiris
Javier Martin
Justin Gilley
Kathy Le
Kelson Smith
Oussama Azzam
Pascal Rodmacq
Randall Granier