Learning React Modern Patterns for Developing React Apps (Eve Porcello, Alex Banks) (Z-Library)

📄 File Format: PDF

💾 File Size: 4.7 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

1. Preface a. Conventions Used in This Book b. Using Code Examples c. O’Reilly Online Learning d. How to Contact Us e. Acknowledgments 2. 1. Welcome to React a. A Strong Foundation b. React’s Past and Future i. Learning React: Second Edition Changes c. Working with the Files i. File Repository ii. React Developer Tools iii. Installing Node.js 3. 2. JavaScript for React a. Declaring Variables i. The const Keyword ii. The let Keyword iii. Template Strings b. Creating Functions i. Function Declarations

📄 Page 3

ii. Function Expressions iii. Default Parameters iv. Arrow Functions c. Compiling JavaScript d. Objects and Arrays i. Destructuring Objects ii. Destructuring Arrays iii. Object Literal Enhancement iv. The Spread Operator e. Asynchronous JavaScript i. Simple Promises with Fetch ii. Async/Await iii. Building Promises f. Classes g. ES6 Modules i. CommonJS 4. 3. Functional Programming with JavaScript a. What It Means to Be Functional b. Imperative Versus Declarative c. Functional Concepts i. Immutability ii. Pure Functions

📄 Page 4

iii. Data Transformations iv. Higher-Order Functions v. Recursion vi. Composition vii. Putting It All Together 5. 4. How React Works a. Page Setup b. React Elements c. ReactDOM i. Children d. React Components i. React Components: A Historical Tour 6. 5. React with JSX a. React Elements as JSX i. JSX Tips ii. Mapping Arrays with JSX b. Babel c. Recipes as JSX d. React Fragments e. Intro to webpack i. Creating the Project ii. Loading the Bundle

📄 Page 5

iii. Source Mapping iv. Create React App 7. 6. React State Management a. Building a Star Rating Component b. The useState Hook c. Refactoring for Advanced Reusability d. State in Component Trees i. Sending State Down a Component Tree ii. Sending Interactions Back up a Component Tree e. Building Forms i. Using Refs ii. Controlled Components iii. Creating Custom Hooks iv. Adding Colors to State f. React Context i. Placing Colors in Context ii. Retrieving Colors with useContext iii. Stateful Context Providers iv. Custom Hooks with Context 8. 7. Enhancing Components with Hooks a. Introducing useEffect

📄 Page 6

i. The Dependency Array ii. Deep Checking Dependencies iii. When to useLayoutEffect iv. Rules to Follow with Hooks v. Improving Code with useReducer vi. useReducer to Handle Complex State vii. Improving Component Performance viii. shouldComponentUpdate and PureComponent ix. When to Refactor 9. 8. Incorporating Data a. Requesting Data i. Sending Data with a Request ii. Uploading Files with fetch iii. Authorized Requests iv. Saving Data Locally v. Handling Promise States b. Render Props c. Virtualized Lists i. Creating a Fetch Hook ii. Creating a Fetch Component iii. Handling Multiple Requests iv. Memozing Values

📄 Page 7

v. Waterfall Requests vi. Throttling the Network Speed vii. Parallel Requests viii. Waiting for Values ix. Canceling Requests d. Introducing GraphQL i. GitHub GraphQL API ii. Making a GraphQL Request 10. 9. Suspense a. Error Boundaries b. Code Splitting i. Introducing: The Suspense Component ii. Using Suspense with Data iii. Throwing Promises iv. Building Suspenseful Data Sources v. Fiber 11. 10. React Testing a. ESLint i. ESLint Plug-Ins b. Prettier i. Configuring Prettier by Project ii. Prettier in VSCode

📄 Page 8

c. Typechecking for React Applications i. PropTypes ii. Flow iii. TypeScript d. Test-Driven Development i. TDD and Learning e. Incorporating Jest i. Create React App and Testing f. Testing React Components i. Queries ii. Testing Events iii. Using Code Coverage 12. 11. React Router a. Incorporating the Router b. Router Properties i. Nesting Routes c. Using Redirects i. Routing Parameters 13. 12. React and the Server a. Isomorphic Versus Universal i. Client and Server Domains b. Server Rendering React

📄 Page 9

c. Server Rendering with Next.js d. Gatsby e. React in the Future 14. Index

📄 Page 10

Learning React SECOND EDITION Modern Patterns for Developing React Apps Alex Banks and Eve Porcello

📄 Page 11

Learning React by Alex Banks and Eve Porcello Copyright © 2020 Alex Banks and Eve Porcello. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com. Acquisitions Editor: Jennifer Pollock Development Editor: Angela Rufino Production Editor: Kristen Brown Copyeditor: Holly Bauer Forsyth Proofreader: Abby Wheeler Indexer: Judith McConville Interior Designer: David Futato Cover Designer: Karen Montgomery

📄 Page 12

Illustrator: Rebecca Demarest May 2017: First Edition June 2020: Second Edition Revision History for the Second Edition 2020-06-12: First Release See http://oreilly.com/catalog/errata.csp?isbn=9781492051725 for release details. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Learning React, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc. The views expressed in this work are those of the authors, and do not represent the publisher’s views. While the publisher and the authors have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the authors disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights. 978-1-492-05172-5

📄 Page 13

[LSI]

📄 Page 14

Preface This book is for developers who want to learn the React library while learning the latest techniques currently emerging in the JavaScript language. This is an exciting time to be a JavaScript developer. The ecosystem is exploding with new tools, syntax, and best practices that promise to solve many of our development problems. Our aim with this book is to organize these techniques so you can get to work with React right away. We’ll get into state management, React Router, testing, and server rendering, so we promise not to introduce only the basics and then throw you to the wolves. This book does not assume any knowledge of React at all. We’ll introduce all of React’s basics from scratch. Similarly, we won’t assume that you’ve worked with the latest JavaScript syntax. This will be introduced in Chapter 2 as a foundation for the rest of the chapters. You’ll be better prepared for the contents of the book if you’re comfortable with HTML, CSS, and JavaScript. It’s almost always best to be comfortable with these big three before diving into a JavaScript library. Along the way, check out the GitHub repository. All of the examples are there and will allow you to practice hands-on. Conventions Used in This Book

📄 Page 15

The following typographical conventions are used in this book: Italic Indicates new terms, URLs, email addresses, filenames, and file extensions. Constant width Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords. Constant width bold Shows commands or other text that should be typed literally by the user. TIP This element signifies a tip or suggestion. NOTE This element signifies a general note. WARNING This element indicates a warning or caution.

📄 Page 16

Using Code Examples Supplemental material (code examples, exercises, etc.) is available for download at https://github.com/moonhighway/learning-react. If you have a technical question or a problem using the code examples, please send email to bookquestions@oreilly.com. This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission. We appreciate, but generally do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Learning React by Alex Banks and Eve Porcello (O’Reilly). Copyright 2020 Alex Banks and Eve Porcello, 978-1-492-05172-5.” If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions@oreilly.com. O’Reilly Online Learning

📄 Page 17

NOTE For more than 40 years, O’Reilly Media has provided technology and business training, knowledge, and insight to help companies succeed. Our unique network of experts and innovators share their knowledge and expertise through books, articles, and our online learning platform. O’Reilly’s online learning platform gives you on-demand access to live training courses, in-depth learning paths, interactive coding environments, and a vast collection of text and video from O’Reilly and 200+ other publishers. For more information, visit http://oreilly.com. How to Contact Us Please address comments and questions concerning this book to the publisher: O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 800-998-9938 (in the United States or Canada) 707-829-0515 (international or local) 707-829-0104 (fax) We have a web page for this book, where we list errata, examples, and

📄 Page 18

any additional information. You can access this page at https://oreil.ly/learningReact_2e. Email bookquestions@oreilly.com to comment or ask technical questions about this book. For news and information about our books and courses, visit http://oreilly.com. Find us on Facebook: http://facebook.com/oreilly Follow us on Twitter: http://twitter.com/oreillymedia Watch us on YouTube: http://www.youtube.com/oreillymedia Acknowledgments Our journey with React wouldn’t have started without some good old- fashioned luck. We used YUI when we created the training materials for the full-stack JavaScript program we taught internally at Yahoo. Then in August 2014, development on YUI ended. We had to change all our course files, but to what? What were we supposed to use on the front-end now? The answer: React. We didn’t fall in love with React immediately; it took us a couple hours to get hooked. It looked like React could potentially change everything. We got in early and got really lucky. We appreciate the help of Angela Rufino and Jennifer Pollock for all the support in developing this second edition. We also want to

📄 Page 19

acknowledge Ally MacDonald for all her editing help in the first edition. We’re grateful to our tech reviewers, Scott Iwako, Adam Rackis, Brian Sletten, Max Firtman, and Chetan Karande. There’s also no way this book could have existed without Sharon Adams and Marilyn Messineo. They conspired to purchase Alex’s first computer, a Tandy TRS 80 Color Computer. It also wouldn’t have made it to book form without the love, support, and encouragement of Jim and Lorri Porcello and Mike and Sharon Adams. We’d also like to acknowledge Coffee Connexion in Tahoe City, California, for giving us the coffee we needed to finish this book, and its owner, Robin, who gave us the timeless advice: “A book on programming? Sounds boring!”

📄 Page 20

Chapter 1. Welcome to React What makes a JavaScript library good? Is it the number of stars on GitHub? The number of downloads on npm? Is the number of tweets that ThoughtLeaders™ write about it on a daily basis important? How do we pick the best tool to use to build the best thing? How do we know it’s worth our time? How do we know it’s good? When React was first released, there was a lot of conversation around whether it was good, and there were many skeptics. It was new, and the new can often be upsetting. To respond to these critiques, Pete Hunt from the React team wrote an article called “Why React?” that recommended that you “give it [React] five minutes.” He wanted to encourage people to work with React first before thinking that the team’s approach was too wild. Yes, React is a small library that doesn’t come with everything you might need out of the box to build your application. Give it five minutes. Yes, in React, you write code that looks like HTML right in your JavaScript code. And yes, those tags require preprocessing to run in a browser. And you’ll probably need a build tool like webpack for that. Give it five minutes. As React approaches a decade of use, a lot of teams decided that it’s