Learning React by Chinnathambi, Kirupa -- Read -- Imperial Library of Trantor

Index

About This E-Book Title Page Copyright Page Accessing the Free Web Edition Dedication Page Contents Acknowledgments About the Author 1. Introducing React

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

Lightning-fast DOM Manipulation APIs to Create Truly Composable UIs Visuals Defined Entirely in JavaScript Just the V in an MVC Architecture

Conclusion

2. Building Your First React App

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

Changing the Destination Styling It Up!

Conclusion

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

Conclusion

4. Styling in React

Displaying Some Vowels Styling React Content Using CSS

Understand the Generated HTML Just Style It Already!

Styling Content the React Way

Creating a Style Object Actually Styling Our Content You Can Omit the “px” Suffix Making the Background Color Customizable

Conclusion

5. Creating Complex Components

From Visuals to Components

Identifying the Major Visual Elements Identifying the 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 Comments Capitalization, HTML Elements, and Components Your JSX Can Be Anywhere

Conclusion

8. Dealing with State

Using State

Our Starting Point

Getting Our Counter On

Setting the Initial State Value Starting Our Timer and Setting State Rendering the State Change

Optional: The Full Code Conclusion

9. Going from Data to UI

The Example Your JSX Can Be Anywhere—Part II Dealing with Arrays in the Context of JSX Conclusion

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?!

Browser Compatibility Improved Performance

Conclusion

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 Conclusion

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

Conclusion

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

Conclusion

15. Setting Up Your React Development Environment

Meet the Tools

Node.js Babel webpack Your Code Editor

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

Conclusion

16. The End Index Code Snippets

← Prev
Back
Next →

← Prev
Back
Next →