Build applications for web and native mobile platforms with React, JSX, Redux, and GraphQL
- 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
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
Table of Contents
- Why React?
- Rendering with JSX
- Component Properties, State, and Context
- Event Handling, the React Way
- Crafting Reusable Components
- The React Component Lifecycle
- Validating Component Properties
- Extending Components
- Handling Navigation with Routes
- Server-Side React Components
- Mobile-first React Components
- Why React Native?
- Kickstarting React Native Projects
- Building Responsive Layouts with Flexbox
- Navigating Between Screens
- Rendering Item Lists
- Showing Progress
- Geolocation and Maps
- Collecting User Input
- Alerts, Notifications, and Confirmation
- Responding to User Gestures
- Controlling Image Display
- Going Offline
- Handling Application State
- Why Relay and GraphQL?
- Building a Relay React App