Master React Native by Developing a Full Cross-Platform App
4.3 (81 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,197 students enrolled

Master React Native by Developing a Full Cross-Platform App

Learn how to design and create a cross platform mobile app with Adobe XD and React Native.
4.3 (81 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,197 students enrolled
Last updated 9/2019
English
English [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
23 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 6.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Cross Platform Development
  • React Native
  • Mobile Development
  • CSS
  • Java Script
  • Adobe XD
  • Design
  • Android Development
  • iOS Development
  • Firebase
  • Redux
Course content
Expand all 35 lectures 06:36:32
+ Project Overview
1 lecture 04:51

In this lecture we are going to talk about the project that we will be developing throughout the course.

Preview 04:51
+ Designing Our App with Adobe XD
1 lecture 10:35

In this lecture we will go through AdobeXD and how it can be used to help us design the app.
Link to XD file:
https://drive.google.com/open?id=1wdtVbo2PkECub2622ebSHKI5ZqxHlKho

Adobe XD Introduction
10:35
+ Project Setup
5 lectures 46:41

In this lecture we will be installing react native on our system.


Preview 08:07

In this lesson, you will be taught how to install everything that's needed to run a react-native project on Windows 10 using an Android emulator.

Steps: https://shift.infinite.red/getting-started-with-react-native-development-on-windows-90d85a72ae65

Installing React Native (Windows - Android)
14:04
Setting up Ignite
10:12

In this lecture students will learn how to set up their project using native base.


Installing Native Base
05:00

In this lecture we will go through the structure of the project that we have created, and learn a bit about react native.

Project Introduction
09:18
+ Project Development
6 lectures 01:07:43

In this lecture we will create the header component.


Preview 13:50

In this lecture we will style the header to make it look as we'd like.

Styling the Header
07:19

In this lecture we will start working on the promotional food item that displays when the app launches.

Creating the Promotional Food Item
12:43

In this lecture we continue working on our promo food item.


Working on the Promotional Food Item
11:45

Fixing some issues on Android and working on our promotional food item component.

Working on the Promotional Food Item pt 2
07:53

Finishing up our promotional food item component.

Finishing the Promotional Food Item
14:13
+ Navigating to multiple screens and passing parameters
7 lectures 01:32:38

In this lecture we will create the Food Screen.

Creating the Food Screen
07:32

In this lecture we will learn how to navigate to different screens in react native.


Navigating to the Food Screen
06:22

IN this lecture we will learn how to pass props to the Food Screen.

Passing Props with Navigation
07:18

In this lecture we will start creating the food item component.

Creating the Food Item Component
28:04

In this lecture we will learn how to pass props through navigation to our Food Items inside of the Food Screen.

Passing Props to the Food Item Component
06:21

In this lecture we will fill up our Food Items with the correct information.

Filling Food Items
17:19

In this lecture we will create the sidebar drawer, that is called from the header component.

Creating the Sidebar Drawer
19:42
+ Cart system
9 lectures 02:01:52

In this lesson we will create the basic skeleton for our Cart system.

Preview 09:25

In this lesson we will be adding styling to the previously created screen.

Defining Cart styles
09:45

Creating a separate Cart Item component that's going to be reused multiple times within the Cart container.

Creating the Cart Item component
09:08

In this lesson we will add styling to the CartItem component.

Defining CartItem styles
16:13

In this lesson we will create a new container where we will display the detailed information about the selected food.

Creating the Food Details screen
20:50

In this lesson we will replace the hard-coded information with the right variables for the selected food.

Passing parameters into FoodDetails
04:49

In this lesson we are going to create the CartRedux file in our project. This will allow us to have a central state that's accessible from every class.

Creating the CartRedux
18:42

In this lesson you are going to learn how to write data into the central state, and how to access the data that's saved there.

Adding objects into the central state
10:30

In this lesson, we are going to replace the hardcoded CartItems inside the Cart container. We will be generating items depending on what's saved in CartRedux's state.

Generating CartItems depending on the central state
22:30
+ Storing orders in an online database
6 lectures 52:12

In this lesson we will create a checkout container that will be used to display the form where you can fill in your personal info for the order.

Creating the Checkout container
06:47

In this lesson we will use different building blocks from native-base to build the interface for our checkout form, which is going to take text inputs from the customers and get them ready for sending into the database.

Creating the Checkout form
20:31

In this lesson you will learn how to properly set up a new Google Firebase project that we are going to connect with our application.

Starting the Firebase project
05:29

In this lesson you will learn how to create a configuration file that's going to be used to establish a connection between our application and the online database.

Configuring the database connection inside of our application
04:31

In this lesson you will learn how to create a service file inside of our project, that's going to have functions for adding orders into our database and deleting them.

Creating the Order Service
06:25

In this lesson, you will finally learn how to upload data from the application to the online database and store it there.

Adding data into the database
08:29
Requirements
  • A basic understanding of programming
  • Some familiarity with javascript
Description

Want to develop mobile apps but find Swift and Android Studio tedious and confusing? 
If only there was a cross platform solution where you could jump right in...
React Native is just what you are looking for, a powerful framework for designing native cross platform applications.

In this course we will go through designing and developing a cross platform food delivery app using react native.

What you will learn in this course:

  • Get familiar with mobile development

  • Designing the app with Adobe XD

  • How to effectively set up a project with react native

  • Using third party libraries to improve our development experience

  • Developing front end components

  • Implementing highly performing animations

  • Adding our created screens to React Navigation

  • Creating components which can be reused, improving our coding efficiency

  • Connecting the app with an online database and storing data


We believe the best way to learn something is by creating real world usable software. Therefore, even if it's your first time trying out mobile development, by the end of this course, you will be very confident and knowledgable in this field, making it easy for you to enter this industry.

This application is applicable in every day life as it solves the problem of food ordering making it easier and more convenient for both the end user and the merchant, having such knowledge you will be able to upgrade and modify it as you desire.


This course might serve as a stepping stone for you to enter the mobile development industry, so what are you waiting for?



Who this course is for:
  • Developers who wish to increase their knowledge in cross platform development.
  • Students who want to learn how to create a full app from design to code.