Introduction to React (TTSREACT2)

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