Introduction to React Basics (TT4190)

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.

  • Price: $2,195.00
  • Duration: 3 days
  • Delivery Methods: Virtual
Date Time Price Option
04/07/2025 09:00 AM - 05:00 PM CT $2,195.00
06/09/2025 09:00 AM - 05:00 PM CT $2,195.00
08/18/2025 09:00 AM - 05:00 PM CT $2,195.00
10/06/2025 09:00 AM - 05:00 PM CT $2,195.00
12/08/2025 09:00 AM - 05:00 PM CT $2,195.00
For questions call: (469) 721-6100
Find More Training

Why choose TOPTALENT?

  • Get assistance every step of the way from our Texas-based team, ensuring your training experience is hassle-free and aligned with your goals.
  • Access an expansive range of over 3,000 training courses with a strong focus on Information Technology, Business Applications, and Leadership Development.
  • Have confidence in an exceptional 95% approval rating from our students, reflecting outstanding satisfaction with our course content, program support, and overall customer service.
  • Benefit from being taught by Professionally Certified Instructors with expertise in their fields and a strong commitment to making sure you learn and succeed.

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

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.

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

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:

  • Introduction to HTML5 / CSS3 & JavaScript Essentials

Ten (10) business days’ notice is required to reschedule a class with no additional fees. Notify TOPTALENT LEARNING as soon as possible at 469-721-6100 or by written notification to info@toptalentlearning.com to avoid rescheduling penalties.

Please contact our team at 469-721-6100; we will gladly guide you through the online purchasing process.

You will receive a receipt and an enrollment confirmation sent to the email you submitted at purchase. Your enrollment email will have instructions on how to access the class. Any additional questions our team is here to support you. Please call us at 469-721-6100.

If a student is 15 minutes late, they risk losing their seat to a standby student. If a student is 30 minutes late or more, they will need to reschedule. A no-show fee will apply. Retakes are enrolled on a stand-by basis. The student must supply previously issued courseware. Additional fees may apply.

You will receive a ‘Certificate of Completion’ once you complete the class. If you purchased an exam voucher for the class, a team member from TOPTALENT LEARNING will reach out to discuss your readiness for the voucher and make arrangements to send it.