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