Build React Native Apps for Android and iOS

create programs in React Native and develop apps for iOS and Android devices
3.9 (55 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
2,418 students enrolled
Instructed by Remi Blais Development / Mobile Apps
$19
$25
24% off
Take This Course
  • Lectures 114
  • Length 6 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2016 English

Course Description

React Native enables you to build iOS and Android mobile apps and benefit from code reuse cross platform. React Native is an exciting new language backed by Facebook that allows you to create a native mobile experience on Android and iOS devices through a common coding experience. Apps can be developed fast using popular free text editors and testing is fast for iOS and Android - rapid mobile development

This course teaches developers at any level to get started with React Native and start coding. You will build cross platform mobile apps for Android and iOS in React Native! 

Lifetime learning and support - React Native is new and still maturing therefore this course will continue to grow and get updates as the language evolves. With lifetime access you can tune in anytime to see new updates, get new content and ask questions to guide the creation of new content.

This course will teach you React Native, get you started in building cross platform mobile apps for iOS and Android that deliver a native experience, provide you with hands-on experience and develop your skills. Learn how to test your mobile apps in the iOS Simulator and Android Emulator quickly as you work. Learn about errors and troubleshooting your code and benefit from Q&A and instructor support. 

This course moves from getting your free tools installed and setup, to getting started, to creating your first project to more advanced topics. This course is designed to be a one stop course covering both React Native for Android and iOS. After all thats the real value of learning React Native -- to learn once, build for multiple platforms and benefit from code reuse. 

Learn React Native because time and money is important and you want to invest in learning a powerful language that you can leverage to build mobile apps for Android and iOS. Take this course to learn React Native and start building app and receive added value in support, lifetime access to new material and updates, downloadable source code, coverage of professional coding and best practices, handouts, exercises and quizzes to test your knowledge and benchmark your learning. 

What are the requirements?

  • Students should have a computer and internet access to take this course
  • This course includes videos explaining the free software needed and used and how to install and configure it for Android and iOS React Native development

What am I going to get from this course?

  • Create React Native Projects
  • Write React Native Code for Android and iOS Development
  • Get the React Native Android Tools Setup
  • Get the React Native iOS Tools Setup

What is the target audience?

  • This course is for beginners and people that want to learn React Native for both Android and iOS
  • React Native is a maturing language and this course focuses on getting you up and running with the language
  • This course can be a complete learning source, refresher, supplementary learning program or quick reference
  • No prior programming knowledge is needed but people with React, mobile or web dev experience may find this course easier to follow

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: React Native Couse Welcome and Introduction
02:05

A quick introduction to React Native that briefly explains what React Native is and why learn it. Learn about the language syntax, advantages, developer experience and other possibilities.

03:45

Receive a warm welcome to this React Native Course, meet the instructor, get insight into course updates, new material, feedback and questions.

01:17

Brief message about video clarity and optimization to enhancing the viewing experience for students.

Article

These are frequently asked questions and answers. Commonly developers will have the same question and an answer benefits everyone in the course and learning. 

Section 2: React Native Android Environment, Software & Tool Setup on a Mac
02:31

Install the Java JDK following this simple tutorial. A Mac is used in this Lecture.

05:28

Install Android Studio to develop React Native apps for Android. Android Studio is an IDE used to develop for Android mobile devices. A Mac is used in this Lecture.

03:33

Configure and setup Android Studio on a Mac. Set the main configurations and choose settings that will enhance your experience as a learner working through the lectures and this course.  

04:11

Configure Android Studio part 2. Continue making sure everything needed is setup and consider additional options for development and coding.

01:18

Open bash_profile on a Mac in order to make edits including setting up the Android Environmental Variable. This lecture covers 3 different ways to open bash_profile and make edits. 

03:48

Check the location of the Android SDK and setup the ANDROID_HOME Environmental variable. This video covers setup on Mac OS X. Learn and get insight into some terminal commands.

Section 3: React Native Android Environment, Software & Tool Setup on Windows
04:56

Install the Java Development Kit (JDK) on a Windows OS. Install the JDK prior to installing Android Studio. This lecture is for those that develop on a system with a Windows OS installed. 

01:48

Check and verify that the correct locations and references are setup in Android Studio on Windows for the Android SDK and Java JDK. Having a correctly setup environment is essential for building React Native Android Apps. 

07:09

Install Android Studio including the Android SDK on a system running a Windows OS. This is an IDE used to build React Native Android apps. Make sure you have the Java JDK installed prior to installing Android Studio

03:00

Configure Android Studio on a Windows OS. The main configurations that will enhance your developer experience through this course are covered in this lecture. 

04:43

Make additional configurations to Android Studio on Windows by installing packages and reviewing Android SDK platforms. 

03:02

This lecture covers platform and plugin updates for Android Studio and the steps to follow when notification that an update is available appears for an installed package. This lecture was completed on Windows

02:31

This lecture covers installing missing Android SDK packages on Windows

01:11

In this lecture we start an Android Virtual Device instance on Windows through Android Studio's AVD Manager. This is a way to run an emulator on a Windows OS. 

Section 4: React Native Android Common Setup
Article

Locate the Android SDK location on your system quickly. The Android SDK location is an important piece of data needed when setting up the ANDROID_HOME environmental variable for React Native Android mobile development. 

Article

Overview on how to setup the ANDROID_HOME Environmental Variable on Windows, Linux and Mac for React Native Android development. 

Section 5: Software Setup to Build React Native iOS Apps
00:56

Install and setup Xcode. Xcode is a powerful IDE used for React Native iOS development and provides iOS Simulators to test and run iOS React Native apps.

Section 6: Common Setup and Tools to Build React Native Android and iOS Apps
03:35

Install and setup React Native. Regardless of Android or iOS development this is a required step to setup a proper development environment for React Native.

01:37

When writing React Native code for Android and iOS there are different text editors that can be used on Windows, Mac and Linux. This lecture provides a brief overview of popular text editors that can be used to write code. 

04:08

Install and run sublime. A text editor many prefer for quickly writing and working with code. Optional and not required but may be helpful to quickly edit and write code.

03:04

Install Atom text editor that can be used to write code. Optional and not required but may be helpful to quickly write code or make edits. Setup the shell commands for quick file access from the terminal. Open folders and files quickly to make fast edits and improve workflow efficiency.

03:14

Install Sublime code/text editor on Windows. Sublime is a popular text editor that can be used to write cross platform React Native Android and iOS code. 

02:09

Install Atom Text Editor on Windows to write cross-platform React Native code for Android and iOS. Atom is a popular free open source text editor and a great alternative to others such as Sublime. 

03:52

Install Notepad++ text editor on Windows. Notepad++ can be used to write and modify code. 

Article

Overview on how to install Git for Windows, Linux and Mac. Git is a source code management (SCM) system, code repository and a popular distributed version control system (DVCS).

04:36

Lecture covering the installation of Git on Mac and Windows with an overview of how to install Git on Linux. Git is not a main part of this course but you can use Git to store, access and share React Native source code and, or work collaboratively with other developers on projects perhaps even other students from this course. 

4 questions

Quick Quiz to test knowledge about setting up React Native and the tools used for iOS and Android app development.

Section 7: The Xcode iOS Simulator
02:17

This lecture covers a few different ways to reload our React Native code in the iOS Simulator while working in Xcode. Live Reload is covered and demonstrated which is an efficient way to work with our code being reloaded for us in the simulator when we save.

Section 8: Android Virtual Devices and Emulator
04:06

This lecture explains and demonstrates a fix for an exception related to failure to find build tools that you may receive when deploying your React Native app to the Android Emulator. This lecture material was covered using a Mac. 

06:06

This lecture explores an exception for app:installDebug related to deploying to the Android Emulator. A solution and fix are explored and applied to resolve this exception. This lecture is covered on a Mac.

Section 9: React Native Basics
02:40

Learn more about React Native for iOS and Android. A brief high level overview and introduction for React Native.

Article

We compare React Native components and HTML elements to identify similar use cases for the benefit of developers familiar with HTML and coming from a web dev background

Article

Learn about the React Native View and Text components and get insight into how they relate to common tags used in web development. See code examples and learn how to use these components and what code you need to write.

Article

In this lecture adding an image component to a React Native Android app is covered. This lecture answers the question of how to add a local image to a React Native Android app

Article

In this lecture adding an image component to a React Native iOS app is covered. This lecture answers the question of how to add a local image to a React Native iOS App

Article

Some of the main commands for React Native to get up and running and create new projects.

React Native Overview
4 questions
Section 10: Create a React Native Project
02:38

Exciting React Native video tutorial to create a program. Apply these techniques to create any initial React Native program.

05:00

Make UI changes, learn about UI components and how styles are applied. Use the Xcode simulator to text code and see changes.

03:16

This lecture covers changing styles in React Native. Learn how to change the color and font size of elements in the UI by changing styles. This video also provides a basic overview of how styles are applied to UI components in the initial project we created. The iOS Simulator is used to show the style changes.

03:26

Learn how to define a new style and apply it to a Text component. Reload the Simulator and see the changes. This lecture also demonstrates troubleshooting a couple simple and easy to make errors when working with defining and applying styles in React Native iOS.

Section 11: React Native Project - FirstApp
03:37

Create a simple React Native project called FirstApp and review the directory structure and files created for us with our project. 

03:51

This lecture covers starting an Android Virtual Device and running the FirstApp project. The necessary commands are covered to start the virtual device, build and deploy our app and refresh the app after making small changes. This lecture material was covered using a Mac.

01:42

This lecture covers the Android emulator and Live Reload. Changes are made to FirstApp and those changes are refreshed in the emulator using Live Reload. This is an important feature that enhances the developer experience. The material on this lecture is covered using a Mac. 

01:54

This lecture covers running our React Native FirstApp in the iOS Simulator. Minor changes are made to our apps content and we reload our app in the simulator to see the changes. 

02:20

This lecture covers enabling live reload in the iOS simulator, making some changes to our React Native iOS app, saving the changes and reloading our app to see the changes in the simulator. We continue to work with our FirstApp and a Mac is used for this lecture material. 

02:15

This lecture covers Text components and styles in React Native while working with FirstApp. Simple changes are made to add new content to our mobile app. The Android emulator is used to see the changes. 

03:06

This lecture covers making more code changes, optimizing code, working with variables and reviewing our changes to this point. The discussion on Text components, styles and the Android emulator is continued to reinforce concepts learned. 

04:09

This lecture covers making changes and working with Text Components and applying styles but using the iOS Simulator to reload and review changes. This lecture reinforces some content covered in other lectures that used the Android Emulator instead of the iOS Simulator for running and reloading our FirstApp. A Mac was used to cover the material in this lecture. 

Section 12: HelloWorldApp - Cross Platform (iOS & Android)
04:32

This lecture covers refactoring our React Native HelloWorldApp to benefit from code reuse between our iOS and Android versions. In this exciting lecture we truly take our app cross platform and experience the benefits of React Native for mobile development. 

04:20

In this exciting lecture we focus on the core code for our React Native HelloWorldApp and make the final adjustments needed. We test our app in the iOS Simulator and Android Emulator and make modifications to our core code to see the changes in our cross platform app. 

06:51

This lecture covers making changes to our React Native HelloWorldApp and testing those changes in the iOS Simulator and Android Emulator. We experience the speed at which we can develop with React Native and test changes. 

02:42

This lecture covers live reload of our React Native app in the Android Emulator and iOS Simulator. We see and experience the speed at which we can make changes and test those changes for iOS and Android

02:38

This lecture covers making changes to our React Native HelloWorldApp involving styles and variables. We explore a technique to enhance our code while working with style objects in React Native

6 questions

This quiz focuses on the material covered in the development and testing of our React Native HelloWorldApp for Android and iOS

Article

Create a cross platform greeting app for Android and iOS in React Native. Explore and experience the fundamental lessons learned through developing our React Native HelloWorldApp.

Section 13: Awesome Age App - Cross Platform (Android & iOS)
03:03

An overview of the React Native cross platform Android and iOS app we're building called the Awesome Age App.

05:02

In this lecture we create our React Native Awesome Age app project and run it inside the iOS Simulator. We briefly explore the default project files created for us to understand what happened when we created our React Native project and we explore the iOS Simulator by running our app, reloading our app and loading the menu to get options. 

05:43

In this lecture we run our React Native app in the Android emulator. We become familiar with the Android Virtual Device manager and review settings to avoid any errors loading and running our mobile app. We review the process for setting up a new Android virtual device and running our React Native app for Android inside the emulator.

03:18

In this lecture we setup our React Native iOS & Android index files and code. 

06:29

In this exciting lecture we write our core React Native app code that will be reused cross platform for iOS and Android

01:17

In this lecture we review our cross platform React Native app in the iOS Simulator & Android Emulator to see our changes. Our React Native app for Android & iOS is using our core code.

01:39

In the iOS Simulator and Android Emulator we enable live reload to work faster. We leverage the time saving features of building React Native apps to enhance our developer experience. 

05:32

We write core code for our cross platform React Native app for Android & iOS. We setup and apply styles in our React Native app for appearance and aesthetics. Each line of code we write in this lecture is reused for both our Android and iOS app versions. This is cross platform magic!

07:38

We continue to write code and functionality for our cross platform React Native app. Both the iOS & Android versions of our mobile app will use this common code. 

01:32

This lecture focuses on troubleshooting our React Native app code to gain some experience and increase our comfort with identifying and resolving errors displayed in the iOS simulator and Android Emulator.  

01:38

We run and use our cross platform React Native app in the iOS Simulator and Android Emulator. We explore the apps features and see results. Success!

02:35

In this lecture we enhance the user experience (UX) by controlling the user entered data input into our cross platform React Native app

02:01

We focus on guiding the users input in our React Native app for Android and iOS. We explore how guiding the users input closer to the context of where its entered allows us to reduce our code and optimize our Android & iOS app

01:40

In our React Native app we bring the user closer to the point of their data entry when our app loads in the iOS Simulator and Android Emulator thus saving the user time and an extra step. 

04:19

We optimize our React Native text input component for data entry and repeated use to enhance the user experience and make it faster for our app to be used. 

02:56

We fill out our React Native app with more UI Content to become more familiar with components and increase our apps aesthetics. 

01:33

We work with variables in our Android & iOS React Native app to make optimizations and implement base styles. 

01:17

We review, discuss and recap the UX enhancements & improvements we made to our React Native app for Android and iOS

02:10

Inline Styles in React Native are explored and applied to text components to enhance our Android and iOS app UI and content. This is a quick and simple way to make modifications to text and content. 

02:22

We continue to explore declaring and applying custom styles in React Native.

06:49

This lecture covers creating our own custom styled components in React Native. We bring back some familiarity to working with HTML elements such as strong and others. 

02:30

We make a new styled component in React Native for our heading and nest components

Article

The source code for this React Native App at its current point in development. This source be used as reference after students have progressed through the lectures to develop their Awesome Age Android and iOS app.  

Article

This lecture provides high quality and professional image assets for students to use in following the course and learning. This image set includes a mobile icon for our React Native app in png format, the PSD Photoshop file and a blank background. 

03:56

In this lecture we add image assets for Android and iOS to use in our cross platform React Native app

03:32

In this lecture we add an image to our React Native app, define the source property for our local image and apply some styles to make it all look nice to increase the appeal of the UI. 

Section 14: Awesome Weather App - Cross Platform (Android & iOS)

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Remi Blais, Senior Software Engineer, Project Manager, IT Expert

I’m a full stack senior software engineer and project manager with over 20 years professional IT experience. I’ve earned and been accredited with many globally recognized designations and certifications. I’ve mentored, led and helped many developers learn new languages, expand their knowledge, build their skills and become successful paid professionals. In my career I’ve built 100’s of applications and websites and have been involved in every aspect from strategy through continuous improvement to SEO. I’ve worked in the presentation, business and data access layers and understand intimately how each piece works and fits together which allows me to provide greater insight when teaching.

I’ve had the pleasure of working on projects for small, medium and large companies therefore understanding the unique challenges and needs of each. The vast experience I’ve gained in object oriented programming, professional coding and best practices I infuse into my courses to provide exceptional and added value. It’s not just about writing some code but about writing professional code in an efficient, scalable, clean, maintainable and optimized way.

I’m a IT consultant at Empellex Inc. and the courses we've created and designed use a full spectrum of learning aids to convey material in a clear and easy to understand way. Our goal is to provide students with learning support until they reach their goal and achieve their learning objectives. In my experience everyone has the ability to learn any language if taught in a way that matches their unique learning style with support provided. Our courses are built on this foundation and offer a variety of ways to learn everything you need to know to start your adventure and with lifetime access you will always have the support you need to be successful.

Ready to start learning?
Take This Course