TT4190: Getting Started with React | Introduction to React Basics

Become an EPIC Affiliate

To view the class schedule you need to become an Affiliate

  • Largest “Guaranteed To Run” public technical training schedules available
  • Easy to become an Affiliate – no charge or fee
Become an EPIC Affiliate

already an Affiliate?  Login

About this Course

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.

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.

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.

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

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