React React Native Mobile Development 3 In 1

Combine the power of React Native to build dynamic and stunning native mobile apps for Android and iOS

Last updated 2022-01-10 | 3.5

- Build custom reusable components for your mobile app and develop native apps for both iOS and Android
- Perform animations in your applications using the animation APIs
- Test and deploy your application for a production-ready environment

What you'll learn

Build custom reusable components for your mobile app and develop native apps for both iOS and Android

Perform animations in your applications using the animation APIs

Test and deploy your application for a production-ready environment

Grasp the concepts of Redux state management to build scalable apps

Add navigation to your App to build UX components for your React Native App

Integrate with Firebase as a data store and learn how to authenticate a user

* Requirements

* Prior programming experience of JavaScript is assumed.

Description

React Native is a JavaScript framework that lets you build native apps for both iOS and Android using a single language. A React native app is not a hybrid app so it's indistinguishable from native apps built with Java and Objective-C.

React has taken the web development world by storm. It's only natural that its unique architecture and third-party support ecosystem is applied to native application development. Using JavaScript, you can build an application that renders native UI components and accesses native device functionality.

This comprehensive 3-in-1 course is a step-by-step tutorial to building dynamic apps for iOS and Android with React Native. Design and build a fully-featured application using the newest features of React Native. Create increasingly complex real-world applications and explore React Native in depth.

Contents and Overview

This training program includes 3 complete courses, carefully chosen to give you the most comprehensive training possible.

The first course, Learning React Native Development, covers developing dynamic and stunning native mobile apps for Android and iOS using JavaScript. Delve directly into React Native to build native mobile apps. Develop apps that are fun, unique, and responsive with React Native. Learn React Native fundamentals to build interactive and user-friendly apps. The course aims at teaching you React Native irrespective of the underlying platform so that you can learn once, write anywhere.

The second course, Building Your Application with React Native, covers making your application with React Native and master UI design. This video takes you from the basics of React Native development all the way through to advanced components. A lot of different development techniques go into creating an app. In this course, you’ll start with a quick intro to React Native and how to build basic UI components, then move on to discussing data flow and React Native animations. Finally, we will look at how to publish your applications to Play Store or to private devices.

The third course, Publishing Your Application with React Native, covers creating impressive applications using the different tools of React Native. In this video, you’ll start with a look at state management and how to keep your code usable by other developers, how to build for your ideal user, how to create animations that pop, and how to publish your apps to the App Store. With the core UI built, we can take off our designer hats and focus on creating code that is clean and easy to reuse.

By the end of the course, you will have created your own application using React Native and learned to publish your app in the App Store and Play Store.

By the end of the course, you’ll create and publish impressive applications using the different tools of React Native.

About the Authors

MiftaSintaha is a big enthusiast of new web technologies that are out there to make everyone's life easier. She is a Software Engineer, a Tech Lead, and a content creator in YouTube where she authors various concepts in Computer Science and MEAN stack frameworks. Her ability to simplify the explanation of complex topics is what enhanced her popularity in YouTube. She has over 4 years' experience in working with frontend frameworks such as Angular and React, and backend frameworks such as Express.js and Django. Get the opportunity to learn how to write production-ready code with her courses. Find out more about her tutorials at her YouTube channel: MiftaSintahaCS You can also look at her work on GitHub @msintaha

Alvaro is a professional React Native developer with an interest in mobile technology, server-side API development, and iOS development. He plays bass in a rock band, and he enjoys road bikes and politics. The first thing he started programming was little buy scripts for Counter Strike. These were small hacks to buy faster and pick up all the necessary equipment. A few years later, he went to the University of Balearic Islands to study computer science. There he began to learn the fundamentals of computer programming using Ada, C, and Java. After finishing his B.Sc. in Computer Science, he started his M.Sc. That was when he started to do really fun things such as games in Lisp, creating a compiler of a subset of Ada instructions, and computer vision with OpenCV, among others. Before finishing his M.Sc, he started to work full-time, first as a developer for the hotels team at Logitravel (the second tourism dot com in Spain) and currently as an iOS developer at mola. He had no previous iOS or mobile development experience before entering mola, but he successfully managed to develop both server-side and mobile apps for a social network called Hoods. He also helped the awesome team at Mola in several other projects (Matchball, Zoco). Right now he is a mobile developer at APSL—Advanced Programming Solutions—and works on several products.

Who this course is for:

JavaScript developers who want to build native mobile applications.
Frontend React developers who want to extend their skillset to mobile development. No knowledge of React Native and mobile development is needed.

Course content

3 sections • 86 lectures

Learning React Native Development 41 lectures

The Course Overview Preview 03:16

This video provides an overview of the entire course.

Installation and Setup Preview 05:10

This video walks you through installation and setup to get started with React Native.

Learn about the tools you need to run the code
Learn tips and tricks to setup your IDE for seamless development

Running the Simulator Preview 04:48

This video demonstrates how to run a simple Hello World app in the simulator using a standard React Native boilerplate.

Open the terminal and type the necessary commands
Change the directory and run the command yarn run iOS
Scan the QR code with the mobile app

Understanding JSX Preview 04:41

This video discusses the basic concepts of JSX syntax and creating a simple component from scratch while explaining what each and every line of code does.

Write code from scratch
Discuss the changes

App Overview Preview 04:08

This video will give you an overview about an app like Instagram that will be built from scratch.

Map out the components for making an app using mock-ups
Setup the project environment and start building immediately

Styling the Header Preview 05:22

This video talks about how to style the header section of your Instagram app.

Create a view container that contains the padding and background color for the header section
Declare a style attribute to the view container that was created

Structuring the Photo Section Preview 06:04

This video talks about how to chunk out the photo section components and map out its blueprint using the mock-up.

Learn about newer built-in React Native components

Flexbox Preview 05:27

This video discusses the concepts of Flexbox in styling React Native components using examples.

Create three view tags and give each of them similar attributes

Styling the Photo Section Preview 06:46

This video talks about styling the photo section app using the concepts.

Learn how to implement Flexbox
Make the app looks presentable using external libraries

Endpoint to Fetch Data Preview 03:21

This video talks about how to fetch dynamic data in your Instagram app using REST API.

Discuss why dynamic data is needed
Create and serve your own REST API

Functional versus Class-Based Components Preview 04:57

This video talks about the difference between functional and class based components.

Cover concepts of both functional and class-based components
Cover concepts of props and state
Show examples in code

Axios Preview 03:39

This video talks about the library Axios.

Install the library in your project
Implement Axios to fetch data from your REST API

React States Preview 05:13

This video talks about how to persist app data using React states.

Create an empty array variable
Assign the data to the empty array
Render the data on the screen

Lifecycle Methods Preview 04:43

This video talks about the concepts of React’s built-in component lifecycle methods to solve infinity component re-rendering

Initialize the state outside the render function
Call the componentDidMount
Re-render the data

Looping Through Photo Section Preview 04:15

This video talks about how to loop through the data fetched from our REST API.

Learn how to loop through data in JSX syntax
Render the data from data object of our REST API

Implementing the Like Button Preview 06:29

This video talks about how to make a toggleable like button to capture button presses from the user.

Make the use of super() keyword to use the this keyword
Render the state object
Resolve the warning mentioned

What Is Redux? Preview 04:54

This video covers the concepts of Redux.

Show the whole flow of how Redux works
Discuss the difference Redux state and React state
Discuss why Redux state management is needed

Managing State Using Redux Preview 05:24

This video will show how to manage application state using Redux.

Install Redux and React Redux packages in order to integrate Redux in our applications

Action Creators Preview 04:41

This video will discuss about action creators that communicate with the reducers to update the state.

Learn the definition of action creators
Learn that action creators are needed to trigger the HTML call whenever we render our screen

Creating the Photos Reducer Preview 03:12

This video will see how to create a Photos Reducer.

Check the action type and update the action type with the payload

Calling Actions from Components Preview 05:20

This video will discuss how to call actions from within our components.

Know about the React Redux library that connects with React world with the Redux world

Login Form Overview Preview 04:19

This video will give you an overview of creating an app to handle user authentication.

Discuss mockups of the UI
Introduce React-native-elements to use external library for design

Structuring the Login Form Preview 04:44

This video talks about structuring and designing the login form using react-native-elements library.

Use the blueprint
Use React Native elements for the design creation
Structure the login form as per your preference

Firebase Configuration Preview 03:36

This video talks about setting up Firebase for managing login credentials and setting up the Firebase module in our app.

Get quickly introduced to Firebase and its uniqueness
Add your project on the Firebase Console
Add Firebase to your web app

Managing Input State Preview 04:35

This video talks about managing the state of the input fields in the login form using Redux.

Creating action creators for storing input field state
Connect the action creators to components

Storing Form Input in Reducers Preview 05:31

This video talks about storing the form input from action creators to Redux stores.

Setup providers for Redux stores
Creating the authentication reducer

Getting the Form Input Values Preview 03:03

This video wraps up the input field state management by getting the input values in the component for initiating login.

Write the mapStateToProps function
Connect the mapStateToProps
Get the input values stored in your state

Firebase Login API Preview 06:14

This video talks about the login process of the Firebase login API.

Create a login action creator
Handle login user success or failure

Login Wrapup Preview 04:41

In this video, we will wrap up our authentication and make some user experience changes in our login form.

Set up an action to check the processing of the login action
Set the loading flag initially to false

App Overview of IdeaPad Preview 03:45

This video gives an app overview of IdeaPad which is a fully fledged CRUD app that covers all concepts and is shippable.

Discuss the flow of the app using mockup of screens
Setup IdeaPad project

Configuring the Database Preview 05:01

This video talks about how to configure and structure the data in Firebase.

Discuss the Firebase data schema model
Write rules in Firebase database

Structuring the IdeaPad Form Preview 04:27

This video talks about how to structure the IdeaPad form component.

Create a config folder
Create an index.js file inside the folder
Create a new component called IdeaPad form and tweak details as per the requirement

Submitting Ideas Preview 05:42

In this video, we are going to explore about submitting ideas to our Firebase database.

Create another reducer called ideapad-form-reducer.js
Import the reducer
Create our own state management system

Showing List of Ideas Preview 03:25

In this video, we will be creating a component for showing a list of ideas and using React Native elements design patterns.

Create a component
Use the list and list item JSX by importing them from the React Native elements library

React Native Navigation Preview 05:01

This video talks about how to setup navigation in IdeaPad.

Introduce React navigation library
Discuss switching between navigation stacks

Navigating Between Screens Preview 05:09

This video talks about how to navigate from one component to another and using the header options in React navigation library.

Check if a new property is updated with a new value
Utilize React Native navigation setup to navigate between different screens

Fetching Data from Firebase Preview 06:09

This video talks about populating the list component with data from the Firebase database.

Discuss how to use Firebase module for fetching data
Modify data from firebase to loop through in the component

Editing Ideas Preview 04:46

This video talks about creating a component for editing ideas.

Navigate to the edit idea page
Edit our ideas from the idea page

Editing Action Creator Preview 04:47

This video talks about how to avail the edit functionality by creating action creators using Firebase API.

Use the ideaInputChange method by using the componentDidMount function
Initialize our form with the existing idea title and idea

Deleting Ideas Preview 03:27

This video talks about creating the delete functionality and wraps up the IdeaPad project.

Create an action creator for deleting our idea

Test your knowledge

Building Your Application with React Native 25 lectures

The Course Overview Preview 03:28

This video provides an overview of the entire course.

Initializing a New Project Preview 04:05

This video teaches how to create a new RN app and run it for iOS and Android.

Describe how to initialize a RN app
Describe how to run it for iOS
Describe how to run it for Android

Should You Primarily Test on Android or iOS? Preview 03:25

This video explains why it’s better to first develop for iOS.

Discuss why building for iOS
Advantages of building for iOS first
The effort to bring a RN iOS app to Android

Going Double Down on React Native Preview 04:31

This video explains why React Native is a good bet.

Discuss why it’s a great overall solution
Present some limitations that you need to know before deciding
Why React empowers collaboration between teams more easily

Goals of This Course Preview 02:18

This video explains the main contents of the course.

Outline the main concepts
Briefly explain all the main points of each concept
Introduction to the following chapter

Creating Your Environment for React Native Preview 03:34

This video gives you details that are necessary prerequisites to build React Native apps that can be deployed to Android and iOS stores.

Describe the necessary tools required to build React Native apps
Why those tools are needed and why it’s important building for both platforms
Your machine should be ready to start building RN apps

High-Level React Native Architecture Preview 06:33

This video explains the general architecture of React Native framework and its role in building a mobile app.

Differences between hybrid and native
Explain RN architecture
What does RN represents

Working with ES2017 JavaScript Preview 03:24

This video explains the language used for writing modern RN apps, JavaScript ES2017.

Discuss what is ES2017
Changes from ES5
The frequently used features

Understanding RN Project Environment Preview 05:12

This video explains the basics about the files and folders that gets created after initializing a new React Native project.

What’s inside a React Native project
Present the most relevant files
Explain an opinionated project structure

Introduction to Components Preview 03:48

This video explains the basic building block of any React app, the components.

Definition of a component
Discuss about lifecycle, state, and props
Explain React Native components

Debugging on Chrome Preview 03:06

This video details how to debug RN app using the Google Chrome debugger.

Start the debugger
Add breakpoints
Logging info to the Chrome console

React Native Built-in and Common Functions Preview 02:25

This video provides details on some of the built-in modules that RN comes with that can trigger native code.

Discuss about Native APIs
How we can use those native APIs
Platform-specific native APIs

Reading the Facebook RN Component Docs Preview 02:40

This video details how the RN documentation is organized and how to read it.

Explore React Native docs
Review Component docs
Review React docs

Typing Your Code with Flow Preview 04:15

This video explains how to add type checking to JavaScript using Flow.

Explain the Flow basics
A real code example
What happens with the code produced with Flow

Creating a Component Preview 07:57

This video explains how to create a React Native component from scratch.

The description of what will be built
Inject data to the component
Make the component interactive

Using Flexbox Preview 04:19

This video explains how to layout the previous component using Flexbox.

Flexbox definition
Inline styles and StyleSheets
Demo about how to layout the built component

Introducing the Key React Native Components Preview 03:15

This video defines the most fundamental React Native components.

Introduce View, Image, and Text
Introduce touchable components
Explore about ScrollView, a container component

Working with ListView and FlatList Preview 05:40

This video explains how to use the FlatList component to display and scroll through multiple items.

Differences with ScrollView
Introduction to FlatList
Implementation demo using FlatList

Installing Third- Party Components Via GitHub Preview 08:02

This video explains how to install third-party components through npm and GitHub.

Browse for third-party components
Install a dependency
Demo installing react-native-vector-icons

Phases of Product Design Preview 06:05

This video explains a four step approach to design an app.

Outline creation
Discuss on wireframing
App mock and navigation

Working with More Components to Make It Better Preview 03:31

In this video, we will explain the design process and how to build a library of UI components for our movies app.

The importance of UI kits
Demo about how to create a movie list
Create smaller styled components

Working with Guerrilla Design Preview 05:24

This video defines a bunch of tools that helps us to design our app.

Guerrilla design definition
Adding external icons and fonts
Generate free color schemes

Crafting Reusable Components Preview 07:03

This video details techniques for creating reusable components.

Introduction to the component
Principles of reusable components
Implementation of a demo

Introduction to Props and State Preview 03:15

This video explains the theory behind props and state.

Explain Props theory
Explain State theory
Combine props and state

Test your knowledge

Publishing Your Application with React Native 20 lectures

The Course Overview Preview 04:09

This video gives an overview of the entire course.

Unidirectional Data Flow Versus Two-way Data Binding Preview 06:16

This video explains the difference between unidirectional data flow (as in Redux) and two-way data binding (as in Angular).

Explain what is two-way data binding
Explain the Flux architecture
Describe why it’s important to have a global state management

Setting Up a Dev Environment Preview 03:04

This video explains how to install Redux in our app.

Install and configure Redux
Attach Redux to our components
Define actions that trigger state changes

Redux, Global State Manager for Your App Preview 23:17

This video explains how to implement Redux in our app.

Discuss what actions represent
Present Reducers, which handle actions
Explain connect, which connects our state to components

Installing Redux-Saga Preview 07:51

This video explains how to install, configure and run our first saga.

Install the library
Learn to change our actions to handle API requests
Build our first saga

Managing API Calls Preview 06:04

This video explains how we should add API calls to our app.

Discuss how to organize the code
Explain how to write an API wrapper
Write actual API calls

API Data Preview 05:57

This video explains what happens between fetching the data and saving it into our state.

Learn to fetch the data
Explore source code demo
Take and save the data

Handling API Errors Preview 06:20

This video explains how to catch and react to API errors.

Learn what to do when receiving an error
Explore source code demo
Steps to revert to previous state after the error

Installing React Navigation Preview 07:44

This video explains how to add navigation to our mobile app.

Install the library react-navigation
Explore basic navigation API
Integrate navigation to our mobile app

Why UX Is Important Preview 08:39

This video explains the use and importance of interface guidelines and UX.

Understand specific platform human interface guidelines
Study examples of good UX
Explain the term “responsiveness”

Creating UX Components for Your React Native App Preview 06:00

This video demoes some UX components for our app.

Introduce what we are going to build
Explore coding demo

Testing Your Components with Jest Snapshot Testing Preview 07:17

This video explains how to use Jest snapshot testing to test our UI components.

Install Jest
Learn snapshot tests
Implement demo using snapshot tests

Intro to Animations in React Native Preview 05:07

This video covers the basic theory of React Native animations.

Enhance our app with animations
Explore available animations modules
Learn trigger animations

Animated Module Preview 06:39

This video covers the React Native Animated module.

Study imperative animations
Learn to animate with gestures
Interpolate to create cool animation effects

LayoutAnimation Preview 05:33

This video covers the React Native LayoutAnimation module.

Explore module configuration
Study the theory behind LayoutAnimation
Study code example

Adding Animations to Our App Preview 07:04

In this video we will apply animations to our mobile app.

Describe what we are going to add
Explore source code demo

Example App – a Case Study Preview 04:02

This video explains a case study of an already published app.

Learn detail example app
Browse iOS platform
Browse Android platform

How to Publish for iOS Preview 13:07

This video explains step by step how to publish for iOS platform.

Observe App ID, certificates and provisioning profiles
Understand iTunes Connect portal
Upload the app

How to Publish for Android Preview 10:42

This video explains step by step how to publish for Android platform.

Create signing certificate
Add assets to the PlayStore
Create and uploading the APK

Demoing Applications for Clients Preview 08:52

How to demo our app before publishing it into both stores.

Study why it is important to demo our apps
Explore demo for iOS
Explore demo for Android