Learning React

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