Getting Started with React | Introduction to React Basics

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.

Retail Price: $2,195.00

Next Date: 02/03/2025

Course Days: 3


Enroll in Next Date

Request Custom 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.

 

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

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 Dates Course Times (EST) Delivery Mode GTR
2/3/2025 - 2/5/2025 10:00 AM - 6:00 PM Virtual Enroll
4/7/2025 - 4/9/2025 10:00 AM - 6:00 PM Virtual Enroll
6/9/2025 - 6/11/2025 10:00 AM - 6:00 PM Virtual Enroll
8/18/2025 - 8/20/2025 10:00 AM - 6:00 PM Virtual Enroll
10/6/2025 - 10/8/2025 10:00 AM - 6:00 PM Virtual Enroll
12/8/2025 - 12/10/2025 10:00 AM - 6:00 PM Virtual Enroll