Learning React

Learning ReactA 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 ReactChapter 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 EndChapter 17 (Web Edition) Working With External DataChapter 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.

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