Learning Path: React: Modern Applications With React Native

Ascend your application development skills by building rich UI and get your app to production

What you'll learn

Understand common components within the library

Learn to use Flexbox

Create advanced animations for UI components

Create Facebook reaction widgets

Learn to implement various functionalities such as multithreading and fingerprint detection

Learn how to add custom modules and UI components using the device’s native language.

Add automated testing to your React Native application

Understand how React Native makes it easy to share code between iOS and Android apps in a sensible and customizable manner.

Gain exposure to React and React Native’s eloquent one-way data flow model, making apps easier to write and to debug

Requirements

Programming knowledge on JavaScript

Basic knowledge on web development

Description

React has taken the web development world by storm, and it is only natural that its unique architecture and third-party support ecosystem should be applied to native application development. If you're familiar with React.js and basics of UI development and want to develop native applications for iOS and Android, then go for this Learning Path.
Packt’s Video Learning Paths are a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.


The highlights of this Learning Path are:

Build rich and engaging user experiences in React Native while maintaining peak application performance
Learn to fix Redux into your application
Leverage the best of iOS and Android for React Native development while maximizing code reuse and cohesion

Let’s take a quick look at your learning journey. This Learning Path covers React Native topics ranging from adding basic UI components to successfully implementing Redux. It follows a top-down approach, beginning with building rich user interfaces. These UIs will be created with both built-in and custom components. You will then animate UI’s to make the application feel more alive. You will then learn to store data in a native database and integrate it with the Facebook SDK. You will also learn to make Redux fit into your application. You will then learn about different strategies for working with data, including leveraging the popular Redux library and optimizing the performance of the application. You will step further into exposing native device functionality. Finally, you will see how to put your application into production and maintain its reliability.


By the end of this Learning Path, you will take your web development skills to the next level and get equipped with the expertise to build high-performing native apps with React.

Meet Your Experts:

We have combined the best works of the following esteemed authors to ensure that your learning journey is smooth:


Crysfel Villa is a senior software engineer at Modus Create. He's a passionate JavaScript coder and an accomplished software developer with over 10 years' experience in technical training, consulting, and systems analysis. Crysfel loves to write about emerging technologies and has deployed several apps to the Apple Store using React Native. He currently lives in NY and can be found attending tech meetups throughout the city.Stan Bershadskiy is an architect at Modus Create and holds a master's in computer science from NYIT. While doing full-stack development, he found working on the frontend most enjoyable because of the speed with which one can develop and switch focus towards JavaScript. Stan likes to involve himself in anything JavaScript-related, particularly around building rich applications for the desktop, web, and mobile. He is located in New York City and can be found co-organizing NYC.JS meetups. More recently, he has focused on promoting React Native by presenting at conferences and publishing blog posts.Joshua Lyman has been developing React Native applications since version 0.11, and has used the technology to release several production applications. He is active in the RN community, helping others answer questions when possible and contributing code and example repositories to help others out. He has been developing mobile applications in general for more than four years and also spends a lot of time on both web frontend work and backend servers, scaling the full stack. He often uses React (React Native's parent counterpart) for frontend work, and runs Node and C#/.NET servers on the backend. He helps clients do UI/UX reviews and design, and works with enterprises to create line-of-business applications; he occasionally does business intelligence work for companies, slicing and dicing data.

Overview

Section 1: React Native Recipes - Volume 1

Lecture 1 The Course Overview

Lecture 2 Adding Styles to Text and Containers

Lecture 3 Using Images to Mimic a Video Player

Lecture 4 Creating the Toggle Button

Lecture 5 Displaying a List of Items

Lecture 6 Adding Tabs to Viewport

Lecture 7 Using Flexbox to Create a Profile Page

Lecture 8 Setting Up a Navigator

Lecture 9 Creating the Reusable Button with Theme Support

Lecture 10 Building a Complex Layout for Tablets Using Flexbox

Lecture 11 Including Custom Fonts on iOS

Lecture 12 Including Custom Fonts on Android

Lecture 13 Using Font Icons

Lecture 14 Dealing With Universal Apps

Lecture 15 Detecting Orientation Changes

Lecture 16 Using WebView to Open External Websites

Lecture 17 Rendering Simple HTML Elements Using Native Components

Lecture 18 Creating Form Component

Lecture 19 Simple Animations

Lecture 20 Running Several Animations at the Same Time

Lecture 21 Animating Notifications

Lecture 22 Expanding and Collapsing Containers

Lecture 23 Loading Animation

Lecture 24 Removing Items from List Components

Lecture 25 Creating a Facebook Reaction Widget

Lecture 26 Displaying Images in Full Screen

Lecture 27 Storing and Retrieving Data Locally

Lecture 28 Retrieving Data from a Remote API

Lecture 29 Sending Data to a Remote API

Lecture 30 Establishing Real-Time Communications with Websockets

Lecture 31 Integrating Persistent Database Functionality with Realm

Lecture 32 Masking the Application Upon Network Connection Loss

Lecture 33 Synchronizing Locally Persisted Data with a Remote API

Lecture 34 Logging in with Facebook

Lecture 35 Sharing Content on Facebook

Lecture 36 Tracking Application Events with Facebook Analytics

Lecture 37 Installing Redux

Lecture 38 Defining Actions

Lecture 39 Defining Reducers

Lecture 40 Setting Up the Store

Lecture 41 Communicating with a Remote API

Lecture 42 Connecting the Store with the Views

Lecture 43 Storing Offline Content Using Redux

Lecture 44 Showing Network Connectivity Status

Section 2: React Native Recipes - Volume 2

Lecture 45 The Course Overview

Lecture 0 Exposing Custom iOS Modules

Lecture 46 Rendering Custom iOS View Components

Lecture 47 Exposing Custom Android Modules

Lecture 0 Rendering Custom Android View Components

Lecture 0 Handling Android Back Button

Lecture 0 Reacting to Changes in Application

Lecture 0 Copy and Pasting Content

Lecture 0 Authentication

Lecture 48 Hiding Application Content When Multitasking

Lecture 0 Background Processing on iOS

Lecture 0 Background Processing on Android

Lecture 0 Playing Audio Files on iOS

Lecture 49 Playing Audio Files on Android

Lecture 50 Building for Universal Windows Platform

Lecture 0 Building for macOS Desktop

Lecture 51 Building for Apple tvOS

Lecture 0 Creating Platform Specific UI Components

Lecture 0 Extending UI Components for Platform Specific Experiences

Lecture 52 Best Practices for Sharing Code Between Platforms

Lecture 0 Embedding a React Native Application Inside iOS Applications

Lecture 0 Communicating from an iOS Application to React Native

Lecture 0 Communicating from React Native to an iOS Application Container

Lecture 0 Invoking Handling by an External iOS Application

Lecture 0 Embedding a React Native Application Inside an Android Application

Lecture 53 Communicating from an Android Application to React Native

Lecture 54 Communicating from React Native to an Android Application Container

Lecture 55 Invoking Handling by External Android Application

Lecture 56 Invoking an External iOS and Android Application

Lecture 57 Deploying Development Builds to an Android Device

Lecture 58 Deploying Testing Builds to HockeyApp

Lecture 59 Deploying Over-the-Air Updates

Lecture 60 Installing the Environment

Lecture 61 Running the Inspector to Access Elements

Lecture 0 Integrating Appium with Mocha

Lecture 0 Selecting and Typing into Input Texts

Lecture 0 Pressing a Button and Testing the Result

Lecture 62 Optimizing React Native Application Size

Lecture 63 Optimizing the Performance of Native iOS Module and UI Components

Lecture 64 Optimizing the Performance of Native Android Modules and UI Components

Section 3: React Native Projects

Lecture 65 The Course Overview

Lecture 66 Introduction to React and React Native

Lecture 67 Installation (Mac)

Lecture 68 Installation (Windows)

Lecture 69 Verifying Installation

Lecture 70 Environment Setup for Sublime Text

Lecture 71 Starting the RelaxationStation App

Lecture 72 Basic React Native Code Structures and Organization

Lecture 73 Adding and Styling Components

Lecture 74 Adding Buttons and Images

Lecture 75 Custom Components and Props

Lecture 76 Navigation in React Native

Lecture 77 Static Data and Properties

Lecture 78 Intermediate Styling Techniques

Lecture 79 Flexbox and Application State

Lecture 80 Animations with LayoutAnimation

Lecture 81 Starting the BeBriefed App

Lecture 82 Pulling in Third-party Libraries

Lecture 83 Debugging Techniques in React Native

Lecture 84 Introducing Tabbed Navigation

Lecture 85 Switching Between Tabs

Lecture 86 Styling Enhancements

Lecture 87 Integrating Data from an External API

Lecture 88 Starting the Chat Now App

Lecture 89 Advanced Navigation Techniques

Lecture 90 Using the Linking API

Lecture 91 Introduction to Flux and Redux

Lecture 92 Redux Reducers and Actions

Lecture 93 Redux and Containers

Lecture 94 Chat Screen and Keyboard Tips

Lecture 95 Thunks, Pure Reducers, and Scrolling

Lecture 96 Two-way API Communication

Lecture 97 More Navigator Techniques

Lecture 98 AsyncStorage

Lecture 99 AysncStorage (Continued)

Lecture 100 Generating App Icons

Lecture 101 iOS App Icons and Display Name

Lecture 102 Android App Icons and Display Name

Lecture 103 Creating a Production Bundle

Lecture 104 Upgrading React Native Versions

Lecture 105 Community Resources and Giving Back

This Learning Path is for web developers who want to develop real-world native applications for iOS and Android. Familiarity with React .js and basics of UI development is assumed. Knowledge on JavaScript ES2015 is highly recommended.