Introduction to React (TTSREACT2)

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

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.