Download React Native for IOS Development PDF

TitleReact Native for IOS Development
TagsJava Script Xcode Application Software Mac Os iOS
File Size4.0 MB
Total Pages179
Table of Contents
                            Contents at a Glance
Contents
About the Authors
About the Technical Reviewer
Acknowledgments
Introduction
Chapter 1: Learning the Basics: A Whistle-Stop Tour of React
	Why React?
	Virtual DOM
	One-Way Data Flow
	Installation and Setup
	Introduction to Components
	JSX
	Deep-Dive Into Components
		Properties
	State
	Summary
Chapter 2: The Simplest Program: Hello World with React Native
	What Is React Native?
	React Native Prerequisites
	Installation
		Installing Node and npm
		Installing Watchman
		Installing the React Native Package
		Updating React Native
	Your First App
		Creating a Basic Skelton
		It’s Not a UIWebView
		Enabling Live Reload
	Why Is React Native Different?
	The Anatomy of a React Native Application
	Debugging
		Reload
		Debugging in Chrome
		Debugging in Safari
		Showing the FPS Monitor
		The Inspect Element
		Starting Profiling
	Summary
Chapter 3: Canvas, Brush, and Paint: Working with the User Interface
	NavigatorIOS
	Flexbox
		Flex-direction
		Flex
	Adding Images
	TouchableHighlight
	Routing to a Component
	ListView
	ScrollView
	Summary
Chapter 4: Flux: Solving Problems Differently
	MVC Pattern
	MVC Problem
	Flux
		Success of Flux
	Flux Deep Dive
		The Dispatcher
		The Need for Dispatcher [ dispatch() and waitFor() ]
		Stores
		Actions
	Flux with ReactJS Example
	Flux with React Native Example
	Summary
Chapter 5: Device Capabilities
	GeoLocation
		Reviewing the GeoLocationMap Code
		Adding Annotation on Map
		Displaying the Latitude and Longitude of the Present Location
			Reviewing the GeoLocation Code for the Present Location
	AsyncStorage
		Reviewing the AsyncStorage Code
	Native Alert
		Reviewing the NativeAlert Code
		Extending the NativeAlert Example
		Reviewing the Extended NativeAlert Example Code
	WebView
		Reviewing the WebView Code
	Animations
		Reviewing the Animation Code
	Summary
Chapter 6: Communicating with Servers
	XMLHttpRequest
	WebSocket
	Fetch
	Getting Data from a Server
	Saving Data to a Server
	Summary
Chapter 7: React Native Supplements
	Reflux
		Differences from Flux
	Redux
		
			Single Source of Truth
			State Is Read-only
			Mutations Are Written as Pure Functions
	Debug on Device
	Popular Modules for React Native
		react-native-fbsdk
		react-native- scrollable-tab-view
		react-native-webpack-server
		react-native-side-menu
	Where to Go from Here
Index
                        
Document Text Contents
Page 1

www.apress.com

Paul · N
alw

aya
React N

ative for iO
S D

evelopm
ent

React Native for
iOS Development

Harness the power of React and JavaScript
to build stunning iOS applications

Akshat Paul
Abhishek Nalwaya

React Native for iOS Development

B O O K S F O R P R O F E S S I O N A L S B Y P R O F E S S I O N A L S® THE E XPER T ’S VOICE® I N J AVA S C R I P T

This book is your hands-on guide to developing native iOS apps with ease. With React Native for
iOS Development you’ll challenge the status quo of native iOS development with revolutionary
components, asynchronous execution, unique methods for touch handling, and much more.

You will begin by understanding the path-breaking concepts of React.js, which makes it
distinctive. You will set up React Native and begin exploring the anatomy of React Native apps.
You’ll also learn about � ux architecture, how it diff ers from MVC, and how you can include it
in your React Native project to solve problems diff erently and effi ciently. Next, you will learn
to create stunning user interfaces and interact with various device capabilities. You will then
boost your development by including some popular packages already developed by the React
Native community that will helps you write less but do more.

Using React Native for iOS Development’s real-world examples and hands-on approach, you
will learn by doing and have a running app at the end of each chapter.

Shelve in:
Web Development/JavaScript

User level:
Intermediate9 781484 213964

ISBN 978-1-4842-1396-4ISBN 978-1-4842-1396-4

Page 89

79CHAPTER 4: Flux: Solving Problems Differently

well with React Native’s declarative model, which allows the stores to send updates without
specifying how to transition views between states.

In short, Flux offers the following benefits:

 Improves data consistency

 Makes it easier to pinpoint the bugs

 Offers more meaningful unit tests; since all the states of a module are
there in same place, we can test a module independently

 Contains predictable code

Success of Flux
One of Facebook’s most popular features was chat. However, it was extremely buggy and
had the most negative user feedback. The new chat system that Facebook implemented
uses Flux, and it now has a seamless experience; you can look at example chat code in a
Facebook React Native example at the following URL:

https://github.com/facebook/flux/tree/master/examples/flux-chat.

Flux Deep Dive
In this section, we’ll take a closer look at some of Flux’s core concepts.

The Dispatcher
The dispatcher is the central hub that manages all data flow in a Flux application. It is
essentially a registry of callbacks into the stores and has no real intelligence of its own; it is
a simple mechanism for distributing the actions to the stores. Each store registers itself and
provides a callback. When an action creator provides the dispatcher with a new action, all
stores in the application receive the action via the callbacks in the registry. Dispatcher also
acts like a traffic controller. If it gets an action while the data layer is still processing, it can
reject the action, which is a good constraint to have. It is a guarantee that you will know
when your action starts and what changes it makes to the data layer, as there are cascading
effects that build up in between—you are indeed in full control of your system.

The Need for Dispatcher [dispatch() and waitFor()]
As an application grows, dependencies across different stores also increase. Imagine we
have a situation where store A needs store B to update itself first, so that it can itself know
how to update. We need the dispatcher to invoke the callback for store B, and finish that
callback, before moving forward with store A. To assert this dependency, store A needs
to communicate with the dispatcher to first complete the action updating store B. The
dispatcher provides this functionality through the waitFor() method.

www.it-ebooks.info

https://github.com/facebook/flux/tree/master/examples/flux-chat
http://www.it-ebooks.info/

Page 90

80 CHAPTER 4: Flux: Solving Problems Differently

The dispatch() method provides a simple, synchronous iteration through the callbacks,
invoking each in turn. When waitFor() is encountered within one of the callbacks, execution
of that callback stops and waitFor() provides us with a new iteration cycle over the
dependencies. After the entire set of dependencies has been fulfilled, the original callback
then continues to execute.

Further, the waitFor() method may be used in different ways for different actions, within the
same store’s callback. In one case, store A might need to wait for store B. But in another
case, it might need to wait for store C. Using waitFor() within the code block that is specific
to an action allows us to have fine-grained control of these dependencies.

Problems arise, however, if we have circular dependencies. That is, if store A needs to wait
for store B, and store B needs to wait for store A, we could wind up in an endless loop. The
dispatcher now available in the Flux repo protects against this by throwing an informative
error to alert the developer that this problem has occurred. The developer can then create a
third store and resolve the circular dependency.

Stores
Stores contain the application state and logic. Their role is somewhat similar to that of
a model in a traditional MVC, but they manage the state of many objects—they do not
represent a single record of data like ORM models do. More than simply managing a
collection of ORM-style objects, stores manage the application state for a particular domain
within the application.

As mentioned earlier, a store registers itself with the dispatcher and provides it with a
callback. This callback receives the action as a parameter. Within the store’s registered
callback, a switch statement based on the action’s type is used to interpret the action and
to provide the proper hooks into the store’s internal methods. This allows an action to result
in an update to the state of the store, via the dispatcher. After the stores are updated, they
broadcast an event declaring that their state has changed, so the views may query the new
state and update themselves.

Actions
When new data enters the system, whether through a person interacting with the application
or through a web API call, that data is packaged into an action—an object literal containing
the new fields of data and a specific action type. We often create a library of helper
methods called action creators that not only create the action object, but also pass the
action to the dispatcher.

Different actions are identified by a type attribute. When all of the stores receive the action,
they typically use this attribute to determine if and how they should respond to it. In a Flux
application, both stores and views control themselves; external objects do not act upon
them. Actions flow into the stores through the callbacks they define and register, not through
setter methods.

www.it-ebooks.info

http://www.it-ebooks.info/

Page 178

171Index

installation, 20
cli module, 21
Node and npm, 21
updates, 21
Watchman, 21

JavaScriptCore framework, 30
live reload, 29
prerequisites, 20
RCTText, 28
Redux. (see Redux)
Reflux. (see Reflux)
scrollable-tab-view, 166
side menu, 166
sqlite-storage, 167
tableview, 167
TouchableHighlight, 58
vector-icons, 167
webpack-server, 166
web technologies, 29
WebView-based, 29

Redux
definition, 160
principles

Mutations Are Written as Pure
Functions, 161

Single Source of Truth, 161
State Is Read-only, 161

Reflux
Actions, 152
components, 153
definition, 149
vs. Flux, 150
pattern, 150
populated list with options, 159
RefluxTodo, 150
Stores, 152
TodoApp.js, 157
TodoItem component, 154
TodoList.js, 156, 158
updated index.ios.js, 158

renderProperty function, 73
_renderRow function, 74

■S
ScrollView, 73
Separation of concerns (SoC), 6
Server

getting data, 139
saving data, 143

■T
TouchableHighlight, 58

■U
User interface

add images, 54
Flexbox. Flexbox
_handleListProperty

function, 61
List Property component, 61
ListView component, 67
ScrollView, 73
TouchableHighlight, 58

■V
Virtual DOM (VDOM)

components, 4
working principle, 3

Virtual DOM (VDOM), 2

■W
waitFor( ) method, 80
WebSocket, 136

■X, Y, Z
XMLHttpRequest, 135

www.it-ebooks.info

http://www.it-ebooks.info/

Similer Documents