React and React Native

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

React and React Native

React and React Native

Credits

About the Author

About the Author

About the Reviewer

About the Reviewer

www.PacktPub.com

www.PacktPub.com

Customer Feedback

Customer Feedback

Dedication

Preface

Free Chapter

Why React?

Simplicity is good

Declarative UI structure

Performance matters

The right level of abstraction

Rendering with JSX

Rendering with JSX

Describing UI structures

Creating your own JSX elements

Using JavaScript expressions

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

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

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

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

Validating Component Properties

Validating Component Properties

Knowing what to expect

Promoting portable components

Simple property validators

Type and value validators

Writing custom property validators

Extending Components

Extending Components

Component inheritance

Composition with higher-order components

Handling Navigation with Routes

Handling Navigation with Routes

Declaring routes

Handling route parameters

Using link components

Server-Side React Components

Server-Side React Components

What is isomorphic JavaScript?

Rendering to strings

Backend routing

Frontend reconciliation

Mobile-First React Components

Mobile-First React Components

The rationale behind mobile-first design

Using react-bootstrap components

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

Kickstarting React Native Projects

Kickstarting React Native Projects

Using the React Native command-line tool

iOS and Android simulators

Running the project

Building Responsive Layouts with Flexbox

Building Responsive Layouts with Flexbox

Flexbox is the new layout standard

Introducing React Native styles

Building flexbox layouts

Navigating Between Screens

Navigating Between Screens

Screen organization

Navigators, scenes, routes, and stacks

Responding to routes

Jumping back and forth

Rendering Item Lists

Rendering Item Lists

Rendering data collections

Sorting and filtering lists

Fetching list data

Lazy list loading

Showing Progress

Showing Progress

Progress and usability

Indicating progress

Measuring progress

Navigation indicators

Geolocation and Maps

Geolocation and Maps

What's around me?

Annotating points of interest

Collecting User Input

Collecting User Input

Collecting text input

Selecting from a list of options

Toggling between off and on

Collecting date/time input

Alerts, Notifications, and Confirmation

Alerts, Notifications, and Confirmation

Important information

Getting user confirmation

Passive notifications

Activity modals

Responding to User Gestures

Responding to User Gestures

Scrolling with our fingers

Giving touch feedback

Swipeable and cancellable

Controlling Image Display

Controlling Image Display

Resizing images

Lazy image loading

Rendering icons

Going Offline

Detecting the state of the network

Storing application data

Synchronizing application data

Handling Application State

Handling Application State

Information architecture and Flux

Unified information architecture

Implementing Redux

Scaling the architecture

Why Relay and GraphQL?

Why Relay and GraphQL?

Yet another approach?

Verbose vernacular

Declarative data dependencies

Mutating application state

The GraphQL backend and microservices

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

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

What is React Native?

Earlier in this book, I introduced the notion of a render target—the thing that React components render to. The render target is abstract as far as the React programmer is concerned. For example, in React, the render target can be a string or it could be the DOM. This is why your components never directly interface with the render target, because you can never assume that it is what you think it is.

A mobile platform has UI widget libraries that developers can leverage to build apps for that platform. On Android, developers implement Java apps while on iOS developers implement Swift apps. If you want a functional mobile app, you're going to have to pick one. However, you'll need to learn both languages, as supporting only one of two major platforms isn't realistic for success.

For React developers, this isn't a problem. The same React components that you build work all over the place, even on mobile browsers! Having to learn two more programming languages to build and...