Learning React

Learning React A hands-on guide to building maintainable, high-performing web application user interfaces using the React JavaScript library 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 you understand the fundamentals of React and how to use it to build really performant (and awesome) apps. 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 Contents at a Glance Chapter 1  Introducing React  Chapter 2  Building Your First React App  Chapter 3  Components in React Chapter 4  Styling in React Chapter 5  Creating Complex Components Chapter 6  Transferring Properties (Props)  Chapter 7  Meet JSX–Again! Chapter 8  Dealing with State Chapter 9  Going from Data to UI Chapter 10  Working with Events Chapter 11  The Component Lifecycle Chapter 12  Accessing DOM Elements  Chapter 13  Creating a Single-Page App Using React Router Chapter 14  Building a Todo List App  Chapter 15  Setting Up Your React Development Environment Chapter 16  The End Chapter 17 (Web Edition) Working With External Data Chapter 18 (Web Edition) Creating a Sliding Menu Using React Motion Register your book at informit.com/register for free access to the Web Edition and two exclusive bonus chapters.

Table of Contents:
Chapter 1  Introducing React  Old School Multi-Page 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 Chapter 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! Chapter 3  Components in React A Quick Review of Functions Changing How We Deal with the UI Meet the React Component     Creating a Hello, World! Component     Specifying Properties     Dealing with Children Chapter 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     You Can Omit the “px” Suffix     Making the Background Color Customizable Chapter 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  Chapter 6  Transferring Properties (Props)  Problem Overview  Detailed Look at the Problem  Meet the Spread Operator Properly Transferring Properties Chapter 7  Meet JSX–Again! What Happens with JSX? JSX Quirks to Remembe     You Can Only Return A Single Root Node     You Can’t Specify CSS Inline         Reserved Keywords and className Comments     Capitalization, HTML Elements, and Components     Your JSX Can Be Anywhere Chapter 8  Dealing with State 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 Conclusion Chapter 9  Going from Data to UI The Example Your JSX Can Be Anywhere–Part II Dealing with Arrays in the Context of JSX Chapter 10  Working with Events Listening and Reacting to Events     Starting Point     Making the Button Click Do Something     Event Properties     Doing Stuff With Event Properties     More Eventing Shenanigans     Listening to Regular DOM Events     The Meaning of this Inside the Event Handler React...Why? Why?!     Browser Compatibility     Improved Performance Chapter 11  The Component Lifecycle Meet the Lifecycle Methods     See the Lifecycle Methods in Action     The Initial Rendering Phase     The Updating Phase     The Unmounting Phase Chapter 12  Accessing DOM Elements  Meet Refs Chapter 13  Creating a Single-Page App Using React Router The Example Building the App      Displaying the Initial Frame       Displaying the Home Page     Interim Cleanup Time     Displaying the Home Page Correctly      Creating the Navigation Links     Adding the Stuff and Contact Views     Creating Active Links  Chapter 14  Building a Todo List App  Getting Started  Creating the UI  Creating the Functionality     Initializing our State Object      Handling the Form Submit      Populating Our State      Displaying the Tasks      Adding the Finishing Touches  Chapter 15  Setting Up Your React Development Environment Meet the Tools     Node.js         Babel       webpack     Your Code Editor  It Is Environment Setup Time!     Setting up our Initial Project Structure      Installing and Initializing Node.js     Installing the React Dependencies     Adding our JSX File     Going from JSX to JavaScript      Building and Testing Our App  Chapter 16  The End