Learning React: A Hands-On Guide to Building Web Applications Using React and Redux

by Kirupa Chinnathambi

Overview

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

Product Details

ISBN-13:	9780134843551
Publisher:	Pearson Education
Publication date:	05/15/2018
Series:	Learning
Edition description:	2nd ed.
Pages:	304
Sales rank:	642,396
Product dimensions:	7.00(w) x 8.90(h) x 0.80(d)

About the Author

Kirupa Chinnathambi has spent most of his life trying to teach others to love web development as much as he does.

In 1999, before blogging was even a word, he started posting tutorials on kirupa.com. In the years since then, he has written hundreds of articles, penned a few books (none as good as this one, of course!), and recorded a bunch of videos you can find on YouTube. When he isn’t writing or talking about web development, he spends his waking hours helping make the web more awesome as a Program Manager at Microsoft. In his nonwaking hours, he is probably sleeping—or writing about himself in the third person.

You can find him on Twitter (twitter.com/kirupa), Facebook (facebook.com/kirupa), or email ([e-mail]). Feel free to contact him anytime.

Table of Contents

1 Introducing React

Old-School Multipage 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

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!

3 Components in React

Quick Review of Functions

Changing How We Deal with UI

Meet the React Component

Creating a Hello, World! Component

Specifying Properties

First Part: Updating the Component Definition

Second Part: Modifying the Component Call

Dealing with Children

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

Making the Background Color Customizable

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

6 Transferring Properties

Problem Overview

Detailed Look at the Problem

Meet the Spread Operator

A Better Way to Transfer Properties

7 Meet JSX...Again!

What Happens with JSX?

JSX Quirks to Remember

Evaluating Expressions

Returning Multiple Elements

You Can’t Specify CSS Inline Comments

Capitalization, HTML Elements, and Components

Your JSX Can Be Anywhere

8 Dealing with State in React

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

9 Going from Data to UI in React

The Example

Your JSX Can Be Anywhere, Part II

Dealing with Arrays

10 Events in React

Listening and Reacting to Events

Starting Point

Making the Button Click Do Something

Event Properties

Meet Synthetic Events

Doing Stuff with Event Properties

More Eventing Shenanigans

You Can’t Directly Listen to Events on Components

Listening to Regular DOM Events

The Meaning of this Inside the Event Handler

React...Why? Why?

Browser Compatibility

Improved Performance

11 The Component Lifecycle

Meet the Lifecycle Methods

See the Lifecycle Methods in Action

The Initial Rendering Phase

Getting the Default Props

Getting the Default State

componentWillMount

render

componentDidMount

The Updating Phase

Dealing with State Changes

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

Dealing with Prop Changes

The Unmounting Phase

12 Accessing DOM Elements in React

The Colorizer Example

Meet Refs

Using Portals

13 Setting Up Your React Dev Environment Easily

Meet Create React

Making Sense of What Happened

Creating Our HelloWorld App

Creating a Production Build

14 Working with External Data in React

Web Request 101

It’s React Time!

Getting Started

Getting the IP Address

Kicking the Visuals Up a Notch

15 Building an Awesome Todo List App in React

Getting Started

Creating the Initial UI

Building the Rest of the App

Adding Items

Displaying the Items

Styling our App

Removing Items

Animation! Animation! Animation!

16 Creating a Sliding Menu in React

How the Sliding Menu Works

Setting Up the Sliding Menu

Getting Started

Showing and Hiding the Menu

Creating the Button

Creating the Menu

17 Avoiding Unnecessary Renders in React

About the render Method

Optimizing render Calls

Getting an Example Going

Seeing the render Calls

Overriding a Component Update

Using PureComponent

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

The Example

Getting Started

Building Our Single-Page App

Displaying the Initial Frame

Creating Our Content Pages

Using React Router

It’s the Little Things

Fixing Our Routing

Adding Some CSS

Highlighting the Active Link

19 Introduction to Redux

What Is Redux?

Building a Simple App Using Redux

It’s Redux Time

Lights! Camera! Action!

Our Reducer

Store Stuff

20 Using Redux with React

Managing React State with Redux

How Redux and React Overlap

Getting Started

Building the App

Editorial Reviews

Amazon Reviews of the First Edition


This is the best book to get up and running with React.JS
I found this book to be an amazing introductory text to learning React. Leveraging creativity interspersed with a bit of humor, the author took complex topics and made it more easily understood. Even when the difficulty ramped up, Kirupa made the dry and mundane almost non-existent. I can't recall once wishing for the book to end. That's tough to do - definitely more art than science. If you're looking for a solid, working understanding of getting up & running with React - this is the book. (January 20, 2017)


Great book from start to finish
I rarely review books. I don't even remember the last time I reviewed a book. I may have never reviewed a book in my life. In any event, I felt obligated to review this book because it was so well written. I've ready many programming books on many languages and this one is the only one to keep my attention all the way to the end. Every chapter builds upon the previous one. It starts out elementary and then works its way through more complex ideas. I understand JavaScript but this book explained to me how React works. The author is a born teacher and I appreciate his efforts! Thank you. (June 8, 2017)



Absolutely amazing
Absolutely blown away with how good of a book this is. I've been trying different tutorials, along with a couple of paid video courses. The video courses were fairly good, but they started off with complex projects and built them from the ground up. While it was cool to see how a complex app is actually built with React, there is no replacement for how Kirupa has figured out how to explain everything so simply. One difference here is that he starts with the very minimal things you need to know, explains those, and then expands to something a little more complex in the next chapter. This, combined with some humor, is just perfect. I've read a lot of IT and development books over the years, and I think this may be the best one I've read. I'm only around halfway done with the book, but wow, again, I'm blown away. I don't generally write reviews much, but I had to on this one. You're a natural teacher man, and thank you for this one! Seriously, thank you. If I could give this one more than 5 stars, I absolutely would. (February 17, 2017)


Well Written
I cannot comment enough on the readability of this text. Seasoned and rookie web developers should have no problem understanding the subject matter. (March 21, 2017)


Makes sense of difficult concepts, and is a fun, easy read
This is actually the only tech book I have ever read cover-to-cover. The author is a natural teacher. I tried a different react book and a bunch of online tutorials, and the concepts just didn't "click" for me. But after reading this, I understand it alot better. If you're starting at square one with react, this is square one. Side note: it's also very nicely designed. Shouldn't matter that much for a tech book, but then again we ARE talking about the view layer here! (January 21, 2017)


Absolutely love this book
Absolutely love this book! I have read other books and I've even taken a video course on React and this is the first time the author actually clearly explains the benefits of React. The other texts assumed the reader knows and jumps right in. I am a big reader and this is by far the best information on learning React that I've found. (January 25, 2018)


Great examples, code, and explanations
Spectacular job of keeping things simple by only focusing on one point at a time, choosing great examples, and using readable code with well-crafted, simple explanations. Many authors try to achieve this the lazy way- by omitting large amounts of code and relying on the reader to download it and understand it on her own. By contrast, the Learning React author included all of the code in the book and was not afraid to repeat code when it reinforced his point. (May 8, 2018)


Excellent primer for React
The author does a great job of introducing one concept at a time and then ties it all together. The overall tone of the book makes it easy to read cover to cover in one sitting. (January 31, 2017)


Great book for beginners
Great book so far. I'm about 25% in and it's already paid off in my React class. Love the friendly writing style, the easy-to-understand code snippets, and the well written explanations. Great job.(January 26, 2018)


Skip the command line and learn how to build React apps first
I'm learning React (after learning many other languages over the years). This is the single best book I've read to get started with a new language! The author has a terrific sense of humor and a logical progression from front to back. What had been the bane of my existence for React - dealing with setup of Node.js using the command line interface and the many issues I had getting done - he eliminated and put toward the end of the book. I actually got to enjoy going through the book, and try it all out before dealing with the command line. Talk about getting off to a good start! I still have a lot to learn, but I feel confident that I can learn what I need to know. (March 23, 2018)


A really great way to learn the fundamentals of ReactJS
A really great way to learn the fundamentals of ReactJS. This books really breaks it down barney style and teaches you how to write react with JSX; which is the easiest way to learn the JS library. Buy this book if you are willing to learn the JS library. (September 14, 2017)

From the Publisher