Getting Started with React Essentials (TT4190)

Explore React Basics, Components, Forms, Routing & More

TT4190 / TTREACTJS

Introductory

3 Days

Course Overview

Overview

React Essentials is an engaging, three-day course tailored for web developers who are new to React. This course is a perfect starting point for those looking to add this powerful JavaScript library to their skill set. React is renowned for its efficiency in building dynamic user interfaces, making it a valuable asset for any web project. By learning React, you'll be equipped to create more interactive, responsive websites, enhancing both user experience and organizational web strategies.

During the course, you'll explore essential React topics through a mix of lectures and hands-on labs.

Throughout the course, you'll dive into the essentials of React, starting with the fundamentals of building your first React web application, where you'll learn about setting up your development environment and creating your initial application. You'll also explore the intricacies of React's component-based architecture, including both class and functional components, and understand the role of JSX in developing intuitive user interfaces. You’ll also explore creating and managing web forms, along with an understanding of routing to build multi-page applications. Complementing these core topics, the course also introduces you to advanced concepts such as the Virtual DOM, state management using Hooks, and essential tools like React Router, ensuring you have a comprehensive foundation in React.

This course prioritizes a practical approach, ensuring that 50% of your time is spent in hands-on labs, solidifying your understanding through real-world application. Guided by an industry expert, you'll acquire problem-solving skills and gain confidence in applying your new knowledge immediately in your projects. By the end of the course, you will have not only a theoretical understanding of React but also practical basic experience in its application, ready to enhance your web development projects with your newfound skills.

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.

 

Learning Objectives

Our engaging instructors and mentors are highly experienced practitioners who bring years of current "on-the-job" experience into every classroom. Working in a hands-on learning environment, guided by our expert team, you’ll learn how to:

  • Develop and Deploy a Basic React Application: Gain basic skills in setting up a React development environment and deploying a basic React web application.
  • Work with React Components and JSX: Learn to effectively use class and functional components in React, integrating JSX syntax for dynamic user interface development.
  • Implement Forms and Routing in React: Acquire skills in creating and managing interactive web forms and implementing seamless navigation using React Router.
  • Apply State Management and Lifecycle Methods: Understand and apply state management using the useState Hook and lifecycle methods with the useEffect Hook in React applications.

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.

Course Objectives

Learning Objectives

Our engaging instructors and mentors are highly experienced practitioners who bring years of current "on-the-job" experience into every classroom. Working in a hands-on learning environment, guided by our expert team, you’ll learn how to:

  • Develop and Deploy a Basic React Application: Gain basic skills in setting up a React development environment and deploying a basic React web application.
  • Work with React Components and JSX: Learn to effectively use class and functional components in React, integrating JSX syntax for dynamic user interface development.
  • Implement Forms and Routing in React: Acquire skills in creating and managing interactive web forms and implementing seamless navigation using React Router.
  • Apply State Management and Lifecycle Methods: Understand and apply state management using the useState Hook and lifecycle methods with the useEffect Hook in React applications.

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.

 

Course Prerequisites

Audience & Pre-Requisites

This fast-paced course is for intermediate skilled web developers new to React who are proficient in HTML5, CSS3 and JavaScript. This course is not for beginners.

Take Before: Attendees should have experience with the topics in the following courses, or should have recently attended these as a pre-requisite:

  • TT4003:         Introduction to HTML5 / CSS3 & JavaScript Essentials – 3 days

 

Related Courses

The following is a small subset of related courses. We offer many additional courses and topics on modern web, mobile and full stack development. Please see the online catalog for a complete list of courses and learning paths.

  • TT4002          Introduction to HTML5 / CSS3 - 2 days
  • TT4003          Introduction to HTML5, CSS3 & JavaScript - 3 days
  • TT4110          Introduction to Moden JavaScript – 3 days
  • TT4165          Introduction to Angular Essentials - 3-day subset of this course
  • TT4168          Mastering Angular Boot Camp - 5 days
  • TT4190          Getting Started with React Essentials – 3 days
  • TT4195          Mastering React Boot Camp |With Redux, Flux, Unit Testing, JSX & More – 5 days (TT4190 superset)
  • TT4198          Introduction to React Native – 3 days
  • TT4203          Introduction to GraphQL with React – 3 days
  • TT4205          Advanced GraphQL in React – 3 days

 

Next Steps / Follow-on Courses: We offer a wide variety of follow-on courses for next-level web development, 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 this list of topics is based on our standard course offering, evolved from typical 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.

1. Your first React Web Application  
Setting up your development environment 
JavaScript ES6 /ES7 
Next.js Introduction
Getting started
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
5. Forms 
Forms 101
Text Input
Multiple fields
Validation
6. Routing
What’s in a URL?
React Router’s core components
Building the components of react-router 
7.  Advanced Component Configuration with context
Context - Provider/Consumer
useContext() Hook Example
Bonus Content / Time Permitting
8.  Unit Testing & Jest
Writing tests without a framework
What is Jest?
Using Jest
Testing strategies for React applications
9.  Debugging React
Using React Developer Tools
Using Visual Studio Code
OPTIONAL - Using the Chrome Debugger
10.  REST
REST Basics
Using fetch
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

 

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, CodeCoach.AI anytime tutor access, 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 Aug 5 to Aug 7 10:00 AM to 06:00 PM EST $2,195.00 Enroll
Getting Started with React Essentials (TT4190) 3 Days Sep 30 to Oct 2 10:00 AM to 06:00 PM EST $2,195.00 Enroll
Getting Started with React Essentials (TT4190) 3 Days Nov 18 to Nov 20 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 December 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