Use React Native and your React knowledge and take your web development skills to build native iOS and Android Apps

React Native - The Practical Guide - Online Video Tutorial

React Native – The Practical Guide – Online Video Tutorial

This course includes

  • 16.5 hours on-demand video
  • 27 articles
  • 115 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments

  • Certificate of Completion

  • BESTSELLER
  • 4.6 (6,379 ratings)
  • 38,518+ students enrolled

What you’ll learn

  • Build native mobile apps with JavaScript and React.JS
  • Dive deeper into React Native
  • Develop cross-platform (iOS and Android) mobile apps without knowing Swift, Objective-C or Java/ Android

Contact / Consult / Hire React Native Development Experienced & Expert 

Description

Mobile applications 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, Objective-C 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 the 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

What will you need to succeed in this course?

  • NO Android, Java, Swift or Objective-C 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

I’d be very happy to welcome you on the course!

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, Objective-C) development experience is required

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

 

Contact / Consult / Hire React Native Development Experienced & Expert 

 

Free – Enroll Now

 

Course content

Section 1: Getting Started

1 Welcome!
2 What is React Native?
3 A Closer Look
4 What Happens to JavaScript?
5 Creating Our First React Native App
6 Dealing with Limitations of React Native
7 What a Good Course Offers
8 Course Requirements
9 Course Outline
10 How to get the Most out of This Course

Section 2: Diving into the Basics

11 Module Introduction
12 Creating a New Project
13 Ejecting from Create React Native App
14 Running the App on an Android Simulator (+ Setup)
15 Running our App on a Real Android Device
16 Running our App on an iOS Simulator
17 Running our App on an iOS Device
18 A Good Development Setup
19 Working on the App: Adding a Textinput
20 Styling – Understanding the Basics
21 Positioning Elements with Flexbox
22 Adding a Button and Managing State
23 Creating a Custom Component
24 Listening to Touch Events
25 Reacting to Press Events
26 Using a ScrollView
27 Rendering Lists Correctly
28 Adding Static Images
29 Using Network Images
30 Adding a Modal
31 React vs React Native
32 JavaScript – Supported Features
33 Wrap Up
34 Useful Resources & Links

Section 3: Using Redux with React Native

35 Module Introduction
36 A Brief Redux Refresher
37 Installing Redux and Creating a Basic Setup
38 Setting Up Actions
39 Setting Up the Reducer
40 Creating the Store
41 Connecting React Native to Redux
42 Wrap Up

Section 4: Debugging React Native Apps

43 Module Introduction
44 Using the Remote JavaScript Debugging console.log
45 Debugging with Breakpoints
46 Debugging+++ with React Native Debugger
47 Debugging Redux
48 Wrap Up

Section 5: Linking and Using Third-Party Libraries

49 Module Introduction
50 Installing Libraries
51 Linking Libraries on iOS
52 Linking Libraries on Android
53 Using Library Features: Adding Icons
54 Wrap Up

Section 6: Navigation in React Native Apps

55 Module Introduction
56 Navigation in Web Apps vs Native Apps
57 Exploring Native Navigation Solutions
58 Adding React Native Navigation to iOS
59 Adding React Native Navigation to Android
60 Finishing the Library Setup
61 Registering and Rendering a Screen
62 Adding a Tabs Screen (Tabs Navigation)
63 Adding Icons to Tabs
64 Connecting Screens to Redux
65 Updating Redux
66 Pushing Pages (Navigating “Forwards”)
67 Popping Pages (Navigating “Backwards”)
68 More Navigator Methods
69 Adding a Side Drawer
70 Using Navigation Events & Toggling the Drawer
71 Finishing the Drawer
72 Wrap Up

Section 7: Styling & Animating React Native Apps (Correctly)

73 Module Introduction
74 Using StyleSheet vs Normal JS Objects
75 Vanilla CS vs React Native Styles
76 Flexbox in Action
77 Styling with Relative Units
78 “Global Styles” with Custom Components
79 Synthetic Cascading of Styles
80 Styling Text
81 Cascading Text Styles
82 Adding a Background Image
83 Creating a Re-Usable Custom Button
84 Editing the “Share Place” Screen
85 Styling & Splitting the “Share Place” Screen
86 Finishing the “Share Place” Screen
87 Your Challenge!
88 Styling the Side Drawer
89 Quick Bug Fix: PlaceInput Component
90 Intro: Cross Platform Styles & Responsiveness
91 Cross-Platform Styling Made Easy!
92 Using the Platform API
93 Loading Different Icons for Different Platforms
94 Using Different Entry Points (into the App)
95 Cross-Platform UI Libraries
96 The “Responsive Styling” Problem
97 Responsive Design Solutions
98 Using the Dimensions API
99 Adjusting Styles Dynamically (to changing Width / Height)
100 A Better Responsive Solution
101 Bug Fix: Centering with Margins
102 Cleaning Up Dimensions Listeners
103 Styling Navigation Items (react-native-navigation)
104 Preparing the App for Animations
105 Using the Animated API
106 Animations Summary
107 Wrap Up

Section 8: Handling User Input

108 Module Introduction
109 Managing Input/ Control State
110 Adding Custom Validation Logic
111 Using the Validation State
112 Dispatching an Auth Action
113 Switching Form (Auth) Modes
114 Configuring Text Input Components
115 Handling the Soft Keyboard
116 Wrap Up

Section 9: Using Native Device Features – Maps, Camera & Image Gallery

117 Module Introduction
118 Installing react-native-maps
119 Rendering a Map
120 Picking a Location on the Map
121 Adding a Map Marker
122 Animating Map Movement
123 Locating the User
124 Storing the Picked Location with Redux
125 Installing react-native-image-picker
126 Using the Image Picker
127 Storing the Picked Images
128 Image Picker and the Data it Returns
129 Wrap Up

Section 10: Networking – Sending Http Requests

130 Storing Images
131 Module Introduction
132 Sending Http Requests – Theory
133 Creating the Server
134 Using the Fetch-API
135 Storing Data in Firebase
136 Finishing the Image Upload Function
137 Storing the Remaining Data
138 Adding the Activity Indicator
139 Handling Errors
140 Getting Data from the Server
141 Fixing an Error
142 Wrap Up

Section 11: Authentication in React Native Apps

143 Module Introduction
144 How Authentication Works in React Native Apps
145 Enabling Firebase Authentication
146 Signing Users Up
147 Using the Authentication Result (Response)
148 Supporting Signup and Login
149 Adding User Login
150 Protecting Routes on Firebase
151 Storing the Auth Token in Redux
152 Using the Auth Token
153 Fetching the Token in a Re-Usable Way
154 Protecting the Firebase Cloud function
155 Adding Places (Authenticated)
156 Storing the Token in AsyncStorage
157 Adding an Auto-Signin Functionality
158 Managing the Token Expiration
159 Clearing the Auth Storage (AsyncStorage)
160 Refreshing the Token
161 Adding User Logout
162 Refreshing the Token Without App Reloads
163 Wrap Up

Section 12: Polishing the App

164 Module Introduction
165 Identifying “Improvement Potential”
166 Shrinking Image Sizes
167 Resetting the “Share Place” Screen
168 Redirecting to Another Tab
169 Loading Places All The Time!
170 Improving Http Error Handling
171 Cleaning Stored Images (on Firebase)
172 Wrap Up

Section 13: Publishing the App

173 Module Introduction
174 Adding Launcher Icons
175 Adding a Splash Screen
176 Configuring & Building the App
177 Publishing to Google Play Store (Android)
178 Publishing to the App Store (iOS)

Section 14:Round Up

179 Course Roundup