Redux | React Native By Example

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

React Native By Example

By : Kho

3.7 (3)

React Native By Example

3.7 (3)

By: Kho

Overview of this book

React Native's ability to build performant mobile applications with JavaScript has resulted in its popularity amongst developers. Developers now have the luxury to create incredible mobile experiences that look and feel native to their platforms with the comfort of a well-known language and the popular React.js library. This book will show you how to build your own native mobile applications for the iOS and Android platforms while leveraging the finesse and simplicity of JavaScript and React. Throughout the book you will build three projects, each of increasing complexity. You will also link up with the third-party Facebook SDK, convert an app to support the Redux architecture, and learn the process involved in making your apps available for sale on the iOS App Store and Google Play. At the end of this book, you will have learned and implemented a wide breadth of core APIs and components found in the React Native framework that are necessary in creating great mobile experiences.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

First Project - Creating a Basic To-Do List App

First Project - Creating a Basic To-Do List App

Initializing a new project

Feature planning

Project architecture

StyleSheet

Flexbox

Writing in ES6

Building the app

ListView

Creating the TasksList component

Linking TasksList to index

The iOS Simulator Developer menu

TextInput

AsyncStorage

Custom RenderRow component

Prop validation in React

Moving beyond MVP

Summary

Advanced Functionality and Styling the To-Do List App

Advanced Functionality and Styling the To-Do List App

Navigator and NavigatorIOS

Using DatePickerIOS

Using onLayout

Button

Switch

Save button

TasksListCell modifications

Navigator

Platform

DatePickerAndroid and TimePickerAndroid

Saving updates

BackAndroid

Summary

Our Second Project - The Budgeting App

Our Second Project - The Budgeting App

Getting started

Folder structure

The EnterBudget component

The AddExpenses container and modal

Displaying the current month's expenses

Summary

Advanced Functionality with the Expenses App

Advanced Functionality with the Expenses App

Using vector icons

Picker

Updating App.js with ProgressViewIOS

A view for prior months' expenses

The previous month's expenses

Implementing TabBarIOS

Deleting expenses

Summary

Third Project - The Facebook Client

Third Project - The Facebook Client

Planning the app

About the Facebook API

Obtaining Facebook API credentials

Installing the Facebook SDK on iOS and Android

Logging in with the Facebook SDK

Using the Facebook Graph API

Creating a login prompt

Optimizing for the API

Using ActivityIndicator

Creating a standard ListView

Summary

Advanced Facebook App Functionality

Advanced Facebook App Functionality

Creating a PostView

Reloading data with RefreshControl

Rendering images

Rendering links with WebView

Signing out with TabBarIOS

Porting to Android

Summary

Redux

Redux

Introducing Redux

Planning the Redux conversion

Creating the entry point

Converting EditTasks to Redux

Summary

Deploying Your Applications

Deploying Your Applications

Basic requirements

Creating developer memberships

Making your app look great

Summary

Additional React Native Components

Additional React Native Components

Setting up a boilerplate project

Making Fetch happen

Vibration

Using ActionSheetIOS

Grabbing user geolocation data

Expenses for Android

Android modifications

Summary

Introducing Redux

Redux is a very popular library that many developers use to help write their React applications. On its GitHub repo, Redux bills itself as a predictable state container for JavaScript apps. Rather than having each component manage its own independent state, Redux proposes that your entire React application is governed by one single state. This single state is then proliferated through each component and allows the majority of your app's logic to live in reusable functions.

The three principles of Redux

You can describe Redux by referring to three key principles regarding the state: it needs to be the single source of truth for your application, be read-only, and be modifiable only by pure functions.

Single state tree

In Redux, rather than having each component manage its own state, we deal with one single-state tree that contains all the logic in our application. For example, for the Tasks app we built in the first two chapters, you can visualize it as follows:

{ 
  cellExpanded...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

React Native By Example

Search

Your notes and bookmarks