Getting Started with React Essentials (TT4190)

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

TT4190 / TTREACTJS

Introductory

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
Trivera MiniCamps
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

Special Offers
Limited Offer for most courses.

SAVE 50%

Learn More