Learning React: A Hands-on Guide To Building Web Applications Using React And Redux Hands-on Guide To Building Web Applications Using React And Redux

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 Cover 1 Half Title 2 Title Page 4 Copyright Page 5 Dedication 7 Contents 9 1 Introducing React 16 Old-School Multipage Design 17 New-School Single-Page Apps 18 Meet React 21 Automatic UI State Management 22 Lightning-Fast DOM Manipulation 22 APIs to Create Truly Composable UIs 23 Visuals Defined Entirely in JavaScript 25 Just the V in an MVC Architecture 27 Conclusion 27 2 Building Your First React App 28 Dealing with JSX 29 Getting Your React On 31 Displaying Your Name 32 It’s All Still Familiar 34 Changing the Destination 34 Styling It Up! 35 Conclusion 37 3 Components in React 38 Quick Review of Functions 39 Changing How We Deal with UI 41 Meet the React Component 43 Creating a Hello, World! Component 44 Specifying Properties 47 First Part: Updating the Component Definition 48 Second Part: Modifying the Component Call 48 Dealing with Children 49 Conclusion 50 4 Styling in React 52 Displaying Some Vowels 52 Styling React Content Using CSS 55 Understand the Generated HTML 55 Just Style It Already! 56 Styling Content the React Way 57 Creating a Style Object 57 Actually Styling Our Content 58 Making the Background Color Customizable 60 Conclusion 61 5 Creating Complex Components 62 From Visuals to Components 62 Identifying the Major Visual Elements 64 Identifying the Components 66 Creating the Components 69 The Card Component 71 The Square Component 73 The Label Component 74 Passing Properties, Again! 76 Why Component Composability Rocks 78 Conclusion 79 6 Transferring Properties 80 Problem Overview 80 Detailed Look at the Problem 84 Meet the Spread Operator 89 A Better Way to Transfer Properties 90 Conclusion 92 7 Meet JSX...Again! 94 What Happens with JSX? 94 JSX Quirks to Remember 96 Evaluating Expressions 96 Returning Multiple Elements 97 You Can’t Specify CSS Inline 98 Comments 99 Capitalization, HTML Elements, and Components 100 Your JSX Can Be Anywhere 101 Conclusion 101 8 Dealing with State in React 102 Using State 102 Our Starting Point 103 Getting Our Counter On 105 Setting the Initial State Value 106 Starting Our Timer and Setting State 107 Rendering the State Change 110 Optional: The Full Code 110 Conclusion 112 9 Going from Data to UI in React 114 The Example 114 Your JSX Can Be Anywhere, Part II 117 Dealing with Arrays 118 Conclusion 120 10 Events in React 122 Listening and Reacting to Events 122 Starting Point 123 Making the Button Click Do Something 125 Event Properties 127 Meet Synthetic Events 128 Doing Stuff with Event Properties 129 More Eventing Shenanigans 130 You Can’t Directly Listen to Events on Components 131 Listening to Regular DOM Events 133 The Meaning of this Inside the Event Handler 134 React...Why? Why? 135 Browser Compatibility 135 Improved Performance 135 Conclusion 136 11 The Component Lifecycle 138 Meet the Lifecycle Methods 138 See the Lifecycle Methods in Action 139 The Initial Rendering Phase 143 Getting the Default Props 143 Getting the Default State 144 componentWillMount 144 render 144 componentDidMount 144 The Updating Phase 145 Dealing with State Changes 145 shouldComponentUpdate 146 componentWillUpdate 146 render 146 componentDidUpdate 146 Dealing with Prop Changes 147 The Unmounting Phase 147 Conclusion 148 12 Accessing DOM Elements in React 150 The Colorizer Example 152 Meet Refs 155 Using Portals 158 Conclusion 163 13 Setting Up Your React Dev Environment Easily 164 Meet Create React 167 Making Sense of What Happened 169 Creating Our HelloWorld App 173 Creating a Production Build 176 Conclusion 177 14 Working with External Data in React 178 Web Request 101 181 It’s React Time! 182 Getting Started 183 Getting the IP Address 184 Kicking the Visuals Up a Notch 187 Conclusion 191 15 Building an Awesome Todo List App in React 192 Getting Started 194 Creating the Initial UI 195 Building the Rest of the App 197 Adding Items 198 Displaying the Items 201 Styling our App 204 Removing Items 206 Animation! Animation! Animation! 209 Conclusion 210 16 Creating a Sliding Menu in React 212 How the Sliding Menu Works 212 Setting Up the Sliding Menu 216 Getting Started 217 Showing and Hiding the Menu 220 Creating the Button 221 Creating the Menu 222 Conclusion 225 17 Avoiding Unnecessary Renders in React 226 About the render Method 226 Optimizing render Calls 228 Getting an Example Going 228 Seeing the render Calls 231 Overriding a Component Update 233 Using PureComponent 235 Conclusion 237 18 Creating a Single-Page App in React Using React Router 238 The Example 239 Getting Started 240 Building Our Single-Page App 242 Displaying the Initial Frame 242 Creating Our Content Pages 243 Using React Router 245 It’s the Little Things 248 Fixing Our Routing 248 Adding Some CSS 248 Highlighting the Active Link 250 Conclusion 251 19 Introduction to Redux 252 What Is Redux? 253 Building a Simple App Using Redux 258 It’s Redux Time 258 Lights! Camera! Action! 259 Our Reducer 260 Store Stuff 262 Conclusion 263 20 Using Redux with React 264 Managing React State with Redux 271 How Redux and React Overlap 272 Getting Started 274 Building the App 275 Conclusion 281 Index 282 A 282 B 284 C 285 D 289 E 289 F 290 G 291 H 292 I 292 J 293 K 293 L 293 M 294 N 295 O 295 P 296 Q-R 296 S 298 T 300 U 300 V 301 W-X-Y-Z 301 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. -- Provided by publisher