React and React Native

React and React Native

by Adam Boduch
Released March 2017
Publisher(s): Packt Publishing
ISBN: 9781786465658

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Use React and React Native to build applications for desktop browsers, mobile browsers, and even as native mobile apps

About This Book

  • Build React and React Native applications using familiar component concepts

  • Dive deep into each platform, from routing in React to creating native mobile applications that can run offline

  • Use Facebook’s Relay, React and GraphQL technologies, to create a unified architecture that powers both web and native applications

    • 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 ES2015 will help you follow along better.

    What You Will Learn

  • Craft reusable React components

  • Control navigation using the React Router to help keep your UI in sync with URLs

  • Build isomorphic web applications using Node.js

  • Use the Flexbox layout model to create responsive mobile designs

  • Leverage the native APIs of Android and iOS to build engaging applications with React Native

  • Respond to gestures in a way that’s intuitive for the user

  • Use Relay to build a unified data architecture for your React UIs

    • In Detail

    React and React Native allow you to build cross-platform desktop and mobile applications using Facebook’s innovative UI libraries. Combined with the Flux data architecture and Relay, you can now create powerful and feature-complete applications from just one code base!

    This book is split into three parts. The first part shows you how to start crafting composable UIs using React, from rendering with JSX and creating reusable components through to routing and creating isomorphic applications that run on Node.

    We then move on to showing 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.

    Finally, we’ll tie all of these skills together and shows you how you can create React applications that run on every major platform. As well as understanding application state in depth, you’ll learn how to leverage Relay to make feature-complete, data-driven web and native mobile applications.

    Style and approach

    Split into three major sections to help organize your learning, this hands-on, code-first book will help you get up to speed with React and React Native—the UI framework that powers Netflix, Yahoo, and Facebook.

    Table of contents

    1. React and React Native
      1. React and React Native
      2. Credits
      3. About the Author
      4. About the Reviewer
      5. www.PacktPub.com
        1. Why subscribe?
      6. Customer Feedback
      7. Dedication
      8. Preface
        1. About the book
        2. What this book covers
          1. Part I: React
          2. Part II: React Native
          3. Part III: React Architecture
        3. What you need for this book 
        4. Who this book is for
        5. Conventions
        6. Reader feedback
        7. Customer support
          1. Downloading the example code 
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      9. 1. 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. Summary
      10. 2. 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. Summary
      11. 3. Understanding Properties and State
        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. Summary
      12. 4. 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. Auto-binding context
          2. Getting component data
        3. Inline event handlers
        4. Binding handlers to elements
        5. Synthetic event objects
        6. Event pooling
        7. Summary
      13. 5. 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. Rendering component trees
        5. Feature components and utility components
        6. Summary
      14. 6. 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. Summary
      15. 7. 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
      16. 8. 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
      17. 9. 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. Lazy routing
        5. Summary
      18. 10. 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 backend and frontend
        2. Rendering to strings
        3. Backend routing
        4. Frontend reconciliation
        5. Fetching data
        6. Summary
      19. 11. 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
      20. 12. 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
      21. 13. Kickstarting React Native Projects
        1. Using the React Native command-line tool
        2. iOS and Android simulators
          1. Xcode
          2. Genymotion
        3. Running the project
          1. Running iOS apps
          2. Running Android apps
        4. Summary
      22. 14. 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
      23. 15. Navigating Between Screens
        1. Screen organization
        2. Navigators, scenes, routes, and stacks
        3. Responding to routes
        4. Navigation bar
        5. Dynamic scenes
        6. Jumping back and forth
        7. Summary
      24. 16. Rendering Item Lists
        1. Rendering data collections
        2. Sorting and filtering lists
        3. Fetching list data
        4. Lazy list loading
        5. Summary
      25. 17. Showing Progress
        1. Progress and usability
        2. Indicating progress
        3. Measuring progress
        4. Navigation indicators
        5. Step progress
        6. Summary
      26. 18. 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
      27. 19. 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
      28. 20. 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
      29. 21. Responding to User Gestures
        1. Scrolling with our fingers
        2. Giving touch feedback
        3. Swipeable and cancellable
        4. Summary
      30. 22. Controlling Image Display
        1. Loading images
        2. Resizing images
        3. Lazy image loading
        4. Rendering icons
        5. Summary
      31. 23. Going Offline
        1. Detecting the state of the network
        2. Storing application data
        3. Synchronizing application data
        4. Summary
      32. 24. 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
      33. 25. 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
      34. 26. 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

    Product information

    • Title: React and React Native
    • Author(s): Adam Boduch
    • Release date: March 2017
    • Publisher(s): Packt Publishing
    • ISBN: 9781786465658