Book Description

Learning React

A hands-on guide to building web applications using React and Redux

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 web developers new to React understand its fundamentals and how to use it to build really performant (and awesome) apps.

The only book on the market that helps you get your first React app up and running in just minutes, Learning React is chock-full of colorful illustrations to help you visualize difficult concepts and practical step-by-step examples to show you how to apply what you learn. 

  • 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
  • Use Redux to make managing your app data and state easy

Contents at a Glance

1 Introducing React

2 Building Your First React App

3 Components in React

4 Styling in React

5 Creating Complex Components

6 Transferring Properties

7 Meet JSX... Again!

8 Dealing with State in React

9 Going from Data to UI in React

10 Events in React

11 The Component Lifecycle

12 Accessing DOM Elements in React

13 Setting Up Your React Dev Environment

14 Working with External Data in React

15 Building an Awesome Todo List App in React

16 Creating a Sliding Menu in React

17 Avoiding Unnecessary Renders in React

18 Creating a Single-Page App in React Using React Router

19 Introduction to Redux

20 Using Redux with React

Table of Contents

  1. Cover Page
  2. Title Page
  3. Copyright Page
  4. About This E-Book
  5. Accessing the Free Web Edition
  6. Dedication
  7. Contents at a Glance
  8. Table of Contents
  9. About the Author
  10. Acknowledgments
  11. 1 Introducing React
    1. Old-School Multipage Design
    2. New-School Single-Page Apps
    3. Meet React
      1. Automatic UI State Management
      2. Lightning-Fast DOM Manipulation
      3. APIs to Create Truly Composable UIs
      4. Visuals Defined Entirely in JavaScript
      5. Just the V in an MVC Architecture
    4. Conclusion
  12. 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
  13. 3 Components in React
    1. Quick Review of Functions
    2. Changing How We Deal with UI
    3. Meet the React Component
      1. Creating a Hello, World! Component
      2. Specifying Properties
      3. First Part: Updating the Component Definition
      4. Second Part: Modifying the Component Call
    4. Dealing with Children
    5. Conclusion
  14. 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. Making the Background Color Customizable
    4. Conclusion
  15. 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
    3. The Square Component
    4. The Label Component
      1. Passing Properties, Again!
    5. Why Component Composability Rocks
    6. Conclusion
  16. 6 Transferring Properties
    1. Problem Overview
    2. Detailed Look at the Problem
    3. Meet the Spread Operator
    4. A Better Way to Transfer Properties
    5. Conclusion
  17. 7 Meet JSX…Again!
    1. What Happens with JSX?
    2. JSX Quirks to Remember
      1. Evaluating Expressions
      2. Returning Multiple Elements
      3. You Can’t Specify CSS Inline
    3. Capitalization, HTML Elements, and Components
    4. Your JSX Can Be Anywhere
    5. Conclusion
  18. 8 Dealing with State in React
    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
  19. 9 Going from Data to UI in React
    1. The Example
    2. Your JSX Can Be Anywhere, Part II
    3. Dealing with Arrays
    4. Conclusion
  20. 10 Events in React
    1. Listening and Reacting to Events
      1. Starting Point
    2. Making the Button Click Do Something
    3. Event Properties
      1. Meet Synthetic Events
      2. Doing Stuff with Event Properties
    4. More Eventing Shenanigans
      1. You Can’t Directly Listen to Events on Components
      2. Listening to Regular DOM Events
      3. The Meaning of this Inside the Event Handler
    5. React…Why? Why?
      1. Browser Compatibility
      2. Improved Performance
    6. Conclusion
  21. 11 The Component Lifecycle
    1. Meet the Lifecycle Methods
      1. See the Lifecycle Methods in Action
      2. The Initial Rendering Phase
      3. Getting the Default Props
      4. Getting the Default State
      5. componentWillMount
      6. render
      7. componentDidMount
      8. The Updating Phase
      9. Dealing with State Changes
      10. shouldComponentUpdate
      11. componentWillUpdate
      12. render
      13. componentDidUpdate
      14. Dealing with Prop Changes
      15. The Unmounting Phase
    2. Conclusion
  22. 12 Accessing DOM Elements in React
    1. The Colorizer Example
    2. Meet Refs
    3. Using Portals
    4. Conclusion
  23. 13 Setting Up Your React Dev Environment Easily
    1. Meet Create React
      1. Making Sense of What Happened
    2. Creating Our HelloWorld App
    3. Creating a Production Build
    4. Conclusion
  24. 14 Working with External Data in React
    1. Web Request 101
    2. It’s React Time!
      1. Getting Started
    3. Getting the IP Address
      1. Kicking the Visuals Up a Notch
    4. Conclusion
  25. 15 Building an Awesome Todo List App in React
    1. Getting Started
    2. Creating the Initial UI
    3. Building the Rest of the App
      1. Adding Items
    4. Displaying the Items
      1. Styling our App
      2. Removing Items
    5. Animation! Animation! Animation!
    6. Conclusion
  26. 16 Creating a Sliding Menu in React
    1. How the Sliding Menu Works
    2. Setting Up the Sliding Menu
    3. Getting Started
    4. Showing and Hiding the Menu
      1. Creating the Button
      2. Creating the Menu
    5. Conclusion
  27. 17 Avoiding Unnecessary Renders in React
    1. About the render Method
    2. Optimizing render Calls
      1. Getting an Example Going
    3. Seeing the render Calls
      1. Overriding a Component Update
      2. Using PureComponent
    4. Conclusion
  28. 18 Creating a Single-Page App in React Using React Router
    1. The Example
    2. Getting Started
    3. Building Our Single-Page App
      1. Displaying the Initial Frame
      2. Creating Our Content Pages
      3. Using React Router
    4. It’s the Little Things
      1. Fixing Our Routing
      2. Adding Some CSS
      3. Highlighting the Active Link
    5. Conclusion
  29. 19 Introduction to Redux
    1. What Is Redux?
    2. Building a Simple App Using Redux
      1. It’s Redux Time
      2. Lights! Camera! Action!
      3. Our Reducer
      4. Store Stuff
    3. Conclusion
  30. 20 Using Redux with React
    1. Managing React State with Redux
      1. How Redux and React Overlap
      2. Getting Started
      3. Building the App
    2. Conclusion
  31. Index
  32. Code Snippets