Cover image for React and React Native - Second Edition

React and React Native - Second Edition

Author Adam Boduch
Release Date: 2018/09/01
ISBN: 9781789346794
Topic:
0%
363
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Build applications for web and native mobile platforms with React, JSX, Redux, and GraphQL

Key Features

  • Explore how functional web development works with React, Redux, and React Native
  • Build apps with unified architecture with Facebook's React, Relay, and GraphQL
  • Understand the platform in-depth, from routing to server-side rendering

Book Description

This books takes you through using React 16 and React Native 0.5 to create powerful and engaging desktop mobile and native applications for all platforms.

You start by learning how to craft composable UIs using React, ranging from rendering with JSX and creating reusable components to routing and creating isomorphic applications that run on Node.js.

We then move on to show you how to take the concepts of React and apply them to building Native UIs using React Native. You'll find out how to build responsive and streamlined UIs that can properly handle user interactions in a mobile environment. You'll also learn how to access device-specific APIs such as the Geolocation API, and how to handle offline development with React Native.

You will master handling application state, Unified Information Architecture, and using Flux, Redux, and Relay.

Towards the end of the book, you will learn how Flux ideas are encapsulated within React components using Relay and apply all the skills learned so far to create a React application that runs on every major platform.

What you will learn

  • Learn what has changed in React 16 and how you stand to benefit
  • Craft reusable components using the React virtual DOM
  • Learn how to use the new create-react-native-app command line tool
  • Augment React components with GraphQL for data using Relay
  • Handle state for architectural patterns using Flux
  • Build an application for web UIs using Relay

Who this book is for

This book is written for any JavaScript developer—beginner or expert—who wants to start learning how to put both of Facebook's UI libraries to work. No knowledge of React is needed, though a working knowledge of ES2017 will help you follow along better.

Downloading the example code for this book You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Title Page
  2. Copyright and Credits
    1. React and React Native Second Edition
  3. Packt Upsell
    1. Why subscribe?
    2. www.packt.com
  4. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  5. Dedication
  6. Preface
    1. Who this book is for
    2. What this book covers
      1. Part I: React
      2. Part II: React Native
      3. Part III: React Architecture
    3. To get the most out of this book
      1. Download the example code files
      2. Conventions used
    4. Get in touch
      1. Reviews
  7. Why React?
    1. What is React?
      1. React is just the view
    2. Simplicity is good
    3. Declarative UI structure
    4. Time and data
    5. Performance matters
    6. The right level of abstraction
    7. What's new in React 16
      1. Core architecture revamped
      2. Lifecycle methods
      3. Context API
      4. Rendering fragments
      5. Portals
      6. Rendering lists and strings
      7. Handling errors
      8. Server-side rendering
    8. Summary
    9. Test your knowledge
    10. Further reading
  8. Rendering with JSX
    1. What is JSX?
      1. Hello JSX
      2. Declarative UI structure
    2. Just like HTML
      1. Built-in HTML tags
      2. HTML tag conventions
    3. Describing UI structures
    4. Creating your own JSX elements
      1. Encapsulating HTML
      2. Nested elements
      3. Namespaced components
    5. Using JavaScript expressions
      1. Dynamic property values and text
      2. Mapping collections to elements
    6. Fragments of JSX
      1. Wrapper elements
      2. Avoiding unnecessary tags using fragments
    7. Summary
    8. Test your knowledge
    9. Further reading
  9. Component Properties, State, and Context
    1. What is component state?
    2. What are component properties?
    3. Setting component state
      1. Initial component state
      2. Setting component state
      3. Merging component state
    4. Passing property values
      1. Default property values
      2. Setting property values
    5. Stateless components
      1. Pure functional components
      2. Defaults in functional components
    6. Container components
    7. Providing and consuming context
    8. Summary
    9. Test your knowledge
    10. Further reading
  10. Event Handling, the React Way
    1. Declaring event handlers
      1. Declaring handler functions
      2. Multiple event handlers
      3. Importing generic handlers
    2. Event handler context and parameters
      1. Getting component data
      2. Higher-order event handlers
    3. Inline event handlers
    4. Binding handlers to elements
    5. Synthetic event objects
    6. Event pooling
    7. Summary
    8. Test your knowledge
    9. Further reading
  11. Crafting Reusable Components
    1. Reusable HTML elements
    2. The difficulty with monolithic components
      1. The JSX markup
      2. Initial state and state helpers
      3. Event handler implementation
    3. Refactoring component structures
      1. Start with the JSX
      2. Implementing an article list component
      3. Implementing an article item component
      4. Implementing an add article component
      5. Making components functional
    4. Leveraging render props
    5. Rendering component trees
    6. Feature components and utility components
    7. Summary
    8. Test your knowledge 
    9. Further Reading
  12. The React Component Lifecycle
    1. Why components need a lifecycle
    2. Initializing properties and state
      1. Fetching component data
      2. Initializing state with properties
      3. Updating state with properties
    3. Optimize rendering efficiency
      1. To render or not to render
      2. Using metadata to optimize rendering
    4. Rendering imperative components
      1. Rendering jQuery UI widgets
    5. Cleaning up after components
      1. Cleaning up asynchronous calls
    6. Containing errors with error boundaries
    7. Summary
    8. Test your knowledge
    9. Further Reading
  13. Validating Component Properties
    1. Knowing what to expect
    2. Promoting portable components
    3. Simple property validators
      1. Basic type validation
      2. Requiring values
      3. Any property value
    4. Type and value validators
      1. Things that can be rendered
      2. Requiring specific types
      3. Requiring specific values
    5. Writing custom property validators
    6. Summary
    7. Test your knowledge
    8. Further reading
  14. Extending Components
    1. Component inheritance
      1. Inheriting state
      2. Inheriting properties
      3. Inheriting JSX and event handlers
    2. Composition with higher-order components
      1. Conditional component rendering
      2. Providing data sources
    3. Summary
    4. Test your knowledge
    5. Further reading
  15. Handling Navigation with Routes
    1. Declaring routes
      1. Hello route
      2. Decoupling route declarations
      3. Parent and child routes
    2. Handling route parameters
      1. Resource IDs in routes
      2. Optional parameters
    3. Using link components
      1. Basic linking
      2. URL and query parameters
    4. Summary
    5. Test your knowledge
    6. Further reading
  16. Server-Side React Components
    1. What is isomorphic JavaScript?
      1. The server is a render target
      2. Initial load performance
      3. Sharing code between the server and the browser
    2. Rendering to strings
    3. Backend routing
    4. Frontend reconciliation
    5. Fetching data
    6. Summary
    7. Test your knowledege
    8. Further reading
  17. Mobile-First React Components
    1. The rationale behind mobile-first design
    2. Using react-bootstrap components
      1. Implementing navigation
      2. Lists
      3. Forms
    3. Summary
    4. Test your knowledge
    5. Further reading
  18. Why React Native?
    1. What is React Native?
    2. React and JSX are familiar
    3. The mobile browser experience
    4. Android and iOS, different yet the same
    5. The case for mobile web apps
    6. Summary
    7. Test your knowledge
    8. Further reading
  19. Kickstarting React Native Projects
    1. Installing and using the create-react-native-app
    2. Creating a React Native app
    3. Running your app
    4. Installing and using Expo
    5. Using simulators
      1. iOS simulators
      2. Android simulators
    6. Summary
    7. Test your knowledge
    8. Further reading
  20. Building Responsive Layouts with Flexbox
    1. Flexbox is the new layout standard
    2. Introducing React Native styles
    3. Building flexbox layouts
      1. Simple three column layout
      2. Improved three column layout
      3. Flexible rows
      4. Flexible grids
      5. Flexible rows and columns
    4. Summary
    5. Test your knowledge
    6. Further reading
  21. Navigating Between Screens
    1. Navigation basics
    2. Route parameters
    3. The navigation header
    4. Tab and drawer navigation
    5. Handling state
    6. Summary
    7. Test your knowledege
    8. Further reading
  22. Rendering Item Lists
    1. Rendering data collections
    2. Sorting and filtering lists
    3. Fetching list data
    4. Lazy list loading
    5. Summary
    6. Test your knowledege
    7. Further reading
  23. Showing Progress
    1. Progress and usability
    2. Indicating progress
    3. Measuring progress
    4. Navigation indicators
    5. Step progress
    6. Summary
    7. Test your knowledge
    8. Further reading
  24. Geolocation and Maps
    1. Where am I?
    2. What's around me?
    3. Annotating points of interest
      1. Plotting points
      2. Plotting overlays
    4. Summary
    5. Test your knowledge
    6. Further reading
  25. Collecting User Input
    1. Collecting text input
    2. Selecting from a list of options
    3. Toggling between off and on
    4. Collecting date/time input
    5. Summary
    6. Test your knowledge
    7. Further reading
  26. Alerts, Notifications, and Confirmation
    1. Important information
    2. Getting user confirmation
      1. Success confirmation
      2. Error confirmation
    3. Passive notifications
    4. Activity modals
    5. Summary
    6. Test your knowledge
    7. Further reading
  27. Responding to User Gestures
    1. Scrolling with your fingers
    2. Giving touch feedback
    3. Swipeable and cancellable
    4. Summary
      1. Test your knowledge
      2. Further reading
  28. Controlling Image Display
    1. Loading images
    2. Resizing images
    3. Lazy image loading
    4. Rendering icons
    5. Summary
    6. Test your knowledge
    7. Further reading
  29. Going Offline
    1. Detecting the state of the network
    2. Storing application data
    3. Synchronizing application data
    4. Summary
    5. Test your knowledge
    6. Further reading
  30. Handling Application State
    1. Information architecture and Flux
      1. Unidirectionality
      2. Synchronous update rounds
      3. Predictable state transformations
    2. Unified information architecture
    3. Implementing Redux
      1. Initial application state
      2. Creating the store
      3. Store provider and routes
      4. The App component
      5. The Home component
      6. State in mobile apps
    4. Scaling the architecture
    5. Summary
    6. Test your knowledge
    7. Further reading
  31. Why Relay and GraphQL?
    1. Yet another approach?
    2. Verbose vernacular
    3. Declarative data dependencies
    4. Mutating application state
    5. The GraphQL backend and microservices
    6. Summary
    7. Test your knowledge
    8. Further reading
  32. Building a Relay React App
    1. TodoMVC and Relay
    2. The GraphQL schema
    3. Bootstrapping Relay
    4. Adding todo items
    5. Rendering todo items
    6. Completing todo items
    7. Summary
  33. Test Your Knowledge Answers
    1. Chapter 1
    2. Chapter 2
    3. Chapter 3
    4. Chapter 4
    5. Chapter 5
    6. Chapter 6 
    7. Chapter 7
    8. Chapter 8
    9. Chapter 9
    10. Chapter 10
    11. Chapter 11
    12. Chapter 12
    13. Chapter 13
    14. Chapter 14
    15. Chapter 15
    16. Chapter 16
    17. Chapter 17
    18. Chapter 18
    19. Chapter 19
    20. Chapter 20
    21. Chapter 21
    22. Chapter 22
    23. Chapter 23
    24. Chapter 24
    25. Chapter 25
  34. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think
18.191.5.239