Development
Mobile Apps
React Native
React Native - The Practical Guide [2020 Edition]
4.7 (15,909 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.
87,968 students enrolled

React Native - The Practical Guide [2020 Edition]

Use React Native and your React knowledge to build native iOS and Android Apps - incl. Push Notifications, Hooks, Redux
Bestseller
4.7 (15,909 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.
87,968 students enrolled
Created by Academind by Maximilian Schwarzmüller, Maximilian Schwarzmüller
Last updated 8/2020
English
English, French [Auto], 6 more
  • German [Auto]
  • Indonesian [Auto]
  • Italian [Auto]
  • Polish [Auto]
  • Portuguese [Auto]
  • Spanish [Auto]
Preview this course
React Native - The Practical Guide [2020 Edition]
Current price: $118.99 Original price: $169.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 32.5 hours on-demand video
  • 40 articles
  • 301 downloadable resources
  • 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
  • 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
Course content
Expand all 339 lectures 32:43:57
+ – Getting Started
17 lectures 01:11:14

Welcome to this course! Let me introduce myself and give you an overview of this course!

Welcome!
Preview 03:30

Let's dive into the most important question first: What is React Native? This lecture takes a closer look!

What is React Native?
Preview 04:22
Join our Online Learning Community
00:21

We had a first look at what React Native is, let's now dive a bit deeper and see what exactly it does for us. 

How React Native Works
Preview 06:15

We know that components are compiled to native code, but what happens to the JavaScript portion of our app? This lecture explains how React Native handles that.

Expo vs React Native CLI
Preview 06:06
Node.js Download
00:15
Creating Our First React Native App
Preview 07:47
Working on Our First App
Preview 09:42

React Native has its edges. Learn about some of the limitations you'll face in this lecture. And learn why it won't really be an issue.

React Native Apps Are Hard Work!
Preview 02:53

We know what React Native offers - how does a good course align to that? Learn what's crucial to learn about React Native and how this course supports you with that.

React Native Alternatives
Preview 04:51

With all the theory out of the way (and our first app built!), let's ensure that you can really get the most out of this course. Here are the course requirements you need to bring.

Course Requirements
Preview 01:26
Course Requirement Refreshers
00:18
Running the App on an Android Emulator
Preview 08:36
Running the App on an iOS Simulator
Preview 03:15

Let's take a closer look at what this course has to offer in detail. Here's the course outline!

Course Outline
Preview 07:41

I want to ensure that you succeed in this course, so here's how you can get the most out of this course.

How to get the Most out of This Course
Preview 03:53

Attached, you'll find the module source code and useful resources.

Useful Resources & Links
00:02
+ – Diving into the Basics [COURSE GOALS APP]
24 lectures 01:59:44
Module Introduction
00:33
How to work with React Native Components
02:45
Setting Up A New Project
03:04
Planning the App
01:42
Working with Core Components
04:56
Getting Started with Styles
07:52
Flexbox & Layouts (Intro)
03:54
React Native Flexbox Deep Dive
12:19
Inline Styles & StyleSheet Objects
05:12

Time to test your knowledge on some of THE most important building blocks of React Native apps!

Components, Styles, Layouts
8 questions
Working with State & Events
09:44
Outputting a List of Items
03:51
Styling List Items
03:21
Making it Scrollable with ScrollView!
03:48
A Better List: FlatList
07:20

Now that we had a closer look at more components, let's check your knowledge.


More Components & Lists
3 questions
Splitting the App Into Components
04:34
Passing Data Between Components
06:48
Working with Touchable Components
08:39
Deleting Items
04:57
Adding a Modal Overlay
06:06
More Flexbox Styling
03:49
Closing the Modal & Clearing Input
06:45
Finishing the Modal Styling
05:08
Wrap Up
02:29
Useful Resources & Links
00:08
+ – Debugging React Native Apps
10 lectures 31:50
Module Introduction
00:32
What To Debug & How To Debug?
06:18
Running the App on a Real Device & Debugging
00:33
Handling Error Messages
05:26
Understanding Code Flow with console.log()
04:06
Using the Remote Debugger & Breakpoints
04:03
Working with the Device DevTools Overlay
02:17
Debugging the UI & Using React Native Debugger
07:25
Wrap Up
01:02
Useful Resources & Links
00:08
+ – Components, Styling, Layouts - Building Real Apps [GUESS A NUMBER APP]
36 lectures 03:49:07
Module Introduction
02:33
Setup & App Planning
03:25
Adding a Custom Header Component
07:54
Adding a Screen Component
05:32
Working on the Layout
07:03
Styling a View as a "Card" Container (with Drop Shadows & Rounded Corners)
07:03
React Native Styling vs CSS Styling
00:46
Extracting a Card Component (Presentational Component)
05:57
Components & Styling
4 questions
Color Theming with Constants
06:03
Configuring & Styling a TextInput
10:19
Cleaning User Input & Controlling the Soft Keyboard
05:23
Resetting & Confirming User Input
08:28
Configuring Components
2 questions
Showing an Alert
02:50
Time to Finish the "Confirmation Box"
07:44
Adding Random Number Generation
06:34
Switching Between Multiple "Screens"
10:41
Adding Game Features: Hints & Validation
11:02
Checking the "Win" Condition with useEffect()
10:11
Finishing the Game Logic
05:17
Adding Custom Fonts
09:50
Installing expo-font
00:43
A Synthetic Style "Cascade": Custom Wrapper Components & Global Styles
10:34
Adding Local Images
04:56
Styling Images
06:07
Working with Network (Web) Images
02:51
A Closer Look at the "Text" Component (and what you can do with it)
09:09
<View> vs <Text> - A Summary
01:30
Building a Custom Button Component
11:41
Adding Icons
04:43
Exploring UI Libraries
02:58
Managing Past Guesses as a List
07:56
Styling List Items & Lists
08:54
ScrollView & Flexbox (Yes, that works!)
07:20
Using FlatList Instead of ScrollView
09:50
Wrap Up
05:14
Useful Resources & Links
00:05
+ – Responsive & Adaptive User Interfaces and Apps
19 lectures 01:16:13
Module Introduction
02:26
Finding Improvement Opportunities
03:51
Working with More Flexible Styling Rules
03:08
Introducing the Dimensions API
03:50
Using Dimensions in "if" Checks
07:51
Calculating Sizes Dynamically
05:22
Problems with Different Device Orientations
03:11
Controlling Orientation & Using the KeyboardAvoidingView
03:49
Listening to Orientation Changes
05:31
Rendering Different Layouts
07:09
Fixing the GameOver Screen
02:09
Updating All Code to Update Dynamically
01:33

Time to check your Dimensions API knowledge.

The Dimensions API & Responsive UIs
3 questions
Expo's ScreenOrientation API
03:42
Introducing the Platform API
04:25
Working with Platform.select() and Platform in "if" Checks
07:04
Using Platform-specific Code Files
03:32

Do you know how to use the Platform API? Let's see...

The Platform API
4 questions
Using the SafeAreaView
05:55
Wrap Up
01:37
Useful Resources & Links
00:08
+ – Navigation with React Navigation [THE MEALS APP]
40 lectures 04:09:49
Module Introduction
01:14
Planning the App
05:46
Adding Screens
06:31
Adding Fonts
03:54
React Navigation Docs
00:07
Installing React Navigation & Adding Navigation to the App
06:44
MUST READ: Installing Different Navigators
00:28
Creating a StackNavigator
10:38
React Navigation & Code Attachments
00:46
Navigating Between Screens
06:50
Alternative Navigation Syntax
00:16
Navigation Basics
2 questions
Navigation to the "Meal Details" Screen
01:10
Pushing, Popping & Replacing
07:35
Outputting a Grid of Categories
07:55
Configuring the Header with Navigation Options
07:58
Passing & Reading Params Upon Navigation
04:29
Setting Dynamic Navigation Options
05:47
Default Navigation Options & Config
10:09
Navigation Params & Configuration
3 questions
Grid Styling & Some Refactoring
12:15
Adding Meal Models & Data
03:46
Loading Meals for Categories
04:34
Rendering a Meals List
18:04
Passing Data to the Meal Detail Screen
05:20
Adding Header Buttons
11:22
Fixing the Shadows
02:51
Adding Tabs-based Navigation
06:10
Setting Icons and Configuring Tabs
08:08
navigationOptions inside of a Navigator
00:39
Adding MaterialBottomTabs
09:24
Adding a Favorites Stack
13:29
Adding a Menu Button & Drawer Navigation
10:05
Configuring the Drawer
06:33
More Navigation Config & Styling
06:28
Adding a DefaultText Component
03:08
Adding the MealDetail Screen Content
11:17
Time for the "Filters" Screen Content!
11:57
Passing Data Between Component & Navigation Options (Header)
13:07
[React Refresher] useEffect() & useCallback()
02:00
Wrap Up
00:46
Useful Resources & Links
00:07
+ – State Management & Redux
13 lectures 01:08:03
Module Introduction
01:04
What is State & What is Redux?
04:08
Redux & Store Setup
10:58
Selecting State Slices
08:30
Redux Data & Navigation Options
05:04
Dispatching Actions & Reducer Logic
13:55
Switching the Favorites Icon
07:09
Rendering a Fallback Text
02:43
Adding Filtering Logic
06:16
Dispatching Filter Actions
06:08
Debugging Redux in React Native Apps
00:26
Wrap Up
01:33
Useful Resources & Links
00:08
+ – Time to Practice - THE SHOP APP
28 lectures 04:19:29
Module Introduction
01:34
Planning the App
10:42
Creating the Basic Project Setup
06:08
The Products Overview Screen
09:49
Setting Up a Navigator
10:41
Styling the Product Items
19:15
Adding Touchable Components
12:26
Working on the Product Details Screen
05:56
Using Custom Fonts
05:10
Adding Items to the Cart
21:08
Implementing Header Buttons
18:29
Outputting Cart Items
11:48
Adding Logic to Delete Items
10:33
Adding Redux Logic for Orders
09:09
SideDrawer & The Orders Screen
13:07
Clearing the Cart
01:43
Styling Order Items
12:43
Making the "Show Details" Button Work
08:55
Building the "User Products" Screen
09:36
Reorganizing the ProductItem Component
05:29
Deleting Items
07:57
Adding Basic Editing & Navigation Logic
06:37
Handling User Input
12:05
Using Params to Submit User Input
02:16
Dispatching Actions for Creating & Updating
15:34
Time to Improve the App!
09:22
Wrap Up
01:12
Useful Resources & Links
00:05
+ – Handling User Input
10 lectures 01:14:02
Module Introduction
00:59
Configuring TextInputs
08:21
Adding Basic Validation
05:45
Getting Started with useReducer()
12:12
Finishing the Merged Form & Input Management
12:59
Moving Input Logic Into A Separate Component
11:18
Connecting Input Component & Form
14:47
Tweaking Styles & Handling the Soft Keyboard
05:28
Alternatives & Wrap Up
02:06
Useful Resources & Links
00:07
+ – Http Requests & Adding a Web Server + Database
15 lectures 01:17:34
Module Introduction
01:03
Setup & How To Send Requests
03:27
Installing Redux Thunk
02:03
Storing Products on a Server
09:05
Fetching Products from the Server
07:53
Displaying a Loading Spinner & Handling Errors
13:03
Setting Up a Navigation Listener
05:15
Updating & Deleting Products
04:47
Handling Additional Errors
09:31
Storing Orders
04:34
Displaying an ActivityIndicator
03:12
Fetching Stored Orders
08:15
Adding "Pull to Refresh"
04:12
Wrap Up
01:07
Useful Resources & Links
00:07
Requirements
  • React knowledge is a must (but you absolutely DON'T have to be an expert)
  • JavaScript knowledge is a must, next-gen JavaScript knowledge (i.e. ES6+) is recommended
  • NO Android/ Java or iOS (Swift, ObjectiveC) development experience is required
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

Who this course is for:
  • Anyone who wants to use React to build native mobile apps
  • Every mobile developer who wishes to learn only one language to write cross-platform mobile apps
  • Every mobile or web developer who's interested in writing high-performance native apps with JavaScript
Featured review
Fotios Tsakiris
Fotios Tsakiris ( 41 courses, 15 reviews )
a year ago
Even though React Native changes very often... Max (the instructor) is keeping everything up to date and moreover he even adds more lectures to new topics. He takes you from React, to React Native very smoothly. His explanations are very deep, and given in a friendly and pleasant way. There are links to other resources, so you can dive deeper. So, all you need to do, is to follow along, check the Q&A's and repeat again and again crucial lectures. Happy coding :)