Udemy

Platform

English

Language

Mobile Apps

Category

React Native - The Practical Guide [2021 Edition]

Use React Native and your React knowledge to build native iOS and Android Apps - incl. Push Notifications, Hooks, Redux

4.65 (21364 reviews)

Students

33 hours

Content

May 2021

Last Update
Regular Price

EXCLUSIVE SKILLSHARE OFFER
Exclusive  SkillShare  Offer
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will learn

Build native mobile apps with JavaScript and React

Dive deeper into React Native

Develop cross-platform (iOS and Android) mobile apps without knowing Swift, ObjectiveC or Java/ Android


Description

This course was completely updated and now does not only cover the latest version of React Native but also includes refreshers on JavaScript & React.js!

In addition, a whole section on "Push Notifications" was added.

---

Mobile apps are one of the best ways to engage with users - no wonder everyone wants to build one!

Wouldn't it be great if you could use your web development knowledge, combined with your React knowledge, to build mobile apps with that?

That's exactly what React Native allows you to do!

No need to learn Java, Android, Swift, ObjectiveC or anything of that - React and JavaScript is all you need to create awesome native mobile apps that work on both Android and iOS. That's probably the reason why Instagram, AirBnB, Skype and many other global companies are using it to build their mobile apps!

With this course, you can join this league. I'll teach you all you need to create your own React Native apps, publish them to the Google Play Store and Apple App Store and dive really deep into the React Native ecosystem.

You'll learn all about the theory behind React Native, its core concepts, how to build responsive designs that work on different device sizes, how to animate React Native apps, how to navigate around, use maps and the camera and so much more!

And which better way to learn than by building a real app? We'll build the "Awesome Places" app in this course, an app where users can share amazing pictures and the location where they took them. This app will allow you to see things like using maps, the camera, user authentication, connecting to a server and much more in action.

By the end of the course, we'll of course also go through all steps required to get it into an app store.

Here's a detailed look at what you'll get:

  • The core concepts and theory

  • How to use React, JavaScript and native components

  • Understand how to navigate in React Native apps

  • A closer look at styling and animating React Native apps

  • Instructions on how to use third-party libraries in your React Native app

  • Detailed examples on how to use maps or an image picker

  • A full user authentication flow

  • How to connect to a backend server from your app

  • Debugging instructions

  • And so much more!

What will you need to succeed in this course?

  • NO Android, Java, Swift or ObjectiveC knowledge is required!

  • JavaScript and React (for the web) knowledge is required though - you don't need to be an expert but the basics need to be set (though there are refresher sections in this course!)

I'd be very happy to welcome you in the course!

Max


Screenshots

React Native - The Practical Guide [2021 Edition]
React Native - The Practical Guide [2021 Edition]
React Native - The Practical Guide [2021 Edition]
React Native - The Practical Guide [2021 Edition]

Content

Getting Started

Welcome!

What is React Native?

Join our Online Learning Community

How React Native Works

Expo vs React Native CLI

Creating Our First React Native App

Working on Our First App

React Native Apps Are Hard Work!

React Native Alternatives

Course Requirements

Running the App on an Android Emulator

Running the App on an iOS Simulator

Course Outline

How to get the Most out of This Course

Useful Resources & Links

Diving into the Basics [COURSE GOALS APP]

Module Introduction

How to work with React Native Components

Setting Up A New Project

Planning the App

Working with Core Components

Getting Started with Styles

Flexbox & Layouts (Intro)

React Native Flexbox Deep Dive

Inline Styles & StyleSheet Objects

Components, Styles, Layouts

Working with State & Events

Outputting a List of Items

Styling List Items

Making it Scrollable with ScrollView!

A Better List: FlatList

More Components & Lists

Splitting the App Into Components

Passing Data Between Components

Working with Touchable Components

Deleting Items

Adding a Modal Overlay

More Flexbox Styling

Closing the Modal & Clearing Input

Finishing the Modal Styling

Wrap Up

Useful Resources & Links

Debugging React Native Apps

Module Introduction

What To Debug & How To Debug?

Running the App on a Real Device & Debugging

Handling Error Messages

Understanding Code Flow with console.log()

Using the Remote Debugger & Breakpoints

Working with the Device DevTools Overlay

Debugging the UI & Using React Native Debugger

Wrap Up

Useful Resources & Links

Components, Styling, Layouts - Building Real Apps [GUESS A NUMBER APP]

Module Introduction

Setup & App Planning

Adding a Custom Header Component

Adding a Screen Component

Working on the Layout

Styling a View as a "Card" Container (with Drop Shadows & Rounded Corners)

React Native Styling vs CSS Styling

Extracting a Card Component (Presentational Component)

Components & Styling

Color Theming with Constants

Configuring & Styling a TextInput

Cleaning User Input & Controlling the Soft Keyboard

Resetting & Confirming User Input

Configuring Components

Showing an Alert

Time to Finish the "Confirmation Box"

Adding Random Number Generation

Switching Between Multiple "Screens"

Adding Game Features: Hints & Validation

Checking the "Win" Condition with useEffect()

Finishing the Game Logic

Adding Custom Fonts

Installing expo-font

A Synthetic Style "Cascade": Custom Wrapper Components & Global Styles

Adding Local Images

Styling Images

Working with Network (Web) Images

A Closer Look at the "Text" Component (and what you can do with it)

<View> vs <Text> - A Summary

Building a Custom Button Component

Adding Icons

Exploring UI Libraries

Managing Past Guesses as a List

Styling List Items & Lists

ScrollView & Flexbox (Yes, that works!)

Using FlatList Instead of ScrollView

Wrap Up

Useful Resources & Links

Responsive & Adaptive User Interfaces and Apps

Module Introduction

Finding Improvement Opportunities

Working with More Flexible Styling Rules

Introducing the Dimensions API

Using Dimensions in "if" Checks

Calculating Sizes Dynamically

Problems with Different Device Orientations

Controlling Orientation & Using the KeyboardAvoidingView

Listening to Orientation Changes

Rendering Different Layouts

Fixing the GameOver Screen

Updating All Code to Update Dynamically

The Dimensions API & Responsive UIs

Expo's ScreenOrientation API

Introducing the Platform API

Working with Platform.select() and Platform in "if" Checks

Using Platform-specific Code Files

The Platform API

Using the SafeAreaView

Wrap Up

Useful Resources & Links

Navigation with React Navigation [THE MEALS APP]

Module Introduction

Planning the App

Adding Screens

Adding Fonts

Installing React Navigation & Adding Navigation to the App

MUST READ: Installing Different Navigators

Creating a StackNavigator

Navigating Between Screens

Alternative Navigation Syntax

Navigation Basics

Navigation to the "Meal Details" Screen

Pushing, Popping & Replacing

Outputting a Grid of Categories

Configuring the Header with Navigation Options

Passing & Reading Params Upon Navigation

Setting Dynamic Navigation Options

Default Navigation Options & Config

Navigation Params & Configuration

Grid Styling & Some Refactoring

Adding Meal Models & Data

Loading Meals for Categories

Rendering a Meals List

Passing Data to the Meal Detail Screen

Adding Header Buttons

Fixing the Shadows

Adding Tabs-based Navigation

Setting Icons and Configuring Tabs

navigationOptions inside of a Navigator

Adding MaterialBottomTabs

Adding a Favorites Stack

Adding a Menu Button & Drawer Navigation

Configuring the Drawer

More Navigation Config & Styling

Adding a DefaultText Component

Adding the MealDetail Screen Content

Time for the "Filters" Screen Content!

Passing Data Between Component & Navigation Options (Header)

[React Refresher] useEffect() & useCallback()

Wrap Up

Useful Resources & Links

State Management & Redux

Module Introduction

What is State & What is Redux?

Redux & Store Setup

Selecting State Slices

Redux Data & Navigation Options

Dispatching Actions & Reducer Logic

Switching the Favorites Icon

Rendering a Fallback Text

Adding Filtering Logic

Dispatching Filter Actions

Debugging Redux in React Native Apps

Wrap Up

Useful Resources & Links

Time to Practice - THE SHOP APP

Module Introduction

Planning the App

Creating the Basic Project Setup

The Products Overview Screen

Setting Up a Navigator

Styling the Product Items

Adding Touchable Components

Working on the Product Details Screen

Using Custom Fonts

Adding Items to the Cart

Implementing Header Buttons

Outputting Cart Items

Adding Logic to Delete Items

Adding Redux Logic for Orders

SideDrawer & The Orders Screen

Clearing the Cart

Styling Order Items

Making the "Show Details" Button Work

Building the "User Products" Screen

Reorganizing the ProductItem Component

Deleting Items

Adding Basic Editing & Navigation Logic

Handling User Input

Using Params to Submit User Input

Dispatching Actions for Creating & Updating

Time to Improve the App!

Wrap Up

Useful Resources & Links

Handling User Input

Module Introduction

Configuring TextInputs

Adding Basic Validation

Getting Started with useReducer()

Finishing the Merged Form & Input Management

Moving Input Logic Into A Separate Component

Connecting Input Component & Form

Tweaking Styles & Handling the Soft Keyboard

Alternatives & Wrap Up

Useful Resources & Links

Http Requests & Adding a Web Server + Database

Module Introduction

Setup & How To Send Requests

Installing Redux Thunk

Storing Products on a Server

Fetching Products from the Server

Displaying a Loading Spinner & Handling Errors

Setting Up a Navigation Listener

Updating & Deleting Products

Handling Additional Errors

Storing Orders

Displaying an ActivityIndicator

Fetching Stored Orders

Adding "Pull to Refresh"

Wrap Up

Useful Resources & Links

User Authentication

Module Introduction

How Authentication Works

Implementing a Basic Login Screen

Adding User Signup

Logging Users In

Managing the Loading State & Errors

Using the Token

Mapping Orders to Users

Improved Mapping (Scoping)

Implementing "Auto Login"

Adding Logout

Implementing "Auto Logout"

Auto-Logout & Android (Warning)

Wrap Up

Useful Resources & Links

Native Device Features (Camera, Maps, Location, SQLite, ...) [GREAT PLACES APP]

Module Introduction

Planning the App

Screen & Navigation Setup

Getting Started with the Form

Redux & Adding Places

Outputting a List of Places

Accessing the Device Camera

Configuring the Camera Access

Using the Picked Image

Storing the Image on the Filesystem

Diving into SQLite for Permanent Data Storage

Storing Data in the Local Database

Fetching Data from the Local Database

Getting the User Location

Showing a Map Preview of the Location

More on Environment Variables

Displaying an Interactive Map

Adding a Marker

Making the Picked Location "Saveable"

Storing Picked Places

Updating the Location Screen When the Location Changes

Storing the Address

Displaying the "Details" Screen

Finishing the "Map" Screen

Running the App on iOS

Running the App on Android

Wrap Up

Useful Resources & Links

Building Apps Without Expo

Module Introduction

Alternatives to Expo

Building Apps with Just the React Native CLI

Live Reload and RN CLI Apps

Adding Native Modules to Non-Expo Apps

Understanding Expo's "Bare Workflow"

Ejecting from Expo's "Managed Workflow"

When To Use Which?

Useful Resources & Links

Publishing React Native Apps

Module Introduction

Deployment Steps

Configuring the App & Publishing

Configuring Icons & The Splash Screen

Working with Offline Asset Bundles

Using "Over the Air Updates" (OTA Updates)

Building the Apps for Deployment (iOS & Android)

Publishing iOS Apps without Expo

Publishing Android Apps without Expo

Configuring Android Apps

Useful Resources & Links

Updating to React Navigation 5+

Module Introduction

What Changed?

Preparing the Project

More Information & Updating the Project Dependencies

Moving from the "Registry-like" to the "Component-based" Navigation Config

First Migration Steps

Converting More Stack Navigators to the New Config

Migrating the Drawer Navigation

Replacing the "Switch" Navigator & Auth Flow

Logout & Further Fixes/ Adjustments

Extracting Screen Params

Setting Screen Options Dynamically

Remaining Migration Steps & Roundup

A Summary Of All Important Changes

Useful Resources & Links

Course Roundup & Next Steps

Roundup & Next Steps

About the Course Update & LEGACY Lectures

About the Latest Course Update

[LEGACY] Diving into the Basics

What does LEGACY mean?

Module Introduction

Creating a New Project with Expo

Creating a New Project

JSX Elements you Can and Can't Use

Switching Away from create-react-native-app

The Starting Project

How to Use the Attached Code

Running the App on an Android Simulator (+ Setup)

Running our App on a Real Android Device

Preparing XCode (for iOS)

Running our App on an iOS Simulator

Running our App on an iOS Device

A Good Development Setup

Working on the App: Adding a Textinput

Styling - Understanding the Basics

More on Flexbox

Positioning Elements with Flexbox

Adding a Button and Managing State

Creating a Custom Component

[OPTIONAL] Assignment Solution

Listening to Touch Events

Reacting to Press Events

Using a ScrollView

Rendering Lists Correctly

Adding Static Images

Using Network Images

Adding a Modal

React vs React Native

JavaScript - Supported Features

Wrap Up

Useful Resources & Links

[LEGACY] Using Redux with React Native

Module Introduction

A Brief Redux Refresher

Install react-redux v6

Installing Redux and Creating a Basic Setup

Setting Up Actions

Setting Up the Reducer

Creating the Store

Connecting React Native to Redux

Wrap Up

Useful Resources & Links

[LEGACY] Debugging React Native Apps

Module Introduction

Using the Remote JavaScript Debugging console.log

Debugging with Breakpoints

Debugging+++ with React Native Debugger

Debugging Redux

Wrap Up

Useful Resources & Links

[LEGACY] Linking and Using Third Party Libraries

Module Introduction

Installing Libraries

Automatic Linking

Linking Libraries on iOS

Linking Libraries on Android

Using Library Features: Adding Icons

Wrap Up

[LEGACY] Navigation in React Native Apps

Module Introduction

Navigation in Web Apps vs Native Apps

Exploring Native Navigation Solutions

Fixing Installation Issues with React Native Navigation

Adding React Native Navigation to iOS

Adding React Native Navigation to Android

Finishing the Library Setup

Registering and Rendering a Screen

Adding a Tabs Screen (Tabs Navigation)

Adding Icons to Tabs

Connecting Screens to Redux

Updating Redux

Pushing Pages (Navigating "Forwards")

Popping Pages (Navigating "Backwards")

More Navigator Methods

Adding a Side Drawer

Using Navigation Events & Toggling the Drawer

Finishing the Drawer

Wrap Up

Useful Resources & Links

[LEGACY] Styling & Animating React Native Apps (Correctly)

Module Introduction

Using StyleSheet vs Normal JS Objects

Vanilla CSS vs React Native Styles

Flexbox in Action

Styling with Relative Units

"Global Styles" with Custom Components

Synthetic Cascading of Styles

Styling Text

Cascading Text Styles

Adding a Background Image

Creating a Re-Usable Custom Button

Editing the "Share Place" Screen

Styling & Splitting the "Share Place" Screen

Finishing the "Share Place" Screen

Your Challenge!

Styling the Side Drawer

Quick Bug Fix: PlaceInput Component

Intro: Cross Platform Styles & Responsiveness

Cross-Platform Styling Made Easy!

Using the Platform API

Loading Different Icons for Different Platforms

Using Different Entry Points (into the App)

Cross-Platform UI Libraries

The "Responsive Styling" Problem

Responsive Design Solutions

Using the Dimensions API

Adjusting Styles Dynamically (to changing Width / Height)

A Better Responsive Solution

Bug Fix: Centering with Margins

Cleaning Up Dimensions Listeners

Styling Navigation Items (react-native-navigation)

Preparing the App for Animations

Using the Animated API

[OPTIONAL] Assignment Solution

Animations Summary

Wrap Up

Useful Resources & Links

[LEGACY] Handling User Input

Module Introduction

Managing Input/ Control State

Adding Custom Validation Logic

Using the Validation State

Dispatching an Auth Action

Switching Form (Auth) Modes

Configuring Text Input Components

Handling the Soft Keyboard

Wrap Up

KeyboardAvoidingView and ScrollView

Useful Resources & Links

[LEGACY] Using Native Device Features - Maps, Camera & Image Gallery

Module Introduction

A Note on Installing React-Native Maps

Installing react-native-maps

Rendering a Map

Picking a Location on the Map

Adding a Map Marker

Animating Map Movement

Locating the User

Storing the Picked Location with Redux

Installing react-native-image-picker

Fixing Issues with React Native Image Picker

Using the Image Picker

Storing the Picked Images

Image Picker and the Data it Returns

Wrap Up

Useful Resources & Links

[LEGACY] Networking - Sending Http Requests

Module Introduction

Sending Http Requests - Theory

Firebase & The Right Database

Creating the Server

Using the Fetch-API

Storing Data in Firebase

Adjusting Firebase Functions (Fixing an Error)

Storing Images

Fixing Firebase Function Linting Errors

Finishing the Image Upload Function

Storing the Remaining Data

Adding the Activity Indicator

Handling Errors

Http, fetch() and Error Handling

Getting Data from the Server

Fixing an Error

Wrap Up

Useful Resources & Links

[LEGACY] Authentication in React Native Apps

Module Introduction

How Authentication Works in React Native Apps

Enabling Firebase Authentication

Signing Users Up

Using the Authentication Result (Response)

Supporting Signup and Login

Adding User Login

Protecting Routes on Firebase

Storing the Auth Token in Redux

Using the Auth Token

Fetching the Token in a Re-Usable Way

Protecting the Firebase Cloudfunction

Adding Places (Authenticated)

Storing the Token in AsyncStorage

Adding an Auto-Signin Functionality

Managing the Token Expiration

Clearing the Auth Storage (AsyncStorage)

Refreshing the Token

Adding User Logout

Refreshing the Token Without App Reloads

Wrap Up

Useful Resources & Links

[LEGACY] Polishing the App

Module Introduction

Identifying "Improvement Potential"

Shrinking Image Sizes

Resetting the "Share Place" Screen

Redirecting to Another Tab

Loading Places All The Time!

Improving Http Error Handling

Adjust the Image-Delete Code

Cleaning Stored Images (on Firebase)

Wrap Up

[LEGACY] Publishing the App

Module Introduction

Adding Launcher Icons

Adding a Splash Screen

Configuring & Building the App

Publishing to Google Play Store (Android)

Publishing to the App Store (iOS)

Publishing the App - Detailed Instructions

Useful Resources & Links

[LEGACY] Round Up

Course Roundup

Bonus: More Content!


Reviews

T
Thomas8 October 2020

I worked with RN a couple of years ago and I think this course will be great to get me up to speed and fill in any gaps in my knowledge.

T
Tim8 October 2020

Exceptional course. Where stuff didn't work because syntax changed, the updates were there in the lecture or adjacent, and the explanations were great for all of the content. I also liked how the Shopping App was expanded out more and more throughout the course, because it was a nice way of teaching us new concepts, while allowing us hands-on experience in applying those new concepts to an app we already built.

I
Ibrahim8 October 2020

L'explication est claire et précise. J'ai fais le bon choix et je compte aller jusqu'au bout de la formation.

V
Vishal5 October 2020

This course covers almost all the necessary things from a basic project set up to a complete developed react native app. Loved the way Maximilian Schwarzmüller explained all the important aspects of React Native clearly by creating a separate apps. I'm an Android developer and this course gives me confident to make a React Native cross platform mobile apps. Thanks!!! Enjoyed it!!!

T
Teofil30 September 2020

It is very well structured and it teaches all the concepts step by step. The course teaches principles and gives the reasons why for what it does, this in turn makes it easy to remember the concepts.

M
Maarten26 February 2020

Greatly and clear explanation in detail! Got some React knowledge, but also on that part i got some refreshning.

A
Alessio22 February 2020

Per adesso (lezione 28), il corso è perfetto. Effettivamente è un corso per chi quantomeno ha già le basi con React, le cui differenze vengono spiegate perfettamente permettendo subito di orientarsi con React-Native

N
Nicolas20 February 2020

Max is a great teacher, he explains very well everything, really takes time , step by step to make us understand the concept. I followed the React course as well long time ago and i can see he takes time to update the course as the technology evolved. You're one of my favorite teacher on Udemy platform. Keep going that way and thank you.

J
Jerry15 February 2020

As soon as I saw I was able to project the app I'm working with, in my own device, and changed the background color only, I lost it! I was laughing and already having a good time and even though it can eventually get hard, it is very exciting!

J
Justin14 February 2020

Really bad presentation. Chaos. Presenter is navigating around a very small screen quite rapidly, the screen is obscured by irrelevant debug messages at the bottom. It is all very hard to follow, and very hard to identify clearly the ways in which the pieces of code that are written relate to one another. Also code is continually obscured by things going on in his editor. I find this presentation style very confusing. If I were you I'd avoid this course. Without doubt some of the worst presentation I've seen on Udemy. Really quite lazy. Also what on earth does "trueish" (video 65) and "falseish" (video 68) mean in computing ?? These are ridiculous, meaningless terms to use.

V
Valérie13 February 2020

I am nearing the end of the course and I am not feeling like it was pain at all to learn it, the process much more felt like a nice walk outside on a sunny day. By stacking knowledge upon previously learned knowledge and repeating already learned concepts you quickly get used to all the techniques required to build a great application. Max is an amazing instructor, he is quite quick at some points but really, at these points, you're already just coding along with him at the same speed. When things get tricky, he takes his time to explain the deep concepts of what he's coding and why, which helps to grasp the bigger picture. I can only highly recommend this course to anyone who wants to get familiar with developing React Native apps and write code for multiple devices at the same time. Although previous, basic knowledge about ReactJS and ES6 are definitely needed - if you have them, React Native is a piece of cake. Thank you, Maximilian!

J
José12 February 2020

I took Max's React Complete Guide Course and loved it, I could immediately apply it to my projects and now I'm taking the React Native Course, I like it a lot so far and I know that I'll put Max's lessons to great use.

J
Jonathan12 February 2020

Watched the 5 hour intro on youtube and you got me. I decided to buy this course. and i'm glad I did!

E
Enrico12 February 2020

It's a great course, masterfully explained, the only weakness is about react-native-cli. I expected more about native programming, instead of falling always on expo, which many senior developers tend to avoid.

G
Gouthum11 February 2020

Max' is an amazing and thorough instructor. One of my favorite things about his methodology his how he lays out progressively more difficult tasks in a clear way. It might be useful if he described the philosophy of React/React-Native more, but that really speaks more to my learning style. Thanks MS!!!


Coupons

DateDiscountStatus
8/14/201994% OFFExpired
11/14/201992% OFFExpired
7/19/202094% OFFExpired
12/17/202091% OFFExpired

1436092

Udemy ID

11/16/2017

Course created date

7/18/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram