Book Image

React and React Native

By : Adam Boduch
Book Image

React and React Native

By: Adam Boduch

Overview of this book

para 1: Dive into the world of React and create powerful applications with responsive and streamlined UIs! With React best practices for both Android and iOS, this book demonstrates React and React Native in action, helping you to create intuitive and engaging applications. Para 2: React and React Native allow you to build desktop, mobile and native applications for all major platforms. Combined with Flux and Relay, you?ll be able to create powerful and feature-complete applications from just one code base. Para 3: Discover how to build desktop and mobile applications using Facebook?s innovative UI libraries. You?ll also learn how to craft composable UIs using React, and then apply these concepts to building Native UIs using React Native. Finally, find out how you can create React applications which run on all major platforms, and leverage Relay for feature-complete and data-driven applications. Para 4: What?s Inside ? Craft composable UIs using React & build Native UIs using React Native ? Create React applications for major platforms ? Access APIs ? Leverage Relay for data-driven web & native mobile applications

Related Content you might be interested in

Current Title:

Small book image
React and React Native
Adam Boduch
Mar, 2017 | 500 pages
Small book image
Mastering React Native
Eric Masiello | Jacob Friedmann
Jan, 2017 | 496 pages
Small book image
Getting Started with React Native
Ethan Holmes | Tom Bray
Dec, 2015 | 172 pages
Small book image
React 16 Tooling
Adam Boduch
Apr, 2018 | 298 pages
Table of Contents (34 chapters)
React and React Native
React and React Native
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Dedication
Dedication
Preface
Preface
Free Chapter
1
Why React?
Why React?
What is React?
Simplicity is good
Declarative UI structure
Time and data
Performance matters
The right level of abstraction
Summary
2
Rendering with JSX
Rendering with JSX
What is JSX?
Just like HTML
Describing UI structures
Creating your own JSX elements
Using JavaScript expressions
Summary
3
Understanding Properties and State
Understanding Properties and State
What is component state?
What are component properties?
Setting component state
Passing property values
Stateless components
Container components
Summary
4
Event Handling – The React Way
Event Handling – The React Way
Declaring event handlers
Event handler context and parameters
Inline event handlers
Binding handlers to elements
Synthetic event objects
Event pooling
Summary
5
Crafting Reusable Components
Crafting Reusable Components
Reusable HTML elements
The difficulty with monolithic components
Refactoring component structures
Rendering component trees
Feature components and utility components
Summary
6
The React Component Lifecycle
The React Component Lifecycle
Why components need a lifecycle
Initializing properties and state
Optimize rendering efficiency
Rendering imperative components
Cleaning up after components
Summary
7
Validating Component Properties
Validating Component Properties
Knowing what to expect
Promoting portable components
Simple property validators
Type and value validators
Writing custom property validators
Summary
8
Extending Components
Extending Components
Component inheritance
Composition with higher-order components
Summary
9
Handling Navigation with Routes
Handling Navigation with Routes
Declaring routes
Handling route parameters
Using link components
Lazy routing
Summary
10
Server-Side React Components
Server-Side React Components
What is isomorphic JavaScript?
Rendering to strings
Backend routing
Frontend reconciliation
Fetching data
Summary
11
Mobile-First React Components
Mobile-First React Components
The rationale behind mobile-first design
Using react-bootstrap components
Summary
12
Why React Native?
Why React Native?
What is React Native?
React and JSX are familiar
The mobile browser experience
Android and iOS, different yet the same
The case for mobile web apps
Summary
13
Kickstarting React Native Projects
Kickstarting React Native Projects
Using the React Native command-line tool
iOS and Android simulators
Running the project
Summary
14
Building Responsive Layouts with Flexbox
Building Responsive Layouts with Flexbox
Flexbox is the new layout standard
Introducing React Native styles
Building flexbox layouts
Summary
15
Navigating Between Screens
Navigating Between Screens
Screen organization
Navigators, scenes, routes, and stacks
Responding to routes
Navigation bar
Dynamic scenes
Jumping back and forth
Summary
16
Rendering Item Lists
Rendering Item Lists
Rendering data collections
Sorting and filtering lists
Fetching list data
Lazy list loading
Summary
17
Showing Progress
Showing Progress
Progress and usability
Indicating progress
Measuring progress
Navigation indicators
Step progress
Summary
18
Geolocation and Maps
Geolocation and Maps
Where am I?
What's around me?
Annotating points of interest
Summary
19
Collecting User Input
Collecting User Input
Collecting text input
Selecting from a list of options
Toggling between off and on
Collecting date/time input
Summary
20
Alerts, Notifications, and Confirmation
Alerts, Notifications, and Confirmation
Important information
Getting user confirmation
Passive notifications
Activity modals
Summary
21
Responding to User Gestures
Responding to User Gestures
Scrolling with our fingers
Giving touch feedback
Swipeable and cancellable
Summary
22
Controlling Image Display
Controlling Image Display
Loading images
Resizing images
Lazy image loading
Rendering icons
Summary
23
Going Offline
Going Offline
Detecting the state of the network
Storing application data
Synchronizing application data
Summary
24
Handling Application State
Handling Application State
Information architecture and Flux
Unified information architecture
Implementing Redux
Scaling the architecture
Summary
25
Why Relay and GraphQL?
Why Relay and GraphQL?
Yet another approach?
Verbose vernacular
Declarative data dependencies
Mutating application state
The GraphQL backend and microservices
Summary
26
Building a Relay React App
Building a Relay React App
TodoMVC and Relay
The GraphQL schema
Bootstrapping Relay
Adding todo items
Rendering todo items
Completing todo items
Summary

Unified information architecture

Let's take a moment to recap the ingredients of our application architecture so far:

  • React Web: Applications that run in web browsers

  • React Native: Applications that run natively on mobile platforms

  • Flux: Patterns for scalable data in React applications

Remember, React is just an abstraction that sits on top of a render target. The two main render targets are browsers and mobile native. This list will likely grow, so it's up to us to design our architecture in a way that doesn't exclude future possibilities. The challenge is that you're not porting a web application to a native mobile application; they're different applications, but they serve the same purpose.

Having said that, is there a way that we can still have some kind of unified information architecture based on ideas from Flux that can be used by these different applications? The best answer I can come up with, unfortunately, is: sort of. You don't want to let the different web and mobile user experiences...

Previous Section
End of Section 3
Next Section