zerotomastery – Complete React Native Developer in 2021: Zero to Mastery with Hooks 2021-1

Description

Complete React Native Developer in 2021: Zero to Mastery with Hooks is the name of the only course you need to learn React Native and write React Native iOS + Android applications extensively from scratch and as a developer Get hired mobile. Because of the many resources available online, figuring out where to start can be crippling, but more importantly, what course really helps you gain the skills you need to get hired. That's why Zero To Mastery Academy was created to provide useful courses and content to lead the industry and teach you the skills to advance in your job and get hired.

What you will learn in the Complete React Native Developer course in 2021: Zero to Mastery with Hooks

Build commercial-grade React Native apps and add them to the Apple App Store and Google Play

Build responsive, functional, and large-scale applications like a senior mobile developer

Ability to lead mobile application projects by choosing good architecture and helping others in your team

Build cross-platform apps for iOS and Android using Swift, Objective C, Java and Kotlin

Learn the latest features in React Native including Hooks, Context API, AsyncStorage, Animation and more

Gain skills in the latest ecosystem of a React Native developer from scratch

Integrate Stripe Payments into your online applications

Become the top 10% of React Native developers

Routing using React navigation

Set up authentication for users and create accounts using Firebase and Firebase functions

Use the main capabilities of mobile phones including camera and vibration

Use the latest ES6 / ES7 / ES8 / ES9 / ES10 JavaScript to write better code

Specific style of components and original style to make modern and beautiful applications

Google Maps API and add interactive maps to your projects

Course information

Publisher: zerotomastery Instructors: Andrei Neagoie and Mo Binni English language Level of training: basic to advanced Number of courses: 324 Duration: 27 hours and 30 minutes

Course topics Complete React Native Developer in 2021: Zero to Mastery with Hooks 2021-2

Introduction

Course Outline (6:32) Join Our Online Classroom! Exercise: Meet The Community Meeting Bruno (1:56)

React Native Fundamentals

How We Got Here – React Native History (9:32) How We Got Here 2 – React Native History (3:54) Why React Native? (3:32) Our First React Native App (11:54) React Native Internals (8:54) React Native Internals 2 (4:57) Exercise: Is There CSS? (2:55)

The 2 Paths

The 2 Paths (1:16) React DOM vs React Native (2:53) Recommended Setup (4:42) Endorsements On LinkedIN

Building With React Native: FocusTime App

FocusTime Demo (3:32) Introduction To Expo (2:47) Getting Ready To Hit The Ground Running! (3:27) Who Likes Snacks? (2:51) Running Snacks On Your Device (1:59) Running The FocusTime Demo On Your Device (2:08) Proper Preparation Prevents Poor Snacking! (4:13) Quick Recap On What We’ve Done So Far (2:06) A Rundown Of What’s In Our Snack (7:41) Building A Simple Navigation (4:52) Creating Our Focus Feature (8:15) Adding An Input (5:33) Storing The Focus Item (10:45) RoundedButton On Press Storing Our Focus Input (7:45) Quick Note On The Docs (2:01) Cleaning Up Our Styling (6:23) Building The Timer Feature (8:53) Building The Countdown Feature (11:40) Building The Countdown Feature Part 2 (6:26) Building The Countdown Feature Part 3 (8:07) A Quick Note On Error Screens (2:35) Keeping The App Awake (3:25) Reporting The Progress (8:16) Preset Timing Buttons (11:32) Vibrating When Finished With A Task (8:12) Going Full Circle (3:50) Quick Cleanup (1:04) Quick Review Of What We Have Accomplished So Far (6:50) Clearing The Subject (4:20) Storing Focus History (4:24) Storing Focus History With Statuses (4:28) Building The Focus History List (13:02) Clearing The Focus History (4:13) Storing And Loading The Focus History (7:06) Reflection Time! (3:26) Reflection Time Part 2! (3:17) Reflection Time Part 3! (3:41) Reflection Time Part 4! (1:54)

Mobile Development Professional: Local Setup

Before You , Read This! [MAC] Exporting FocusTime Locally (1:47) [MAC] Installing GIT (5:52) [MAC] Installing Node and Yarn (4:26) [MAC] Running it on IOS Simulator (4:09) [MAC] Installing Android Studio (1:52) [MAC] Installing Android SDK Tools (3:15) [MAC] Running On An Emulator (5:25) [MAC] Installing VSCode (3:21) [MAC] Optional: Using GIT With Visual Studio Code (6:38) [WINDOWS] Exporting FocusTime Locally (2:55) [WINDOWS] Installing GIT And VSCode (8:57) [WINDOWS] Optional: Using GIT With Visual Studio Code Part 1 (5:41) [WINDOWS] Optional: Using GIT With Visual Studio Code Part 2 (7:50) Github What Is It Good For? (3:39) Github Appendix [WINDOWS] Optional: Publishing Your Code To Github (7:48) [MAC] Optional: Publishing Your Code To Github (8:18) [WINDOWS] Installing Android Studio (11:38) [WINDOWS] Installing Node and Yarn (8:22) [WINDOWS] Running FocusTime On My Device (3:44) What If I’m Still Running Into Issues? (4:42)

Master Project: MealsToGo Project Setup

MealsToGo Demo (2:13) Project Files Setting Up Our Master Project (7:08) Note For Windows Users Creating The MealsToGo Project (1:28) [Optional] MealsToGo On Github (2:29) Watch This Before Getting ed! (1:05)

Master Project: MealsToGo Core Part 1

Time For Yoga! (2:52) Let’s Do Some Yoga! (5:51) React Native Flexbox And Snacks (4:14) Spring Cleaning The Expo Setup (5:04) Quick Note On Publishing Your App Exercise App Layout (2:36) Solution App Layout (5:59) Android StatusBar Issue (6:34) Quick Note On Debugging (2:30) Keeping Up With The Code Step By Step (1:31) Setting Up Eslint And Prettier (4:41) Using Eslint (5:25) Optimizing Eslint (2:51) Setting Up Prettier (3:00) Exercise SearchBar (4:06) Solution SearchBar (1:16) Feature Overview: Restaurant List Item (1:31) Restaurant Info Setup Part 1 (5:22) Restaurant Info Setup Part 2 (5:09) Exercise Restaurant Info Card (1:06) Solution Restaurant Info Card (3:49) Reflection Time Restaurant Info (1:40) The Way We Are Styling Feels Weird (4:37) Trying Out Styled Components (3:32) Installing And Using Styled Component (3:53) Quick Note On How To Look At Changes (2:32) Exercise Migrating To Styled Components (1:56) Solution Migrating To Styled Components (6:31) Uhoh We Have An IOS Error (3:24) How Do We Make Things Consistent (2:30) Setting Up Our Theme (8:40) Exercise Theme Cleanup (1:08) Solution Theme Cleanup (3:17) Custom Fonts Fonts Fonts! (0:53) Loading Custom Fonts (8:28) Adding The Address (2:15) Using SVG With Rating (6:49) Exercise Adding Open Now SVG (0:45) Solution Finishing Our Restaurant Card (6:14) Building A Spacer Component (8:44) Optimizing The Spacer Component (12:09) Hold Up Why Do We Need Consistency (5:54) Wait A Second It Won’t Render On Android (3:55) Creating A Typography Component And Cleanup (11:40) Solution Code Cleanup (2:19) FlatList! (0:25) List It! (15:24) No Inline Styles (2:11) Why Is There A White Bar? (4:00) Feature Overview: App Navigation (0:41) Navigation Installation (6:07) Exercise Tab Navigation (3:22) Solution Tab Navigation (6:16) Exercise Tab Bar Icons (3:11) Solution Tab Bar Icons (3:59) Simplifying Tab Icon Logic (5:14)

Master Project: MealsToGo Core Part 2

Feature Overview: Adding Data (6:50) Quick Recap Of What We’ll Be Doing (2:58) Fake An API Request (6:35) Quick Refresh On Promises (2:33) Let’s Transform The Data (6:34) Let’s Transform The Data Part 2 (6:13) Setting Up RestaurantContext (6:36) Hooking Up Our Context (13:48) Exercise Activity Indicator (1:04) Solution Activity Indicator (4:34) Quick Architecture Overview (4:40) Feature Overview Geocoding And Search (3:54) Setting Up Our Geocoding Service (7:35) Setting Up Our Geocoding Context (9:45) Hooking Up The Searchbar (11:48) Searching For Restaurants (6:26) Oh No A Bug! (0:40) Oh No A Bug Solution! (2:48) Key Warnings (2:52) Oh No An Anti-Pattern (7:35) Our Next Feature! (2:11) Let’s Optimize Before We Build! (0:51) Building Navigation Infrastructure For Scale (3:48) Restructuring Navigation (3:32) Setting Up Stack Navigation (7:56) Setting Up Restaurant Detail Navigation (3:32) Modals And Touch Feedback (4:30) Exercise Rendering The Card (1:39) Solution Rendering The Card (3:06) Back To Our Feature! (0:25) Exercise Menu List (1:34) Solution Menu List (7:28) Feature Overview Map (0:56) Installing React Native Maps (5:26) Map Screen And Search (9:21) Setting The Map Region (8:31) Rendering Map Markers (3:03) Custom Map Callout Exercise (4:43) Custom Map Callout Solution (8:57) Linking A Callout To Details (2:00) Feature Overview Favourites (0:57) Favourites Context (6:16) Hooking Up Favourites Part 1 (7:16) Hooking Up Favourites Part 2 (4:36) Building A Favourites Bar Part 1 (4:33) Building A Favourites Bar Part 2 (9:46) Storing Favourites (9:24) Uh Oh An Android Bug (2:11) Feature Overview Firebase And Authentication (6:20) Firebase Installation (5:41) Quick Note On Firebase (0:20) Let’s Test Authentication (5:54) Authentication Service And Context (5:39) Account And Authentication Navigation (6:31) Image Background Exercise (4:01) Image Background Solution (3:12) Lighten Up The Background (3:29) Account Screen Buttons (11:31) Exercise Login Screen (1:38) Solution Login Screen (9:19) Tying Up Some Loose Ends (2:09) Feature Overview: Registration (5:55) Activity Indicators (2:21) Favourites Is Broken Part 1 (6:17) Favourites Is Broken Part 2 (8:58) Adding A Watermelon Animation (8:44) Feature Overview: Settings (0:54) Building The Settings Feature (7:43) Making The Settings Screen Look Nice (4:00) Favourites Screen Exercise (2:20) Favourites Screen Solution (9:29) Animations And Polish (8:33) App Icons (2:21) Expo Publish (2:56)

Bonus: Mobile Camera Module

Feature Overview Camera Module (0:47) Setting Up The Infrastructure (3:16) Exercise Expo Camera (3:11) Solution Expo Camera (5:34) Taking A Picture (4:18) Additional Changes For Android To Take a Picture Storing And Retrieving The Picture (11:03)

Bonus: Google Maps Integration

Important Note On This Section! (4:40) Setting Up Your Payment Information For Firebase (2:44) Setting Up Firebase CLI (9:22) Quick Note On Running Functions Locally Running Firebase Functions Locally (5:05) Moving Location Mock Part 1 (9:55) Moving Location Mock Part 2 (3:54) Moving Restaurants Mock (11:46) Deploying Our Functions (4:07) Switching Between Local And Deployed Functions (3:57) Oh No Android Doesn’t Work! (1:06) Creating a Google Cloud Account (2:36) A Cautionary Tale (4:15) Configuring Our Google Cloud Project (5:31) Setting Up Google Node SDK (7:01) Firebase Environment (1:35) Integrating Geocoding API (8:11) Integrating Places API (6:29) Integrating Places Photos (4:21) Publishing Our Expo App And Functions (3:41) Minor Optimizations (3:01) Error Management (10:19)

Bonus: Mobile Payments With Stripe

Stripe Integration Demo (3:11) Stripe Integration Architecture (2:37) Signing Up For Stripe (4:13) Quick Recap On Firebase Functions (3:18) High Level Stripe Payment Flow (3:14) React Native Stripe Client (3:09) Setting Up Our Checkout (5:18) Our Credit Card Input (9:45) Getting Our First Stripe Token (6:14) Hooking Up Our Credit Card Form (6:48) Checkout Cart Overview (3:42) Building The Cart Context (8:19) Integrating Our Cart (11:44) Oh No! A Cart Bug (3:10) An Empty Cart (6:44) Adding The Checkout UI (10:31) ing On The Payment Flow (1:09) Getting The Payee Name (6:57) Setting Up For Payment (6:42) Building Our Payment Gateway (6:44) Payment Request Part 1 (8:43) Payment Request Part 2 (5:45) Payment Request Part 3 (6:52) Adding Loading State (6:21) Handling Error States (14:26) Exercise Cart Persistence (1:11) Solution Cart Persistence (5:09)

Bonus: Releasing To The App Stores

Before We Get ed (3:25) What Will I Get Out Of This Section (2:46) Building Standalone Apps (3:52) Building An APK For Android (3:23) Running Our APK On The Emulator (3:45) Creating A Play Store Account (4:14) Building iOS With Expo (6:49) Testing Your iOS Build On A Simulator (4:04) AppStore Connect And TestFlight (8:24)

Bonus: App Polish + Customizing MealsToGo

Adding Some Polish (1:31) Adapting The Theme Colors (3:55) Improving The Settings Screen (7:01) Improving Restaurant Detail Screen (2:30) The Favourites Bar (4:11)

Where To Go From Here?

Learning Guideline LinkedIn Endorsements Become An Alumni Coding Challenges

Appendix: Learn React

Before We Introduction To React.js (12:21) Quick Note: CRA Growing Pains create-react-app (11:50) create-react-app 2 (5:55) create-react-app 3 (2:11) Quick Note: Class vs Functional App.js (3:23) Code From Previous Video Your First React Component (20:13) Building A React App 1 (16:03) Building A React App 2 (9:47) Building A React App 3 (26:35) Styling Your React App (4:59) Building A React App 4 (15:30) Building A React App 5 (8:53) Building A React App 6 (9:05) Project Files Keeping Your Projects Up To Date (8:30) React Review (2:34) Error Boundaries In React (8:11) Deploying Our React App (5:10) React Hooks (3:42) React Hooks 2 (3:47) React Hooks 3 (3:23) React Hooks 4 (4:01) React Hooks 5 (3:36) React Hooks 6 (6:54) React Hooks 7 (9:16) React Hooks 8 (4:48) Project Files React Hooks 9 (5:58) Next Steps

Appendix: Git + Github

CWD: Git + Github (17:40) Github Update: Master –> Main CWD: Git + Github 2 (16:52)

Appendix: Open Source Projects

Contributing To Open Source (14:44) Contributing To Open Source 2 (9:42) Exercise: Contributing To Open Source

Prerequisite

Just basic JavaScript knowledge. If you’ve taken Complete Web Developer, you’re all set You DO NOT need any experience with React or any other framework/library You DO NOT need any Java, Kotlin, Swift or Objective C experience

Installation

After Extract, watch with your favorite Player.

Subtitle: None

Quality: 1080