Introduction to React (TTSREACT2)


Introduction to React (TTSREACT2)

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 Reactisnt, 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.

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 Reacts 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

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.

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.

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
  • Its 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 JSXAgain!

  • What Happens with JSX?
  • JSX Quirks to Remember
  • You Can Only Return A Single Root Node
  • You Cant 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


Whether you need assistance scheduling a class for yourself or for your group, GCA's Education Account Manager's will craft a customized training solution to meet the needs of your organization.