Complete React Native in 2021: Zero to Mastery [with Hooks]

March 12, 2021 Courses
Complete React Native in 2021: Zero to Mastery [with Hooks]

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 27h 48m | 15.9 GB

Master React Native for iOS and Android Mobile App Development using JavaScript. Build a modern e-commerce mobile app!

Using the latest version of React Native, this course is focused on efficiency. Never spend time on confusing, out of date, incomplete tutorials anymore, and instead, learn to build professional and modern Android and iPhone (iOS) apps! Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies.

We guarantee you this is the most comprehensive online resource on React Native. This project based course will introduce you to all of the modern toolchain of a React Native app developer in 2021. Along the way, we will build a massive restaurant application using React, React Hooks, Expo, React Navigation, Firebase, Styled-Components, Google Maps/Places API, React Animations, Stripe Payments, + more. This is going to be a full iOS and Android app!

The curriculum is going to be very hands on as we walk you from start to finish of releasing a professional React Native project all the way into production. We will start from the very beginning by teaching you React basics and then going into advanced topics so you can make good decisions on architecture and tools on any of your future React Native projects.

All code is going to be provided step by step and even if you don’t like to code along, you will get access to the the full master project code so anyone signed up to the course will have their own app to put on their portfolio right away.

The topics covered will be:

  • React Basics
  • React Native Fundamentals
  • Debugging React Native
  • React Navigation
  • React Hooks
  • Custom React Hooks
  • Firebase API
  • Google Maps API
  • React Best Practices
  • React Native Best Practices
  • Persistance + Session Storage
  • Android Development
  • iOS Development
  • Lottie Animations
  • Eslint And Cleaning Up Code
  • Asynchronous Javascript
  • React Native AsyncStorage and Animation
  • CSS in JS – Styled Components
  • React Native Styling
  • Installing Custom Fonts
  • Device Permissions
  • React Native App Layout
  • Modular React Code
  • Building On Expo
  • Distributing App to App and Google Play Store
  • Integrating Payments With Stripe API
  • + more

Wait wait… I know what you’re thinking. Why aren’t we building 10+ projects? Well, here’s the truth: Most courses teach you React Native and do just that. They show you how to get started, build 10 projects that are simple and easy to build in a day, and just add some styling to make them look fancy. In real life though, you’re not building silly applications. When you apply to jobs, nobody is going to care that you built a really pretty single page app. Employers want to see you build large apps that can scale, that have good architecture, and that can be deployed to the app stores.

Let me tell you 3 reasons why this course is different from any other React Native tutorial online:

1. You will build the biggest project you will see in any course. This type of project would take you months to implement yourself.

2. This course is taught by 2 instructors that have actually worked for some of the biggest firms using React Native. Mo is a super star when it comes to React Native. He is a Solutions Architect with over 7 years of experience in Software Architecture and Development. Having worked as a consultant for the majority of his career, he has seen it all in the Mobile Development world. He is also a tech lead who has build mobile and web apps for top banks, big tech companies, and one of the biggest online e-commerce stores in the world. Andrei has worked on enterprise level React applications for large tech firms in Silicon Valley as well as Toronto and his latest project was for a React Native app for one of the biggest pharmaceutical companies in the world. By having both of them teach, you get to see different perspective and learn from 2 senior developers as if you are working at a company together.

3. We learn principles that are important beyond just what you learn as a beginner. Using the instructor’s experiences you learn about design patterns, how to architect your app, organize your code, structure your folders, and how to think about performance. Let’s just say we don’t shy away from the advanced topics. But more importantly, we are committed to keeping this course up to date so that as the mobile landscape changes, you always have the latest best practices with you.

This course is not about making you just code along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial. No! This course will push you and challenge you to go from an absolute beginner in React Native to someone that is in the top 10% of React Native developers.

What you’ll learn

  • Build enterprise level React Native apps and deploy to Apple App Store and Google Play Store
  • Learn to build reactive, performant, large scale applications like a senior mobile app developer
  • Learn to lead Mobile App projects by making good architecture decisions and helping others on your team
  • Build cross platform mobile apps for iOS and Android without using Swift, Objective C, Java and Kotlin
  • Learn the latest features in React Native including Hooks, Context API, AsyncStorage, and Animation
  • Master the latest ecosystem of a React Native Developer from scratch
  • Become the top 10% React Native Developer
  • Stripe Payments (Online Payments) integration in your mobile apps
  • Set up authentication and user accounts using Firebase and Firebase Functions
  • Routing with React Navigation
  • Using the latest ES6/ES7/ES8/ES9/ES10 JavaScript to write clean code
  • Using native phone capabilities like Camera and Vibration
  • Google Maps API and adding interactive maps to your projects
  • Styled-Components and native styling to make modern and beautiful apps
Table of Contents

Introduction
1 Course Outline
2 Join Our Online Classroom!
3 Exercise Meet The Community
4 Meeting Bruno
5 Monthly Coding Challenges, Free Resources and Guides

React Native Fundamentals
6 How We Got Here – React Native History
7 How We Got Here 2 – React Native History
8 Why React Native
9 Our First React Native App
10 React Native Internals
11 React Native Internals 2
12 Exercise Is There CSS

The 2 Paths
13 The 2 Paths
14 React DOM vs React Native
15 Recommended Setup
16 Endorsements On LinkedIN

Building With React Native FocusTime App
17 FocusTime Demo
18 Introduction To Expo
19 Getting Ready To Hit The Ground Running!
20 Who Likes Snacks
21 Running Snacks On Your Device
22 Running The FocusTime Demo On Your Device
23 Proper Preparation Prevents Poor Snacking!
24 Quick Recap On What We’ve Done So Far
25 A Rundown Of What’s In Our Snack
26 Building A Simple Navigation
27 Creating Our Focus Feature
28 Adding An Input
29 Storing The Focus Item
30 RoundedButton On Press
31 Storing Our Focus Input
32 Quick Note On The Docs
33 Cleaning Up Our Styling
34 Building The Timer Feature
35 Building The Countdown Feature
36 Building The Countdown Feature Part 2
37 Building The Countdown Feature Part 3
38 A Quick Note On Error Screens
39 Reporting The Progress
40 Preset Timing Buttons
41 Keeping The App Awake
42 Vibrating When Finished With A Task
43 Going Full Circle
44 Quick Cleanup
45 Quick Review Of What We Have Accomplished So Far
46 Clearing The Subject
47 Storing Focus History
48 Storing Focus History With Statuses
49 Building The Focus History List
50 Clearing The Focus History
51 Quick Note On AsyncStorage
52 Storing And Loading The Focus History
53 Reflection Time!
54 Reflection Time Part 2!
55 Reflection Time Part 3!
56 Reflection Time Part 4!

Mobile Development Professional Local Setup
57 Before You Start, Read This!
58 [MAC] Exporting FocusTime Locally
59 [MAC] Installing GIT
60 [MAC] Installing Node and Yarn
61 [MAC] Running it on IOS Simulator
62 [MAC] Installing Android Studio
63 [MAC] Installing Android SDK Tools
64 [MAC] Running On An Emulator
65 [MAC] Installing VSCode
66 [MAC] Optional Using GIT With Visual Studio Code
67 [WINDOWS] Exporting FocusTime Locally
68 [WINDOWS] Installing GIT And VSCode
69 [WINDOWS] Optional Using GIT With Visual Studio Code Part 1
70 [WINDOWS] Optional Using GIT With Visual Studio Code Part 2
71 Github What Is It Good For
72 Github Appendix
73 [WINDOWS] Optional Publishing Your Code To Github
74 [MAC] Optional Publishing Your Code To Github
75 [WINDOWS] Installing Android Studio
76 [WINDOWS] Installing Node and Yarn
77 [WINDOWS] Running FocusTime On My Device
78 What If I’m Still Running Into Issues

Master Project MealsToGo Project Setup
79 MealsToGo Demo
80 Project Files
81 Setting Up Our Master Project
82 Note For Windows Users
83 Creating The MealsToGo Project
84 [OPTIONAL] MealsToGo On Github
85 Video Playback Speed
86 Watch This Before Getting Started!

Master Project MealsToGo Core Part 1
87 Time For Yoga!
88 Let’s Do Some Yoga!
89 React Native Flexbox And Snacks
90 Spring Cleaning The Expo Setup
91 Quick Note On Publishing Your App
92 Exercise App Layout
93 Solution App Layout
94 Android StatusBar Issue
95 Quick Note On Debugging
96 Keeping Up With The Code Step By Step
97 Setting Up Eslint And Prettier
98 Using Eslint
99 Optimizing Eslint
100 Setting Up Prettier
101 Exercise SearchBar
102 Solution SearchBar
103 Feature Overview Restaurant List Item
104 Restaurant Info Setup Part 1
105 Restaurant Info Setup Part 2
106 Exercise Restaurant Info Card
107 Solution Restaurant Info Card
108 Reflection Time Restaurant Info
109 The Way We Are Styling Feels Weird
110 Trying Out Styled Components
111 Installing And Using Styled Component
112 Quick Note On How To Look At Changes
113 Exercise Migrating To Styled Components
114 Solution Migrating To Styled Components
115 Uhoh We Have An IOS Error
116 How Do We Make Things Consistent
117 Setting Up Our Theme
118 Exercise Theme Cleanup
119 Solution Theme Cleanup
120 Custom Fonts Fonts Fonts!
121 Loading Custom Fonts
122 Adding The Address
123 Using SVG With Rating
124 Exercise Adding Open Now SVG
125 Solution Finishing Our Restaurant Card
126 Quick Reminder
127 Building A Spacer Component
128 Optimizing The Spacer Component
129 Hold Up Why Do We Need Consistency
130 Wait A Second It Won’t Render On Android
131 Creating A Typography Component And Cleanup
132 Solution Code Cleanup
133 FlatList!
134 List It!
135 Note On Content Container Style
136 No Inline Styles
137 Why Is There A White Bar
138 Feature Overview App Navigation
139 Navigation Installation
140 Exercise Tab Navigation
141 Solution Tab Navigation
142 Exercise Tab Bar Icons
143 Solution Tab Bar Icons
144 Simplifying Tab Icon Logic

Master Project MealsToGo Core Part 2
145 Feature Overview Adding Data!
146 Quick Recap Of What We’ll Be Doing
147 Fake An API Request
148 Quick Refresh On Promises
149 Let’s Transform The Data
150 Let’s Transform The Data Part 2
151 Setting Up RestaurantContext
152 Hooking Up Our Context
153 Exercise Activity Indicator
154 Solution Activity Indicator
155 Quick Architecture Overview
156 Feature Overview Geocoding And Search
157 Setting Up Our Geocoding Service
158 Setting Up Our Geocoding Context
159 Hooking Up The Searchbar
160 Searching For Restaurants
161 Oh No A Bug!
162 Oh No A Bug Solution!
163 Key Warnings
164 Oh No An Anti-Pattern
165 Our Next Feature!
166 Let’s Optimize Before We Build!
167 Building Navigation Infrastructure For Scale
168 Restructuring Navigation
169 Setting Up Stack Navigation
170 Setting Up Restaurant Detail Navigation
171 Modals And Touch Feedback
172 Exercise Rendering The Card
173 Solution Rendering The Card
174 Back To Our Feature!
175 Exercise Menu List
176 Solution Menu List
177 Feature Overview Map
178 Installing React Native Maps
179 Map Screen And Search
180 Setting The Map Region
181 Rendering Map Markers
182 Custom Map Callout Exercise
183 Custom Map Callout Solution
184 Linking A Callout To Details
185 Feature Overview Favourites
186 Favourites Context
187 Hooking Up Favourites Part 1
188 Hooking Up Favourites Part 2
189 Building A Favourites Bar Part 1
190 Building A Favourites Bar Part 2
191 Storing Favourites
192 Uh Oh An Android Bug
193 Feature Overview Firebase And Authentication
194 Firebase Installation
195 Quick Note On Firebase
196 Let’s Test Authentication
197 Authentication Service And Context
198 Account And Authentication Navigation
199 Image Background Exercise
200 Image Background Solution
201 Lighten Up The Background
202 Account Screen Buttons
203 Exercise Login Screen
204 Solution Login Screen
205 Tying Up Some Loose Ends
206 Feature Overview Registration
207 Activity Indicators
208 Favourites Is Broken Part 1
209 Favourites Is Broken Part 2
210 Adding A Watermelon Animation
211 Feature Overview Settings
212 Building The Settings Feature
213 Making The Settings Screen Look Nice
214 Favourites Screen Exercise
215 Favourites Screen Solution
216 Animations And Polish
217 App Icons
218 Expo Publish

Bonus Mobile Camera Module
219 Feature Overview Camera Module
220 Setting Up The Infrastructure
221 Exercise Expo Camera
222 Solution Expo Camera
223 Taking A Picture
224 Additional Changes For Android To Take a Picture
225 Storing And Retrieving The Picture

Bonus Google Maps Integration
226 Important Note On This Section!
227 Setting Up Your Payment Information For Firebase
228 Setting Up Firebase CLI
229 Quick Note On Running Functions Locally
230 Running Firebase Functions Locally
231 Moving Location Mock Part 1
232 Moving Location Mock Part 2
233 Moving Restaurants Mock
234 Deploying Our Functions
235 Switching Between Local And Deployed Functions
236 Oh No Android Doesn’t Work!
237 Creating a Google Cloud Account
238 A Cautionary Tale
239 Configuring Our Google Cloud Project
240 Setting Up Google Node SDK
241 Firebase Environment
242 Integrating Geocoding API
243 Integrating Places API
244 Integrating Places Photos
245 Publishing Our Expo App And Functions
246 Minor Optimizations
247 Error Management

Bonus Mobile Payments With Stripe
248 Stripe Integration Demo
249 Stripe Integration Architecture
250 Signing Up For Stripe
251 Quick Recap On Firebase Functions
252 High Level Stripe Payment Flow
253 React Native Stripe Client
254 Setting Up Our Checkout
255 Our Credit Card Input
256 Getting Our First Stripe Token
257 Hooking Up Our Credit Card Form
258 Checkout Cart Overview
259 Building The Cart Context
260 Integrating Our Cart
261 Oh No! A Cart Bug
262 An Empty Cart
263 Adding The Checkout UI
264 Starting On The Payment Flow
265 Getting The Payee Name
266 Setting Up For Payment
267 Building Our Payment Gateway
268 Payment Request Part 1
269 Payment Request Part 2
270 Payment Request Part 3
271 Adding Loading State
272 Handling Error States
273 Exercise Cart Persistance
274 Solution Cart Persistance

Bonus Releasing To The App Stores
275 Before We Get Started
276 What Will I Get Out Of This Section
277 Building Standalone Apps
278 Building An APK For Android
279 Running Our APK On The Emulator
280 Creating A Play Store Account
281 Building iOS With Expo
282 Testing Your iOS Build On A Simulator
283 AppStore Connect And TestFlight

Bonus App Polish + Customizing MealsToGo
284 Adding Some Polish
285 Adapting The Theme Colors
286 Improving The Settings Screen
287 Improving Restaurant Detail Screen
288 The Favourites Bar

Where To Go From Here
289 Become An Alumni
290 Learning Guideline
291 Coding Challenges
292 Endorsements On LinkedIN

Appendix Learn React
293 Before We Start
294 Introduction To React.js
295 Quick Note CRA Growing Pains
296 create-react-app
297 create-react-app 2
298 create-react-app 3
299 Quick Note Class vs Functional App.js
300 Code From Previous Video
301 Your First React Component
302 Building A React App 1
303 Building A React App 2
304 Building A React App 3
305 Styling Your React App
306 Building A React App 4
307 Building A React App 5
308 Building A React App 6
309 Project Files
310 Keeping Your Projects Up To Date
311 React Review
312 Error Boundaries In React
313 Deploying Our React App
314 React Hooks
315 React Hooks 2
316 React Hooks 3
317 React Hooks 4
318 React Hooks 5
319 React Hooks 6
320 React Hooks 7
321 React Hooks 8
322 Project Files
323 React Hooks 9
324 Next Steps

Appendix Git + Github
325 CWD Git + Github
326 Github Update Master — Main
327 CWD Git + Github 2

Appendix Open Source Projects
328 Contributing To Open Source
329 Contributing To Open Source 2
330 Exercise Contribute To Open Source

BONUS SECTION
331 Bonus Lecture

Resolve the captcha to access the links!