Getting Started with React Essentials (TT4190)

Step by Step React Development | Explore Basics, Hooks, Components, Forms, Routing & Basic Unit Tests

Course Code: TT4190 / TTREACTJS

Skill Level: Introductory

Duration: 3 Days

Course Overview

Getting Started with React Essentials is a fast-paced, three-day hands-on course designed to get intermediate-skilled web developers quickly up and running with core React skills. Geared for more experienced web developers new to React, this course provides students with the core knowledge and hands-on skills they require to build reliable, powerful React apps.

Throughout the course students will explore React fundamentals with a progressive, example-driven approach. You’ll create your first apps, learn how to write components, start handling user interaction, and manage rich forms. We end the first part by exploring the ways to create a new React application, and building a multi-page app that uses client-side routing.

Students will build Single Page Applications (SPA), create robust routing with error handling, and use both class and functional reusable components.
The lab project will also include the use of form validation.

NOTE: This course explores how to build your first React application. You should be an experienced web developer, with solid, current, incoming hands-on experience with HTML5, CSS3 and JavaScript. Students who want a deeper dive into more intermediate level topics such as Redux, REST, and deeper Unit Testing and more might consider the TT4195 Mastering React Boot Camp five-day superset of this class as an alternative.

Learning Objectives

This course combines engaging instructor-led presentations and useful demonstrations with valuable hands-on labs and engaging group activities. Throughout the course you’ll learn how to:

A basic and advanced understanding of React components
An advanced, in-depth knowledge of how React works
How to build, validate, and populate interactive forms
How to use inline styles for perfect looking components
How to test React components
How to build and use components

If your team requires different topics, additional skills or a custom approach, our team will collaborate with you to adjust the course to focus on your specific learning objectives and goals.

Course Objectives

Learning Objectives

This course combines engaging instructor-led presentations and useful demonstrations with valuable hands-on labs and engaging group activities. Throughout the course you’ll learn how to:

A basic and advanced understanding of React components
An advanced, in-depth knowledge of how React works
How to build, validate, and populate interactive forms
How to use inline styles for perfect looking components
How to test React components
How to build and use components

If your team requires different topics, additional skills or a custom approach, our team will collaborate with you to adjust the course to focus on your specific learning objectives and goals.

Course Prerequisites

Audience

This course is for intermediate-skilled web developers new to React who have current, incoming hands-on experience working HTML5, CSS3 and JavaScript.

Pre-Requisites

Take Before: Students should have incoming practical skills aligned with those in the course(s) below, or should have attended the following course(s) as a pre-requisite:

TT4003 Introduction to HTML5 / CSS3 & JavaScript Essentials

Next Steps / Follow-on Courses: We offer a wide variety of follow-on courses for next-level web development, React, Advanced React, React Native, Full Stack and more. Please see our Modern Web Developer / Full Stack Courses & Learning Journey Paths for options based on your specific role and goals.

Course Agenda

Please note that topics, agenda and labs are subject to change, and may adjust during live delivery based on audience skill level, interests and participation. This course is 50% hands-on lab to lecture ratio.

1. ES6 Quick Refresher / Overview

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. Getting Started

Setting up your development environment
JavaScript ES6 /ES7

3. Creating a New React App

Create-next-app
Create-vite
Create-react-app

4. Class and Functional Components

What’s a component?
Class components
Functional components - Motivation behind Hooks
How Hooks Map to Component Classes
Our first component
Building The App
Props - Making The App data-driven
Props – this.props vs props
Events - Your app’s first interaction
useEffect() Hook Example
State - Updating state
useState() Hook Example

5. JSX and the Virtual DOM Overview

React Uses a Virtual DOM
Why Not Modify the Actual DOM?
What is a Virtual DOM?
Virtual DOM Pieces
ReactElement

6. Bonus Review: JSX

JSX Creates Elements
JSX Attribute Expressions
JSX Conditional Child Expressions
JSX Boolean Attributes
JSX Comments
JSX Spread Syntax
JSX Gotchas

7. Forms

Forms 101
Text Input
Multiple fields
Validation

8. Routing

What’s in a URL?
React Router’s core components
Building the components of react-router

Bonus Content / Time Permitting

9. Unit Testing & Jest

Writing tests without a framework
What is Jest?
Using Jest
Testing strategies for React applications
Testing a basic React component with Enzyme

Course Materials

Setup Made Simple! Learning Experience Platform (LXP)

All applicable course software, digital courseware files or course notes, labs, data sets and solutions, live coaching support channels, and rich extended learning and post training resources are provided for you in our “easy access, single source, no install required” online Learning Experience Platform (LXP), remote lab and content environment. Access periods vary by course. We’ll collaborate with you to ensure your team is set up and ready to go well in advance of the class. Please inquire about set up details and options for your specific course of interest.

Raise the bar for advancing technology skills

Attend a Class!

Live scheduled classes are listed below or browse our full course catalog anytime

Special Offers

We regulary offer discounts for individuals, groups and corporate teams. Contact us

Custom Team Training

Check out custom training solutions planned around your unique needs and skills.

EveryCourse Extras

Exclusive materials, ongoing support and a free live course refresh with every class.

Attend a Course

Please see the current upcoming available open enrollment course dates posted below. Please feel free to Register Online below, or call 844-475-4559 toll free to connect with our Registrar for assistance. If you need additional date options, please contact us for scheduling.

Course Title	Days	Date	Time	Price
Getting Started with React Essentials (TT4190)	3 Days	Nov 13 to Nov 15	10:00 AM to 06:00 PM EST	$2,195.00	Enroll
Getting Started with React Essentials (TT4190)	3 Days	Jan 8 to Jan 10	10:00 AM to 06:00 PM EST	$2,195.00	Enroll
Getting Started with React Essentials (TT4190)	3 Days	Mar 4 to Mar 6	10:00 AM to 06:00 PM EST	$2,195.00	Enroll
Getting Started with React Essentials (TT4190)	3 Days	Apr 29 to May 1	10:00 AM to 06:00 PM EST	$2,195.00	Enroll
Getting Started with React Essentials (TT4190)	3 Days	Jun 10 to Jun 12	10:00 AM to 06:00 PM EST	$2,195.00	Enroll

Mix, Match & Master!
2FOR1: Two Courses, One Price!
Enroll in *any* two public courses (for 2023 *OR* 2024 dates!) by October 31, for one price! Learn something new, or share the promo!

Click for Details & Additional Offers

Learn. Explore. Advance!

Extend your training investment! Recorded sessions, free re-sits and after course support included with Every Course

Gain the skills you need with less time in the classroom with our short course, live-online hands-on events

Trivera QuickSkills: Free Courses and Webinars

Training on us! Keep your skills current with free live events, courses & webinars

Trivera AfterCourse: Coaching and Support

Expert level after-training support to help organizations put new training skills into practice on the job

The voices of our customers speak volumes

Excellent detail about the Spring framework which directly relates to my role as a senior engineer. I found the content and style to be very enjoyable, and would encourage me to ask questions where previously I might not have paid much attention, eg. pom version numbers / spring starters being imported. The focus on the different styles of unit testing was also excellent and I would plan to incorporate in day to day work.

Edward K

Both the instructor and the course material were very thorough - the course material has many helpful references - the labs were well laid out, making it easy to learn from and get done on time

Steve C.

Great job overall. Great communicator and explained complex concepts in a simple, easier to understand format.

Jeremy G

The instructor was clearly knowledgeable about Java and programming in general. He was very attentive to every student's individual needs and constantly encouraged questions, concerns, student issues to be raised and addressed each one thoroughly.

Mark M

A very good balance of teaching time to lab time. I've done other courses that I found to be much lighter on content and heavy on labs to waste time. This was a refreshing change of pace.

Adam G

Excellent training. Even though it was online, I did not have any issues understanding or getting the answers for the questions I had. The lab exercises are interesting to apply what was learnt. Overall very good training. Thank you!

Anitha

Best programming class I've ever been in, head and shoulders above any thing I took in college as part of a computer science degree. The instructor was thorough and very detailed, he was very good abut explaining all possible scenarios a situation would apply to. The way the albs were structured and the class was conducted was very good for interaction and hand on learning.

Danish J

Instructor was beyond phenomenal. He had an in depth knowledge of the course material and always ensured that everyone understood what was being discussed. I really enjoyed the mix of theory and practical examples of each part of the course.

Cillian M

First time in my life I have attended remote class and I find it great. Personally I don't feel there is any area which require improvement!

Rishi M

Special Offers
Limited Offer for most courses.

SAVE 50%

Learn More