Learning React

Table of contents

1. About This E-Book
2. Title Page
3. Copyright Page
4. Accessing the Free Web Edition
5. Dedication Page
6. Contents
7. Acknowledgments
8. About the Author
9. 1. Introducing React
   1. Old School Multi-Page Design
   2. New School Single-Page Apps
   3. Meet React
   4. Automatic UI State Management
      1. Lightning-fast DOM Manipulation
      2. APIs to Create Truly Composable UIs
      3. Visuals Defined Entirely in JavaScript
      4. Just the V in an MVC Architecture
   5. Conclusion
10. 2. Building Your First React App
    1. Dealing with JSX
    2. Getting Your React On
    3. Displaying Your Name
    4. It’s All Still Familiar
       1. Changing the Destination
       2. Styling It Up!
    5. Conclusion
11. 3. Components in React
    1. A Quick Review of Functions
    2. Changing How We Deal with the UI
    3. Meet the React Component
       1. Creating a Hello, World! Component
       2. Specifying Properties
       3. Dealing with Children
    4. Conclusion
12. 4. Styling in React
    1. Displaying Some Vowels
    2. Styling React Content Using CSS
       1. Understand the Generated HTML
       2. Just Style It Already!
    3. Styling Content the React Way
       1. Creating a Style Object
       2. Actually Styling Our Content
       3. You Can Omit the “px” Suffix
       4. Making the Background Color Customizable
    4. Conclusion
13. 5. Creating Complex Components
    1. From Visuals to Components
       1. Identifying the Major Visual Elements
       2. Identifying the Components
    2. Creating the Components
       1. The Card Component
       2. The Square Component
       3. The Label Component
       4. Passing Properties, Again!
    3. Why Component Composability Rocks
    4. Conclusion
14. 6. Transferring Properties (Props)
    1. Problem Overview
    2. Detailed Look at the Problem
    3. Meet the Spread Operator
    4. Properly Transferring Properties
    5. Conclusion
15. 7. Meet JSX—Again!
    1. What Happens with JSX?
    2. JSX Quirks to Remember
       1. You Can Only Return A Single Root Node
       2. You Can’t Specify CSS Inline
       3. Reserved Keywords and className
       4. Comments
       5. Capitalization, HTML Elements, and Components
       6. Your JSX Can Be Anywhere
    3. Conclusion
16. 8. Dealing with State
    1. Using State
       1. Our Starting Point
    2. Getting Our Counter On
       1. Setting the Initial State Value
       2. Starting Our Timer and Setting State
       3. Rendering the State Change
    3. Optional: The Full Code
    4. Conclusion
17. 9. Going from Data to UI
    1. The Example
    2. Your JSX Can Be Anywhere—Part II
    3. Dealing with Arrays in the Context of JSX
    4. Conclusion
18. 10. Working with Events
    1. Listening and Reacting to Events
       1. Starting Point
       2. Making the Button Click Do Something
       3. Event Properties
       4. Doing Stuff With Event Properties
       5. More Eventing Shenanigans
       6. Listening to Regular DOM Events
       7. The Meaning of this Inside the Event Handler
    2. React...Why? Why?!
       1. Browser Compatibility
       2. Improved Performance
    3. Conclusion
19. 11. The Component Lifecycle
    1. Meet the Lifecycle Methods
       1. See the Lifecycle Methods in Action
       2. The Initial Rendering Phase
       3. The Updating Phase
       4. The Unmounting Phase
    2. Conclusion
20. 12. Accessing DOM Elements
    1. Meet Refs
    2. Conclusion
21. 13. Creating a Single-Page App Using React Router
    1. The Example
    2. Building the App
       1. Displaying the Initial Frame
       2. Displaying the Home Page
       3. Interim Cleanup Time
       4. Displaying the Home Page Correctly
       5. Creating the Navigation Links
       6. Adding the Stuff and Contact Views
       7. Creating Active Links
    3. Conclusion
22. 14. Building a Todo List App
    1. Getting Started
    2. Creating the UI
    3. Creating the Functionality
       1. Initializing our State Object
       2. Handling the Form Submit
       3. Populating Our State
       4. Displaying the Tasks
       5. Adding the Finishing Touches
    4. Conclusion
23. 15. Setting Up Your React Development Environment
    1. Meet the Tools
       1. Node.js
       2. Babel
       3. webpack
       4. Your Code Editor
    2. It Is Environment Setup Time!
       1. Setting up our Initial Project Structure
       2. Installing and Initializing Node.js
       3. Installing the React Dependencies
       4. Adding our JSX File
       5. Going from JSX to JavaScript
       6. Building and Testing Our App
    3. Conclusion
24. 16. The End
25. Index
26. Code Snippets