React và React Native của tác giả Roy Derks là thư viện Giao diện người dùng (UI) sáng tạo của Facebook. Nó được thiết kế để giúp bạn xây dựng các ứng dụng di động và web đa nền tảng mạnh mẽ. Cuốn sách đặc biệt tập trung vào những phát triển mới nhất trong hệ sinh thái React; ví dụ như triển khai Hook hiện đại. Bạn sẽ bắt đầu bằng cách tìm hiểu về các khối xây dựng cơ bản của các thành phần React. Sau đó, sẽ tiến tới làm việc với các chức năng cấp cao hơn trong phát triển ứng dụng. Trong phần kết luận, sách sẽ hướng dẫn bạn cách kết hợp ứng dụng của mình với một kiến trúc dữ liệu mạnh mẽ. Tham khảo tài liệu React Native này, bạn sẽ có thể xây dựng các ứng dụng React cho web và các ứng dụng React Native cho nhiều nền tảng di động. React and React Native phù hợp cho cả những người mới học và cả những người đã có kinh nghiệm. Tài liệu được chia thành 3 phần, bạn hoàn toàn có thể bắt đầu với mục mà mình hứng thú và bỏ qua những thông tin đã biết. Đặc biệt, cuốn sách này không yêu cầu kiến thức nền tảng về React.
React and React Native Third Edition A complete hands-on guide to modern web and mobile development with React.js Adam Boduch Roy Derks BIRMINGHAM - MUMBAI React and React Native Third Edition Copyright © 2020 Packt Publishing All rights reserved No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews Every effort has been made in the preparation of this book to ensure the accuracy of the information presented However, the information contained in this book is sold without warranty, either express or implied Neither the authors, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals However, Packt Publishing cannot guarantee the accuracy of this information Commissioning Editor: Ashwin Nair Acquisition Editor: Ashitosh Gupta Content Development Editor: Divya Vijayan Senior Editor: Hayden Edwards Technical Editor: Shubham Sharma Copy Editor: Safis Editing Project Coordinator: Kinjal Bari Proofreader: Safis Editing Indexer: Tejal Daruwale Soni Production Designer: Nilesh Mohite First published: March 2017 Second edition: September 2018 Third edition: April 2020 Production reference: 1290420 Published by Packt Publishing Ltd Livery Place 35 Livery Street Birmingham B3 2PB, UK ISBN 978-1-83921-114-0 www.packt.com Packt.com Subscribe to our online digital library for full access to over 7,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career For more information, please visit our website Why subscribe? Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals Improve your learning with Skill Plans built especially for you Get a free eBook or video every month Fully searchable for easy access to vital information Copy and paste, print, and bookmark content Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.packt.com and as a print book customer, you are entitled to a discount on the eBook copy Get in touch with us at customercare@packtpub.com for more details At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks Contributors About the authors Adam Boduch has been involved in large-scale JavaScript development for nearly 10 years Before moving to the frontend, he worked on several large-scale cloud computing products using Python and Linux No stranger to complexity, Adam has practical experience with real-world software systems and the scaling challenges they pose He is the author of several JavaScript and React books and is passionate about innovative user experiences and high performance Roy Derks is a serial start-up CTO, conference speaker, and developer from Amsterdam He has been actively programming since he was a teenager, starting as a self-taught programmer using online tutorials and books At the age of 14, he founded his first startup, a peer-to-peer platform where users could trade DVDs with other users for free This marked the start of his career in web development, which back then primarily consisted of creating web applications using an MVC architecture with the LAMP stack In 2015, he was introduced to React and GraphQL at a hackathon in Berlin, and after winning a prize for his project, he started to use these technologies professionally Over the next few years, he helped multiple start-ups create cross-platform applications using React and React Native, including a start-up that he co-founded He also started giving workshops and talks at conferences around the globe In 2019, he gave over 20 conference talks about React, React Native, and GraphQL, inspiring over 10,000 developers worldwide About the reviewers Emmanuel Demey works with the JavaScript ecosystem on a daily basis He spends his time sharing his knowledge with anyone and everyone His first goal at work is to help the people he works with He has spoken at numerous French conferences (including Devfest Nantes, Devfest Toulouse, Sunny Tech, and Devoxx France) about topics related to the web platform, such as JavaScript frameworks (Angular, React.js, and Vue.js), accessibility, and Nest.js He has been a trainer for 10 years at Worldline and Zenika (two French consulting companies) He is also the co-leader of the Google Developer Group de Lille and the coorganizer of the Devfest Lille conference Atul Sandilya Tiwari is working as Mobile Application Development Engineer since 2014 He has worked as a Software Engineer in several Silicon Valley startups He has also been working as a React Native Development Engineer since 2017 Packt is searching for authors like you If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea Table of Contents Preface Section 1: React Chapter 1: Why React? What is React? React is just the view layer Simplicity is good Declarative UI structures Time and data Performance matters The right level of abstraction React Features Revamped core architecture Lifecycle methods The Context API Rendering fragments Portals Rendering lists and strings Handling errors Server-side rendering What's new in React? Memoizing functional components Code splitting and loading Hooks Summary Further reading Chapter 2: Rendering with JSX Technical requirements Your first JSX content Hello JSX Declarative UI structures Rendering HTML Built-in HTML tags HTML tag conventions Describing UI structures Creating your own JSX elements Encapsulating HTML Nested elements 9 10 11 12 12 13 15 16 17 17 17 18 18 18 19 19 20 20 20 21 21 22 23 23 23 24 24 25 25 26 27 28 28 30 Table of Contents Namespaced components Using JavaScript expressions Dynamic property values and text Mapping collections to elements Fragments of JSX Using wrapper elements Using fragments Summary Further reading Chapter 3: Component Properties, State, and Context Technical requirements What is component state? What are component properties? Setting a component state Setting an initial component state Creating a component state Merging the component state Passing property values Default property values Setting property values Stateless components Pure functional components Defaults in functional components Container components Providing and consuming context Summary Further reading Chapter 4: Getting Started with Hooks Technical requirements Maintaining state using Hooks Initial state values Updating state values Performing initialization and cleanup actions Fetching component data Canceling requests and resetting state Optimizing side-effect actions Sharing data using context Hooks Sharing fetched data Updating stateful context data Using reducer Hooks to scale state management Using reducer actions Handling state dependencies Summary [ ii ] 31 33 34 35 36 37 38 39 40 41 42 42 43 44 44 45 47 49 50 51 53 53 55 55 57 61 61 62 62 62 63 64 66 66 68 72 73 74 78 81 82 84 90 Table of Contents Chapter 5: Event Handling - The React Way Technical requirements Declaring event handlers Declaring handler functions Multiple event handlers Importing generic handlers Using event handler context and parameters Getting component data Higher-order event handlers Declaring inline event handlers Binding handlers to elements Using synthetic event objects Understanding event pooling Summary Further reading Chapter 6: Crafting Reusable Components Technical requirements Reusable HTML elements The difficulty with monolithic components The JSX markup Initial state Event handler implementation Refactoring component structures Starting with the JSX Implementing an article list component Implementing an article item component Implementing an add article component Making components functional Render props Refactoring class components using Hooks Rendering component trees Feature components and utility components Summary Further reading Chapter 7: The React Component Life Cycle Technical requirements Why components need a life cycle Initializing properties and state Fetching component data Initializing state with properties Updating state with properties Optimizing rendering efficiency [ iii ] 91 91 92 92 93 93 95 95 97 99 99 100 101 103 103 104 105 105 105 106 108 109 111 111 113 115 116 118 120 122 126 127 128 128 129 129 130 131 131 134 136 138 Table of Contents To render or not to render Using metadata to optimize rendering Rendering imperative components Rendering jQuery UI widgets Cleaning up after components Cleaning up asynchronous calls Containing errors with error boundaries Summary Further reading Chapter 8: Validating Component Properties Technical requirements Knowing what to expect Promoting portable components Simple property validators Basic type validation Requiring values Any property value Type and value validators Things that can be rendered Requiring specific types Requiring specific values Writing custom property validators Summary Further reading Chapter 9: Handling Navigation with Routes Technical requirements Declaring routes Hello route Decoupling route declarations Parent and child routes Handling route parameters Resource IDs in routes Optional parameters Using link components Basic linking URL and query parameters Summary Further reading Chapter 10: Code Splitting Using Lazy Components and Suspense Technical requirements Using the lazy API Dynamic imports and bundles [ iv ] 139 142 143 144 146 147 149 153 154 155 155 156 156 157 157 160 163 164 165 166 168 170 172 172 173 173 174 174 175 177 179 179 184 186 187 188 190 190 191 192 192 192 Building an Apollo React App Chapter 28 The Mutation component needs a mutation, which is the ADD_TODO mutation that you can find in the constants.js file: export const ADD_TODO = gql` mutation AddTodo($text: String) { addTodo(text: $text) { id } } `; This mutation takes just one variable, which you can pass to the mutation by using the addTodo callback function that was returned by the Mutation component You can call this function when the user submits something in the input field in the TodoInput component: {addTodo => ( addTodo({ variables: { text } }) } /> )} When the mutation has been sent to the GraphQL backend, this same component can be used to refetch any queries that are defined in your application If a new todo is added using the mutation, you want your user to see the new list of todos by refetching the GET_USER query from the App component To refetch a query, you can pass a value for refetchQueries to the Mutation component: [ 476 ] Building an Apollo React App Chapter 28 Let's see what the application looks like so far: The input field for adding new todo items is just above the list of todo items Now, let's look at the TodoList component, which is responsible for rendering the todo item list [ 477 ] Building an Apollo React App Chapter 28 Rendering todo items It's the job of the TodoList component to render the todo list items When the GET_USER query takes place, the TodoList component needs to be able to render all the todo items Here's a look at the item list again, with several more todos added: Here's the TodoList component itself: import React, { Component } from 'react'; import { View } from 'react-native'; import Todo from './Todo'; class TodoList extends Component { render() { const { user } = this.props; return ( {user.todos.map(todo => ( [ 478 ] Building an Apollo React App Chapter 28 ))} ); } } export default TodoList The relevant GraphQL query to get the data you need for this component is already executed in the App component This component, therefore, doesn't need to send a query to the GraphQL backend itself and can render the todos that were passed to it When you render the component, you're passing it the todo data Now, let's see what the Todo component looks like Completing todo items The last piece of this application is rendering each todo item and providing the ability to change the status of the todo in the Todo component Let's take a look at this code: import React, { Component } from 'react'; import { Text, View, Switch } from 'react-native'; import { Mutation } from '@apollo/react-components'; import styles from './styles'; import { CHANGE_TODO_STATUS, GET_USER } from ' /constants'; const completeStyleMap = new Map([ [true, { textDecorationLine: 'line-through' }], [false, {}], ]); class Todo extends Component { render() { const { todo: { id, text, complete }, } = this.props; return ( {changeTodoStatus => ( changeTodoStatus({ variables: { id, complete: value } }) } /> {text} )} ); } } export default Todo; The actual component that's rendered by the Todo component is a switch control and the item text When the user marks the todo as complete, the item text is styled as crossed off The user can also uncheck items These components are wrapped in a Mutation component, which is using the CHANGE_TODO_STATUS mutation from the constants.js file: export const CHANGE_TODO_STATUS = gql` mutation ChangeTodoStatus($id: Int!, $complete: Boolean) { changeTodoStatus(id: $id, complete: $complete) { id complete } } `; Based on the id component of the todo item, this mutation sends the request to the GraphQL backend to change the todo state The GraphQL backend then talks to any services that are needed to make this happen Then, it will refetch the GET_USER query to get the new list of todos, including the one you've just updated That's all for the React Native implementation of the Todo app, but if you head over to the web example, you can find even more code examples In the native application, we've only used a number of queries and mutations, but the web version features more [ 480 ] Building an Apollo React App Chapter 28 Summary In this chapter, you implemented some specific Apollo Client and GraphQL ideas Starting with the GraphQL schema, you learned how to declare the data that's used by the application and how these data types resolve to specific data sources, such as microservice endpoints Then, you learned about bootstrapping GraphQL queries with Apollo Client in your React Native app Next, you walked through the specifics of adding, changing, and listing todo items The application itself uses the same schema as the web version of the Todo application, which makes things much easier when you're developing web and native React applications Well, that's a wrap for this book We've gone over a lot of material together and I hope that you've learned as much from reading it as I have from writing it If there is one theme from this book that you should walk away with, it's that React is simply a rendering abstraction As new rendering targets emerge, new React libraries will emerge as well As developers think of novel ways to deal with state at scale, you'll see new techniques and libraries released My hope is that you're now well prepared to work in this rapidly evolving React ecosystem [ 481 ] Other Books You May Enjoy If you enjoyed this book, you may be interested in these other books by Packt: ASP.NET Core and React Carl Rippon ISBN: 978-1-78995-022-9 Build RESTful APIs with NET Core using API controllers Create strongly typed, interactive, and function-based React components using Hooks Build forms efficiently using reusable React components Perform client-side state management with Redux and the React Context API Secure REST APIs with ASP.NET identity and authorization policies Run a range of automated tests on the frontend and backend Implement continuous integration (CI) and continuous delivery (CD) processes into Azure using Azure DevOps Other Books You May Enjoy React Projects Roy Derks ISBN: 978-1-78995-493-7 Create a wide range of applications using various modern React tools and frameworks Discover how React Hooks modernize state management for React apps Develop progressive web applications using React components Build test-driven React applications using the Jest and Enzyme frameworks Understand full stack development using React, Apollo, and GraphQL Perform server-side rendering using React and React Router Design gestures and animations for a cross-platform game using React Native [ 483 ] Other Books You May Enjoy Leave a review - let other readers know what you think Please share your thoughts on this book with others by leaving a review on the site that you bought it from If you purchased the book from Amazon, please leave us an honest review on this book's Amazon page This is vital so that other potential readers can see and use your unbiased opinion to make purchasing decisions, we can understand what our customers think about our products, and our authors can see your feedback on the title that they have worked with Packt to create It will only take a few minutes of your time, but is valuable to other potential customers, our authors, and Packt Thank you! [ 484 ] Index A abstraction 15 activity modals implementing 379, 380, 381 alerts 365 Android versus iOS 246 annotations 342 any property validator 163, 164 Apollo Client about 460, 468 bootstrapping 470, 471, 473, 474 Apollo about 460 versus Redux 460 App component 449, 451, 452 application containers 424, 425, 426 application data storing 413, 414, 415 synchronizing 416, 418, 419, 420 application state mutating 464, 466 article list component implementing 115 asynchronous calls cleaning up 147, 148, 149 B backend routing 208, 209, 210, 211 bundles 192, 193 buttons working with 235, 237 C cancellable behavior implementing 389, 391, 392, 393 checkboxes 232, 233 child route 177, 178, 179 class components refactoring, with Hooks 122, 124, 125, 126 cleanup actions 66 code splitting reference link 21 component data fetching 66, 67, 68, 131, 132, 133, 134 component properties 43 component state about 42 creating 45, 46, 47 initial component state, setting 44, 45 merging 47, 48, 49 setting 44 component structures, refactoring about 111 add article component, implementing 116, 117 article item component, implementing 115, 116 article list component, implementing 113, 114 components, making functional 118, 120 JSX 111, 112 component trees rendering 126, 127 components asynchronous calls, cleaning up 147, 148, 149 cleaning up 146 layout 220 life cycle 130, 131 container components 55, 56, 57 context API reference link 18 context Hooks used, for sharing data 73 contexts consuming 57, 58, 59, 60 providing 57, 58, 59, 60 custom property validators writing 170, 171, 172 used, for viewing React Native apps on virtual device 257, 259, 260 F D data collections rendering 307, 308, 309 data fetching 214, 215, 216, 217 sharing, with context Hooks 73 date/time input collecting 358, 360, 361, 362 declarative data fetching 461, 463, 464 declarative programming 12 declarative UI structures 24, 25 default property values 50 defensive code 157 Document Object Model (DOM) 13, 243 drawer navigation 294, 295, 297 drawers using, for navigation 225, 227, 229 dynamic imports 192, 193 E elements handlers, binding to 99, 100 error boundaries errors, containing with 149, 150, 151, 152, 153 reference link 19 error confirmation 371, 372, 373, 375 event handlers component data, obtaining 95, 97 contexts 95 declaring 92 functions, declaring 92 multiple event handlers 93 parameters 95 event pooling 101, 102 event property names reference link 92 Expo command-line tool installing 250, 251 using 250, 251 Expo Snack URL 258 fail fast 156 feature components 127, 128 fetched data sharing 74, 75, 76, 77 Flexbox layouts building 266 flexible grids 275, 276, 278 flexible rows 273, 275 flexible rows and columns 278, 280, 281 improved three-column layout 270, 271 simple three-column layout 267, 269 Flexbox about 263 URL 263 Flux about 444, 446 predictable state transformations 445 synchronous update rounds 445 unidirectional data flow 444 footers 428 form components used, for collecting inputs 434, 435, 436, 437 Fragment 461 fragments reference link 18 frontend reconciliation 211, 212, 214 functional components defaults 55 G generic handlers importing 93, 95 geolocation API about 338 example 339, 340 GraphQL schema 469, 470 GraphQL about 461 versus Redux 460 [ 486 ] H handlers binding, to elements 99, 100 headers 428, 430 Hello JSX 24 higher-order event handlers 97, 98 higher-order function 97 Home component 452, 455 Hooks reference link 21 used, for maintaining state 62 used, for refactoring class components 122, 124, 125, 126 HTML tag built-in HTML tag 25 conventions 26, 27 HTML encapsulating 28, 29 rendering 25 I icons rendering 405, 406, 407 images loading 396, 397 resizing 398, 399, 400, 401 imperative components rendering 143 imperative programming 12 information architecture about 444 scaling 457 initial state values 63 initialization performing 66 inline event handlers declaring 99 iOS versus Android 246 isomorphic JavaScript about 203 code sharing, between backend and frontend 205, 206 initial load performance 204, 205 server, using as render target 204 J JavaScript expressions collections, mapping to elements 35, 36 dynamic property values 34 text values 34 using 33 JavaScript XML (JSX) about 12 versus React 245 jQuery UI widgets rendering 144, 145, 146 JSX content 23 JSX elements creating 28 namespaced components 31, 33 nested elements 30, 31 JSX fragments about 36, 37 using 38, 39 wrapper elements, using 37 L layout components using 431, 432, 433 lazy API using 192 lazy component about 193, 194 avoiding, scenarios 198, 199, 200 lazy image loading 402, 403, 404, 405 lazy list loading 318, 319 lazy pages 200, 201, 202 lazy routes 200, 201, 202 lifecycle methods, React 16 reference link 17 link components query parameter 188, 189 URL parameter 188, 189 using 186 links 187 list data fetching 316, 317 list of options [ 487 ] selecting from 351, 352, 353, 355 lists components 310 filtering 309, 310, 311, 312, 314, 315 sorting 309, 310, 311, 312, 314, 315 used, for displaying data 437, 439, 440 M MapView component implementing 341, 342 overlays, plotting 344, 345, 346 points, plotting 342, 343 Material-UI components, using 220, 221 responsive grid layouts, building 222, 223, 224 metadata used, for optimizing rendering 142, 143 mobile apps React state, using 456, 457 mobile browser experience 245, 246 mobile web apps cases 247 monolithic component event handler implementation 109, 110, 111 initial state 108 issues 105, 106 JSX markup 106, 107 multiple event handlers 93 mutation 461 N navigation components using 225 navigation header 290, 291, 292, 293, 294 navigation indicators 330, 331, 332 navigation basics 284, 285, 286 network state detecting 409, 410, 411, 412 notification 365 P parent route 177, 178, 179 passive notifications 375, 376, 377, 378, 379 portable components promoting 156 portals URL 18 predictable state transformations 445 progress displaying, with progress bar 332, 333, 334, 335, 336 example 321 indicating 322, 323, 324 measuring 325, 326, 327, 328, 329 properties initializing 131 state, initializing with 134, 135, 136 state, updating with 136, 137, 138 property validation 156 property values default property values 50 passing 49 rendering 165, 166 setting 51, 52 validating 168, 169, 170 pure functional components 53, 54 Q query 461 query parameter 188, 189 R radio buttons 232, 233 React 16, features about 16 context API 17 error handling 19 fragments, rendering 18 lifecycle methods 17 lists, rendering 18 portals 18 revamped core architecture 17 server-side rendering (SSR) 19 strings, rendering 18 URL 18 React 16.6.0-16.8.0, features about 20 code splitting 20 Hooks 21 [ 488 ] memoizing functional components 20 React component API 11 React component about 13 data 11 events 11 JSX 11 lifecycle 11 React Desktop 16 React DOM 11 React Native apps viewing, on virtual device using Expo Snack services 257, 259, 260 React Native project viewing, on phone 251, 252, 253, 254, 255, 256, 257 React Native styles 264, 265 React Native about 16, 243, 244, 446 reference link 245 React state using, in mobile apps 456, 457 React Toast 16 React Web 16, 446 React.memo() reference link 20 React about 9, 10 abstraction 15 data 12 declarative UI structures 12 performance 13 simplicity 11 time 12 URL versus JavaScript XML (JSX) 245 reducer actions using 82, 83 reducer Hooks used, for scaling state management 81 Redux App component 449, 451, 452 Home component 452, 455 implementing 446 initial application state, viewing 447 routes 449 store provider 449 store, creating 448 render props about 120, 122 reference link 120 rendering efficiency optimizing 138 rendering optimizing, with metadata 142, 143 requests canceling 68, 70 reusable HTML elements 105 revamped core architecture, React 16 reference link 17 route declarations decoupling 175, 176, 177 route parameters about 287, 288, 289 handling 179 optional parameters 184, 185, 186 routes about 449 child route 177, 178, 179 creating 174, 175 declaring 174 parent route 177, 178, 179 resource IDs 179, 180, 181, 182, 183, 184 S scrolls implementing 384, 385, 386 select inputs 233, 235 server-side rendering (SSR) about 19, 203 references 19 shouldComponentUpdate() life cycle method using 139, 140 side effect actions optimizing 72, 73 simple property validators any property validator 163, 164 basic type validation 157, 158, 160 using 157 value, requisites 160 [ 489 ] values, requisites 161, 162 simple three-column layout 267, 269 spinner fallbacks working with 197, 198 state dependencies handling 84, 86, 87, 88, 89 state management scaling, with reducer Hooks 81 state values updating 64, 65, 66 state handling 298, 299, 300, 301, 302, 303, 304 initializing 131 initializing, with properties 134, 135, 136 maintaining, with Hooks 62 resetting 68, 70, 71 updating, with properties 136, 137, 138 stateful context data updating 78, 79, 80, 81 stateless components about 53 pure functional components 53, 54 store provider 449 store about 444 creating 448 strings rendering to 206, 208 styles creating 238, 239 working with 237 subscription 461 success confirmation displaying 366, 367, 368, 369, 370, 371 Suspense component latency, simulating 196, 197 spinner fallbacks 197, 198 top-level Suspense component 194, 195 using 194 swipeable behavior implementing 389, 391, 392, 393 Switch component 355, 357 synchronous update rounds 445 synthetic event objects using 100, 101 T tab navigation 294, 295, 296, 297 tabs using, for navigation 229, 230, 231 text input collecting 348, 349, 350, 351 text inputs 233, 235 themes customizing 239, 240 working with 237 Todo app 468 todo items adding 474, 475, 476 completing 479, 480 rendering 478, 479 touch feedback 386, 387, 389 type validator 164 types defining 166, 168 U UI structures 27, 28 unidirectional data flow 444 unified information architecture 446 update round 445 URL parameter 188, 189 usability 322 useEffect() Hook 66 user confirmation obtaining 365 user input collecting 232 user interfaces (UIs) 10 user notifications displaying 440, 441, 442 useState() Hook using 63 utility components 127, 128 V value validator 164 virtual DOM 14