O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning React

Book Description

Get Started Fast Building Modern Web Applications Using React

As far as new web frameworks and libraries go, React is quite the runaway success. It not only deals with the most common problems developers face when building complex apps, it throws in a few additional tricks that make building the visuals for such apps much, much easier.

What React isn’t, though, is beginner-friendly and approachable. Until now. In Learning React, author Kirupa Chinnathambi brings his fresh, clear, and very personable writing style to help you understand the fundamentals of React and how to use it to build really performant (and awesome) apps.

  • 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 React’s 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

  • Contents at a Glance

    Chapter 1  Introducing React

    Chapter 2  Building Your First React App

    Chapter 3  Components in React

    Chapter 4  Styling in React

    Chapter 5  Creating Complex Components

    Chapter 6  Transferring Properties (Props)

    Chapter 7  Meet JSX–Again!

    Chapter 8  Dealing with State

    Chapter 9  Going from Data to UI

    Chapter 10  Working with Events

    Chapter 11  The Component Lifecycle

    Chapter 12  Accessing DOM Elements

    Chapter 13  Creating a Single-Page App Using React Router

    Chapter 14  Building a Todo List App

    Chapter 15  Setting Up Your React Development Environment

    Chapter 16  The End

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