Learning React
A Hands-On Guide to Building Web Applications Using React and Redux
2nd Edition
Published on 26. April 2018
240 pages
978-0-13-484356-8 (ISBN)
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
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
More details
Series
Edition
2nd edition
Language
English
Place of publication
Boston
United States
Publishing group
Pearson Education (US)
Target group
College/higher education
File size
4,97 MB
ISBN-13
978-0-13-484356-8 (9780134843568)
Copyright in bibliographic data and cover images is held by Nielsen Book Services Limited or by the publishers or by their respective licensors: all rights reserved.
Schweitzer Classification
Other editions
Additional editions
Kirupa Chinnathambi
Learning React
A Hands-On Guide to Building Web Applications Using React and Redux
Book
08/2018
2nd Edition
Addison Wesley
€37.50
Shipment within 15-20 days
Person
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 (kirupa@kirupa.com). Feel free to contact him anytime.
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 (kirupa@kirupa.com). Feel free to contact him anytime.
Content
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
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
