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

Using react-bootstrap components

While it's possible to implement mobile-first React user interfaces by rolling your own CSS, I would recommend against doing this. There are a number of CSS libraries that handle the seemingly endless edge cases for us. In this section, we'll introduce the react-bootstrap package—React components for Bootstrap.

Bootstrap is the most popular mobile-first library. However, using it directly means manually adding the right CSS classes to the right components. The react-bootstrap package exposes a number of components that serve as a thin abstraction layer between your application and Bootstrap HTML/CSS.

Let's implement some examples now. Another reason I'm showing you how to work with react-bootstrap components is that they're similar to react-native components, which you'll learn about starting in the next chapter.

Note

The idea with the following examples isn't in-depth coverage of react-bootstrap, or Bootstrap itself for that matter. Rather, the idea is to give...

Previous Section
End of Section 3
Next Section