React and react native : use react and react native to build applications for desktop browsers, mobile browsers, and even as native mobile apps / Adam Boduch.

Format:

Book

Author/Creator:

Boduch, Adam, author.

Language:

English

Subjects (All):

Android (Electronic resource).

iOS (Electronic resource).

Mobile apps.

Physical Description:

1 online resource (485 pages) : illustrations (some color)

Edition:

1st edition

Place of Publication:

Birmingham, England ; Mumbai, [India] : Packt, 2017.

System Details:

text file

Biography/History:

Boduch Adam: Adam Boduch has been involved in large-scale JavaScript development for nearly 15 years. Before moving to the frontend, he worked on several large-scale cloud computing products using Python and Linux. No stranger to complexity, Adam has practical experience with real-world software systems and the scaling challenges they pose.

Summary:

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, t...

Contents:

Cover

Copyright

Credits

About the Author

About the Reviewer

www.PacktPub.com

Customer Feedback

Table of Contents

Preface

Chapter 1: Why React?

What is React?

React is just the view

Simplicity is good

Declarative UI structure

Time and data

Performance matters

The right level of abstraction

Summary

Chapter 2: Rendering with JSX

What is JSX?

Hello JSX

Just like HTML

Built-in HTML tags

HTML tag conventions

Describing UI structures

Creating your own JSX elements

Encapsulating HTML

Nested elements

Namespaced components

Using JavaScript expressions

Dynamic property values and text

Mapping collections to elements

Chapter 3: Understanding Properties and State

What is component state?

What are component properties?

Setting component state

Initial component state

Merging component state

Passing property values

Default property values

Setting property values

Stateless components

Pure functional components

Defaults in functional components

Container components

Chapter 4: Event Handling - The React Way

Declaring event handlers

Declaring handler functions

Multiple event handlers

Importing generic handlers

Event handler context and parameters

Auto-binding context

Getting component data

Inline event handlers

Binding handlers to elements

Synthetic event objects

Event pooling

Chapter 5: Crafting Reusable Components

Reusable HTML elements

The difficulty with monolithic components

The JSX markup

Initial state and state helpers

Event handler implementation

Refactoring component structures

Start with the JSX

Implementing an article list component

Implementing an article item component.

Implementing an add article component

Making components functional

Rendering component trees

Feature components and utility components

Chapter 6: The React Component Lifecycle

Why components need a lifecycle

Initializing properties and state

Fetching component data

Initializing state with properties

Updating state with properties

Optimize rendering efficiency

To render or not to render

Using metadata to optimize rendering

Rendering imperative components

Rendering jQuery UI widgets

Cleaning up after components

Cleaning up asynchronous calls

Chapter 7: Validating Component Properties

Knowing what to expect

Promoting portable components

Simple property validators

Basic type validation

Requiring values

Any property value

Type and value validators

Things that can be rendered

Requiring specific types

Requiring specific values

Writing custom property validators

Chapter 8: Extending Components

Component inheritance

Inheriting state

Inheriting properties

Inheriting JSX and event handlers

Composition with higher-order components

Conditional component rendering

Providing data sources

Chapter 9: Handling Navigation with Routes

Declaring routes

Hello route

Decoupling route declarations

Parent and child routes

Handling route parameters

Resource IDs in routes

Optional parameters

Using link components

Basic linking

URL and query parameters

Lazy routing

Chapter 10: Server-Side React Components

What is isomorphic JavaScript?

The server is a render target

Initial load performance

Sharing code between the backend and frontend

Rendering to strings

Backend routing

Frontend reconciliation

Fetching data

Summary.

Chapter 11: Mobile-First React Components

The rationale behind mobile-first design

Using react-bootstrap components

Implementing navigation

Lists

Forms

Chapter 12: 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

Chapter 13: Kickstarting React Native Projects

Using the React Native command-line tool

iOS and Android simulators

Xcode

Genymotion

Running the project

Running iOS apps

Running Android apps

Chapter 14: Building Responsive Layouts with Flexbox

Flexbox is the new layout standard

Introducing React Native styles

Building flexbox layouts

Simple three column layout

Improved three column layout

Flexible rows

Flexible grids

Flexible rows and columns

Chapter 15: Navigating Between Screens

Screen organization

Navigators, scenes, routes, and stacks

Responding to routes

Navigation bar

Dynamic scenes

Jumping back and forth

Chapter 16: Rendering Item Lists

Rendering data collections

Sorting and filtering lists

Fetching list data

Lazy list loading

Chapter 17: Showing Progress

Progress and usability

Indicating progress

Measuring progress

Navigation indicators

Step progress

Chapter 18: Geolocation and Maps

Where am I?

What's around me?

Annotating points of interest

Plotting points

Plotting overlays

Chapter 19: Collecting User Input

Collecting text input

Selecting from a list of options

Toggling between off and on

Collecting date/time input

Chapter 20: Alerts, Notifications, and Confirmation

Important information

Getting user confirmation

Success confirmation.

Error confirmation

Passive notifications

Activity modals

Chapter 21: Responding to User Gestures

Scrolling with our fingers

Giving touch feedback

Swipeable and cancellable

Chapter 22: Controlling Image Display

Loading images

Resizing images

Lazy image loading

Rendering icons

Chapter 23: Going Offline

Detecting the state of the network

Storing application data

Synchronizing application data

Chapter 24: Handling Application State

Information architecture and Flux

Unidirectionality

Synchronous update rounds

Predictable state transformations

Unified information architecture

Implementing Redux

Initial application state

Creating the store

Store provider and routes

The App component

The Home component

State in mobile apps

Scaling the architecture

Chapter 25: Why Relay and GraphQL?

Yet another approach?

Verbose vernacular

Declarative data dependencies

Mutating application state

The GraphQL backend and microservices

Chapter 26: Building a Relay React App

TodoMVC and Relay

The GraphQL schema

Bootstrapping Relay

Adding todo items

Rendering todo items

Completing todo items

Index.

Notes:

Includes index.

Description based on online resource; title from PDF title page (ebrary, viewed March 24, 2017).

OCLC:

981256506