Book Image

React Native - Building Mobile Apps with JavaScript

By : Vladimir Novick

Book Image

React Native - Building Mobile Apps with JavaScript

By: Vladimir Novick

Overview of this book

<p>The emergence of React Native has made creating mobile apps in JavaScript easier for developers. This book introduces you to the React Native framework and the mobile apps development process. It starts with how React Native fits into the world of hybrid apps, and why it’s a popular framework. You’ll learn how React Native works under the hood--compiling JavaScript to Native code to bridge JavaScript and native apps. Also, you’ll learn how to write React Native components and use the ReactJS way of structuring your app. Understand how to use the industry standard Redux architecture as well as MobX--a newly emerging approach for state management--making your apps more robust and scalable.</p> <p>The mobile native world can be intimidating, with lots of platform-specific APIs. In this book, you’ll learn about the most important APIs with help of the real-world examples. You’ll also learn about the community packages that can help speed up your development. The book explains how to use these packages with JavaScript code, include native modules in your application, and write the modules yourself. Throughout the book, you will see examples of WhatsApp, Instagram, and YouTube apps and learn how to recreate them. You’ll also learn debugging and testing techniques, authentication, dealing with real data, and much more.</p> <p>At the end we will walk through design to production process of Twitter app clone and will explain application release process to App Store and Play Store</p>

Preface

What this book covers

What you need for this book

Who this book is for

Reader feedback

Customer support

Free Chapter

Understanding Why React Native is the Future of Mobile Apps

Understanding Why React Native is the Future of Mobile Apps

What is React Native?

How the React Native bridge from JavaScript to Native world works?

The benefits of React Native

Working with React Native

Working with React Native

Setting up an environment for developing iOS and Android apps

Creating your application

Introduction to JSX and how it's used in React Native

Stateful versus presentational components

React lifecycle methods

Structuring React Native apps and their resemblance to HTML

The folder structure

Getting Familiar with React Native Components

Getting Familiar with React Native Components

Platform-independent components

Basic components

Basic user interaction

Getting feedback from your application

Dealing with lists of data

Embedding web content

Handling user input

Platform-dependent components

Additional controls

Platform-specific navigation

Navigation in React Native

Debugging and Testing React Native

Debugging and Testing React Native

Debugging your React Native apps

Remote debugging

Inspecting React Native components

Introduction to the Jest testing framework

Snapshot testing your React Native components

Working with functions

Mocking modules

Bringing the Power of Flexbox to the Native World

Bringing the Power of Flexbox to the Native World

Flexbox styling concepts and techniques

Laying out our app

Best practices and techniques for styling your React Native applications

Animating React Native Components

Animating React Native Components

Understanding animations

How animation works

Using Animated API for complex animations

Animated functions

Combining several animations to create complex sequences

Authenticating Your App and Fetching Data

Authenticating Your App and Fetching Data

Getting familiar with Firebase

Managing permissions

Writing data to Firebase

Fetching data in React Native

Setting up authentication at Firebase

Creating functional Login and Sign Up screens

Authenticating via social providers

Implementing a Flux Architecture with Redux or MobX

Implementing a Flux Architecture with Redux or MobX

What is Flux architecture?

Redux concepts and usage

Connecting Redux to your app

Using redux-thunk for async actions

Mobx- a functional reactive Flux implementation

Connecting MobX to our app

Understanding Supported APIs and How to Use Them

Understanding Supported APIs and How to Use Them

Linking libraries and APIs with native code

Getting familiar with a list of native APIs covered by React Native

Retrieving and saving photos with CameraRoll API

Getting your exact location with GeoLocation API

Learning about persistence with AsyncStorage API

Responding to user gestures with PanResponder

Working with External Modules in React Native

Working with External Modules in React Native

Diving deeper into react-navigation

The best open source packages to use

Writing your own Native modules

Integrating React Native with the existing apps

Understanding Application Development Workflow by Recreating Twitter

Understanding Application Development Workflow by Recreating Twitter

Defining your application requirements

Defining your application architecture using a desired design

Setting up functional navigation and a wireframe for your application

Mock data and style application screens including animations

Bringing Redux or MobX to your application and moving data mocks to a centralized state

Using the Twitter API to work with real data

Deploying Your App to App Store or Google Play

Deploying Your App to App Store or Google Play

Deploying iOS apps and how it's done in React Native

Deploying Android apps and how it's done in React Native

Introducing fastlane - automate your deployment workflow

Get to know Microsoft CodePush and integrate it with your application

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Introduction to JSX and how it's used in React Native

In Chapter 1, Understanding why React Native is the future of mobile apps, I've mentioned that React Native came from ReactJS and that the ability of React to use Virtual DOM is one of the main features that led to the creation of the React Native framework. Let's recap the concept of Virtual DOM. Virtual DOM means storing DOM nodes or components inside JavaScript instead of accessing the real DOM.

In React Native, we don't have DOM. Also, our app components structure may look similar to HTML syntax, but that is due to JSX.

Let's look at an example. When we set up our environment and created our first application, there were two files that I've mentioned:

index.ios.js 
index.android.js

Open the file relevant to the environment that you plan to develop. Basically both files will look the same, so...