Getting Started with React Essentials

At Course Completion

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.

Audience Profile

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.

Prerequisites

This 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.

Here are three helpful skills to bring with you:

Familiarity with JavaScript concepts like functions, arrays, and objects.
Experience using a code editor
A general understanding of how HTML and CSS work together to build web pages.

Take Before: In order to gain the most from this course, you should have incoming skills equivalent to those in the course listed below, or should have attended this as a prerequisite:
TT4003 Introduction to HTML5, CSS3 and JavaScript
TT4110 Introduction to JavaScript / Modern JavaScript Essentials

Outline

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