React Native The Practical Guide

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

Last updated 2022-01-10 | 4.6

- 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

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

* 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

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 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

Course content

20 sections • 354 lectures

Getting Started 17 lectures

Welcome! Preview 03:30

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

What is React Native? Preview 04:22

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

Join our Online Learning Community Preview 00:23

How React Native Works Preview 06:15

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.

Expo vs React Native CLI Preview 06:06

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.

Node.js Download Preview 00:15

Creating Our First React Native App Preview 07:47

Working on Our First App Preview 09:42

React Native Apps Are Hard Work! Preview 02:53

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 Alternatives Preview 04:51

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.

Course Requirements Preview 01:26

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 Requirement Refreshers Preview 00:19

Running the App on an Android Emulator Preview 08:36

Running the App on an iOS Simulator Preview 03:15

Course Outline Preview 07:41

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

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

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

Useful Resources & Links Preview 00:02

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

Diving into the Basics [COURSE GOALS APP] 26 lectures

Module Introduction Preview 00:33

How to work with React Native Components Preview 02:45

Setting Up A New Project Preview 03:04

Planning the App Preview 01:42

Working with Core Components Preview 04:56

Getting Started with Styles Preview 07:52

Flexbox & Layouts (Intro) Preview 03:54

React Native Flexbox Deep Dive Preview 12:19

Inline Styles & StyleSheet Objects Preview 05:12

Components, Styles, Layouts

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

Working with State & Events Preview 09:44

Outputting a List of Items Preview 03:51

Styling List Items Preview 03:21

Making it Scrollable with ScrollView! Preview 03:48

A Better List: FlatList Preview 07:20

More Components & Lists

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

Splitting the App Into Components Preview 04:34

Passing Data Between Components Preview 06:48

Working with Touchable Components Preview 08:39

Deleting Items Preview 04:57

Adding a Modal Overlay Preview 06:06

More Flexbox Styling Preview 03:49

Closing the Modal & Clearing Input Preview 06:45

Finishing the Modal Styling Preview 05:08

Wrap Up Preview 02:29

Useful Resources & Links Preview 00:08

Debugging React Native Apps 10 lectures

Module Introduction Preview 00:32

What To Debug & How To Debug? Preview 06:18

Running the App on a Real Device & Debugging Preview 00:33

Handling Error Messages Preview 05:26

Understanding Code Flow with console.log() Preview 04:06

Using the Remote Debugger & Breakpoints Preview 04:03

Working with the Device DevTools Overlay Preview 02:17

Debugging the UI & Using React Native Debugger Preview 07:25

Wrap Up Preview 01:02

Useful Resources & Links Preview 00:08

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

Module Introduction Preview 02:33

Setup & App Planning Preview 03:25

Adding a Custom Header Component Preview 07:54

Adding a Screen Component Preview 05:32

Working on the Layout Preview 07:03

Styling a View as a "Card" Container (with Drop Shadows & Rounded Corners) Preview 07:03

React Native Styling vs CSS Styling Preview 00:46

Extracting a Card Component (Presentational Component) Preview 05:57

Components & Styling

Color Theming with Constants Preview 06:03

Configuring & Styling a TextInput Preview 10:19

Cleaning User Input & Controlling the Soft Keyboard Preview 05:23

Resetting & Confirming User Input Preview 08:28

Configuring Components

Showing an Alert Preview 02:50

Time to Finish the "Confirmation Box" Preview 07:44

Adding Random Number Generation Preview 06:34

Switching Between Multiple "Screens" Preview 10:41

Adding Game Features: Hints & Validation Preview 11:02

Checking the "Win" Condition with useEffect() Preview 10:11

Finishing the Game Logic Preview 05:17

Adding AppLoading Preview 00:12

Adding Custom Fonts Preview 09:50

Installing expo-font Preview 00:43

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

Adding Local Images Preview 04:56

Styling Images Preview 06:07

Working with Network (Web) Images Preview 02:51

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

vs - A Summary Preview 01:30

Building a Custom Button Component Preview 11:41

Adding Icons Preview 04:43

Exploring UI Libraries Preview 02:58

Managing Past Guesses as a List Preview 07:56

Styling List Items & Lists Preview 08:54

ScrollView & Flexbox (Yes, that works!) Preview 07:20

Using FlatList Instead of ScrollView Preview 09:50

Wrap Up Preview 05:14

Useful Resources & Links Preview 00:05

Responsive & Adaptive User Interfaces and Apps 21 lectures

Module Introduction Preview 02:26

Finding Improvement Opportunities Preview 03:51

Working with More Flexible Styling Rules Preview 03:08

Introducing the Dimensions API Preview 03:50

Using Dimensions in "if" Checks Preview 07:51

Calculating Sizes Dynamically Preview 05:22

Problems with Different Device Orientations Preview 03:11

Controlling Orientation & Using the KeyboardAvoidingView Preview 03:49

Listening to Orientation Changes Preview 05:31

Rendering Different Layouts Preview 07:09

Fixing the GameOver Screen Preview 02:09

Updating All Code to Update Dynamically Preview 01:33

The Dimensions API & Responsive UIs

Time to check your Dimensions API knowledge.

Expo's ScreenOrientation API Preview 03:42

Introducing the Platform API Preview 04:25

Working with Platform.select() and Platform in "if" Checks Preview 07:04

Using Platform-specific Code Files Preview 03:32

The Platform API

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

Using the SafeAreaView Preview 05:55

Wrap Up Preview 01:37

Useful Resources & Links Preview 00:08

Navigation with React Navigation [THE MEALS APP] 44 lectures

Module Introduction Preview 01:14

Planning the App Preview 05:46

Adding Screens Preview 06:31

Adding AppLoading Preview 00:18

Adding Fonts Preview 03:54

React Navigation Docs Preview 00:07

Installing React Navigation & Adding Navigation to the App Preview 06:44

MUST READ: Installing Different Navigators Preview 00:28

Creating a StackNavigator Preview 10:38

React Navigation & Code Attachments Preview 00:46

Navigating Between Screens Preview 06:50

Alternative Navigation Syntax Preview 00:16

Navigation Basics

Navigation to the "Meal Details" Screen Preview 01:10

Pushing, Popping & Replacing Preview 07:35

Outputting a Grid of Categories Preview 07:55

Configuring the Header with Navigation Options Preview 07:58

Passing & Reading Params Upon Navigation Preview 04:29

Setting Dynamic Navigation Options Preview 05:47

Default Navigation Options & Config Preview 10:09

Navigation Params & Configuration

Grid Styling & Some Refactoring Preview 12:15

Adding Meal Models & Data Preview 03:46

Loading Meals for Categories Preview 04:34

Rendering a Meals List Preview 18:04

Passing Data to the Meal Detail Screen Preview 05:20

Header Buttons: Using the Correct Version Preview 00:11

Adding Header Buttons Preview 11:22

Fixing the Shadows Preview 02:51

Adding Tabs-based Navigation Preview 06:10

Setting Icons and Configuring Tabs Preview 08:08

navigationOptions inside of a Navigator Preview 00:39

Adding MaterialBottomTabs Preview 09:24

Adding a Favorites Stack Preview 13:29

Adding a Menu Button & Drawer Navigation Preview 10:05

Configuring the Drawer Preview 06:33

More Navigation Config & Styling Preview 06:28

Adding a DefaultText Component Preview 03:08

Adding the MealDetail Screen Content Preview 11:17

Time for the "Filters" Screen Content! Preview 11:57

Passing Data Between Component & Navigation Options (Header) Preview 13:07

[React Refresher] useEffect() & useCallback() Preview 02:00

Wrap Up Preview 00:46

Useful Resources & Links Preview 00:07

State Management & Redux 13 lectures

Module Introduction Preview 01:04

What is State & What is Redux? Preview 04:08

Redux & Store Setup Preview 10:58

Selecting State Slices Preview 08:30

Redux Data & Navigation Options Preview 05:04

Dispatching Actions & Reducer Logic Preview 13:55

Switching the Favorites Icon Preview 07:09

Rendering a Fallback Text Preview 02:43

Adding Filtering Logic Preview 06:16

Dispatching Filter Actions Preview 06:08

Debugging Redux in React Native Apps Preview 00:26

Wrap Up Preview 01:33

Useful Resources & Links Preview 00:08

Time to Practice - THE SHOP APP 28 lectures

Module Introduction Preview 01:34

Planning the App Preview 10:42

Creating the Basic Project Setup Preview 06:08

The Products Overview Screen Preview 09:49

Setting Up a Navigator Preview 10:41

Styling the Product Items Preview 19:15

Adding Touchable Components Preview 12:26

Working on the Product Details Screen Preview 05:56

Using Custom Fonts Preview 05:10

Adding Items to the Cart Preview 21:08

Implementing Header Buttons Preview 18:29

Outputting Cart Items Preview 11:48

Adding Logic to Delete Items Preview 10:33

Adding Redux Logic for Orders Preview 09:09

SideDrawer & The Orders Screen Preview 13:07

Clearing the Cart Preview 01:43

Styling Order Items Preview 12:43

Making the "Show Details" Button Work Preview 08:55

Building the "User Products" Screen Preview 09:36

Reorganizing the ProductItem Component Preview 05:29

Deleting Items Preview 07:57

Adding Basic Editing & Navigation Logic Preview 06:37

Handling User Input Preview 12:05

Using Params to Submit User Input Preview 02:16

Dispatching Actions for Creating & Updating Preview 15:34

Time to Improve the App! Preview 09:22

Wrap Up Preview 01:12

Useful Resources & Links Preview 00:05

Handling User Input 10 lectures

Module Introduction Preview 00:59

Configuring TextInputs Preview 08:21

Adding Basic Validation Preview 05:45

Getting Started with useReducer() Preview 12:12

Finishing the Merged Form & Input Management Preview 12:59

Moving Input Logic Into A Separate Component Preview 11:18

Connecting Input Component & Form Preview 14:47

Tweaking Styles & Handling the Soft Keyboard Preview 05:28

Alternatives & Wrap Up Preview 02:06

Useful Resources & Links Preview 00:07

Http Requests & Adding a Web Server + Database 15 lectures

Module Introduction Preview 01:03

Setup & How To Send Requests Preview 03:27

Installing Redux Thunk Preview 02:03

Storing Products on a Server Preview 09:05

Fetching Products from the Server Preview 07:53

Displaying a Loading Spinner & Handling Errors Preview 13:03

Setting Up a Navigation Listener Preview 05:15

Updating & Deleting Products Preview 04:47

Handling Additional Errors Preview 09:31

Storing Orders Preview 04:34

Displaying an ActivityIndicator Preview 03:12

Fetching Stored Orders Preview 08:15

Adding "Pull to Refresh" Preview 04:12

Wrap Up Preview 01:07

Useful Resources & Links Preview 00:07

User Authentication 16 lectures

Module Introduction Preview 00:44

How Authentication Works Preview 03:36

Implementing a Basic Login Screen Preview 14:57

Adding User Signup Preview 12:44

Logging Users In Preview 06:26

Managing the Loading State & Errors Preview 09:01

Using the Token Preview 11:04

Mapping Orders to Users Preview 07:42

Improved Mapping (Scoping) Preview 01:14

Using AsyncStorage Preview 00:16

Implementing "Auto Login" Preview 16:50

Adding Logout Preview 07:20

Implementing "Auto Logout" Preview 15:26

Auto-Logout & Android (Warning) Preview 00:26

Wrap Up Preview 01:03

Useful Resources & Links Preview 00:07

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

Module Introduction Preview 01:13

Planning the App Preview 04:00

Navigation Setup in Next Lecture Preview 00:17

Screen & Navigation Setup Preview 13:27

Getting Started with the Form Preview 05:36

Redux & Adding Places Preview 07:29

Outputting a List of Places Preview 06:36

Accessing the Device Camera Preview 17:26

Configuring the Camera Access Preview 05:10

Using the Picked Image Preview 04:59

Storing the Image on the Filesystem Preview 08:29

Changed SQLite Import Preview 00:09

Diving into SQLite for Permanent Data Storage Preview 10:24

Storing Data in the Local Database Preview 07:53

Fetching Data from the Local Database Preview 07:00

Getting the User Location Preview 11:00

Showing a Map Preview of the Location Preview 13:24

Displaying an Interactive Map Preview 08:31

Adding a Marker Preview 05:27

Making the Picked Location "Saveable" Preview 07:22

Storing Picked Places Preview 02:50

Updating the Location Screen When the Location Changes Preview 04:25

Storing the Address Preview 07:33

Displaying the "Details" Screen Preview 06:28

Finishing the "Map" Screen Preview 06:19

Running the App on iOS Preview 03:05

Running the App on Android Preview 01:21

Wrap Up Preview 01:35

Useful Resources & Links Preview 00:08

Building Apps Without Expo 10 lectures

Module Introduction Preview 03:32

Alternatives to Expo Preview 06:01

Building Apps with Just the React Native CLI Preview 09:26

Live Reload and RN CLI Apps Preview 00:13

Important: Using React Native Image Picker Preview 00:06

Adding Native Modules to Non-Expo Apps Preview 08:55

Understanding Expo's "Bare Workflow" Preview 08:35

Ejecting from Expo's "Managed Workflow" Preview 10:59

When To Use Which? Preview 05:29

Useful Resources & Links Preview 00:03

Publishing React Native Apps 11 lectures

Module Introduction Preview 00:41

Deployment Steps Preview 04:31

Configuring the App & Publishing Preview 08:09

Configuring Icons & The Splash Screen Preview 09:13

Working with Offline Asset Bundles Preview 03:03

Using "Over the Air Updates" (OTA Updates) Preview 07:43

Building the Apps for Deployment (iOS & Android) Preview 19:07

Publishing iOS Apps without Expo Preview 10:23

Publishing Android Apps without Expo Preview 07:21

Configuring Android Apps Preview 00:21

Useful Resources & Links Preview 00:05

Updating to React Navigation 5+ 15 lectures

Module Introduction Preview 01:07

What Changed? Preview 03:55

Preparing the Project Preview 04:02

More Information & Updating the Project Dependencies Preview 02:08

Moving from the "Registry-like" to the "Component-based" Navigation Config Preview 10:35