Live Chat
Monday - Friday 8am - 6pm EST Chat Now
Contact Us
Monday - Friday 8am - 8pm EST 1-866-716-6688 Other Contact Options
Checkout

Cart () Loading...

    • Quantity:
    • Delivery:
    • Dates:
    • Location:

    $

Introduction to React (TTSREACT2)

Comprehensive hands-on modern React foundation skills for newer developers

GK# 8453

Course Overview

TOP

Introduction to React is a five-day, introductory-level course geared for newer web developers who need to get up and running with productive, practical React web framework and library capabilities right away. 

Using the React framework solves common problems developers face when building complex apps, and also makes building the visuals for such apps much, much easier. What React isn’t, though, is beginner-friendly and easily approachable, especially for web developers who might have less hands-on experience on the job.  This course provides students with a comprehensive hands-on guide to build maintainable, high-performing web application user interfaces using the React JavaScript library.  Students will understand the fundamentals of React and how to use it to build really performant (and awesome) applications.

If your team requires different topics or tools, additional skills or custom approach, this course may be easily adjusted to accommodate.  We offer additional related React, Redux, Angular, web development, scripting, programming and design courses which may be blended with this course for a track that best suits your objectives.

Schedule

TOP
  • Delivery Format:
  • Date:
  • Location:
  • Access Period:

$

What You'll Learn

TOP

Working within in an engaging, hands-on learning environment, attendees will learn to:

  • Build your first React app
  • Create components to define parts of your UI
  • Combine components into other components to build more complex UIs
  • Use JSX to specify visuals without writing full-fledged JavaScript
  • Deal with maintaining state
  • Work with React’s way of styling content
  • Make sense of the mysterious component lifecycle
  • Build multi-page apps using routing and views
  • Optimize your React workflow using tools such as Node, Babel, webpack, and others

Outline

TOP
Viewing outline for:

Virtual Classroom Live Outline

1. Introducing React

  • Old School Multi-Page Design
  • New School Single-Page Apps
  • Meet React
  • Automatic UI State Management

 

2. Building Your First React App

  • Dealing with JSX
  • Getting Your React On
  • Displaying Your Name
  • It’s All Still Familiar

 

3. Components in React

  • A Quick Review of Functions
  • Changing How We Deal with the UI
  • Meet the React Component
  • Creating a Hello, World! Component
  • Specifying Properties
  • Dealing with Children

 

4. Styling in React

  • Displaying Some Vowels
  • Styling React Content Using CSS
  • Styling Content the React Way
  • Creating a Style Object
  • Actually Styling Our Content
  • You Can Omit the “px” Suffix
  • Making the Background Color Customizable

 

5. Creating Complex Components

  • From Visuals to Components
  • Creating the Components
  • The Card Component
  • The Square Component
  • The Label Component
  • Passing Properties, Again!
  • Why Component Composability Rocks
  • Conclusion

 

6. Transferring Properties (Props)

  • Problem Overview
  • Detailed Look at the Problem
  • Meet the Spread Operator
  • Properly Transferring Properties
  • Conclusion

 

7. Meet JSX—Again!

  • What Happens with JSX?
  • JSX Quirks to Remember
  • You Can Only Return A Single Root Node
  • You Can’t Specify CSS Inline
  • Reserved Keywords and className
  • Capitalization, HTML Elements, and Components
  • Your JSX Can Be Anywhere
  • Conclusion

 

8. Dealing with State

  • Using State
  • Getting Our Counter On
  • Optional: The Full Code

 

9. Going from Data to UI

  • The Example
  • Your JSX Can Be Anywhere
  • Dealing with Arrays in the Context of JSX

 

10. Working with Events

  • Listening and Reacting to Events
  • Starting Point
  • Making the Button Click Do Something
  • Event Properties
  • Doing Stuff With Event Properties
  • More Eventing Shenanigans
  • Listening to Regular DOM Events
  • The Meaning of this Inside the Event Handler
  • React...Why? Why?!

 

11. The Component Lifecycle

  • Meet the Lifecycle Methods
  • See the Lifecycle Methods in
  • Action
  • The Initial Rendering Phase
  • The Updating Phase
  • The Unmounting Phase
  • Conclusion

 

12. Accessing DOM Elements

  • Meet Refs

 

13. Creating a Single-Page App Using React Router

  • The Example
  • Building the App
  • Displaying the Initial Frame
  • Displaying the Home Page
  • Interim Cleanup Time
  • Displaying the Home Page Correctly
  • Creating the Navigation Links
  • Adding the Stuff and Contact Views
  • Creating Active Links

 

14. Building a Todo List App

  • Getting Started
  • Creating the UI
  • Creating the Functionality
  • Initializing our State Object
  • Handling the Form Submit
  • Populating Our State
  • Displaying the Tasks
  • Adding the Finishing Touches

 

15. Setting Up Your React Development Environment

  • Meet the Tools
  • It Is Environment Setup Time!
  • Setting up our Initial Project Structure
  • Installing and Initializing Node.js
  • Installing the React Dependencies
  • Adding our JSX File
  • Going from JSX to JavaScript
  • Building and Testing Our App

Labs

TOP
Viewing labs for:

Virtual Classroom Live Labs

This “skills-centric” course is about 50% hands-on lab and 50% lecture, designed to train attendees in core modern web development skills, coupling the most effective techniques with the soundest industry practices. Throughout the course students will be led through a series of progressively advanced topics, where each topic consists of lecture, group discussion, comprehensive hands-on lab exercises, and lab review. Our courses include a wide range of supporting materials and labs to ensure all students are appropriately challenged or assisted at all times.

Prerequisites

TOP

In order to be successful in this class, incoming attendees are required to have current, hands-on experience in developing basic web applications, and be versed in HTML5, CSS3 and JavaScript essentials.

Who Should Attend

TOP

This is an introductory (gentle-intro-level) React development course, designed for basic-level web developers that need to further extend their skills in modern web development. 

Course Delivery

This course is available in the following formats:

Virtual Classroom Live

Experience expert-led online training from the convenience of your home, office or anywhere with an internet connection.

Duration: 5 day

Request this course in a different delivery format.
Enroll