IIRF Online > Development > Mobile Development > React Native > Complete React Native Bootcamp (with Hooks)
Complete React Native Bootcamp (with Hooks) by Udemy
Master React Native for iOS and Android Mobile App Development using JavaScript. Build a modern e-commerce mobile app!
Course Highlights
- 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
Skills you will learn!
Curriculum
7 Topics
Course Outline
Join Our Online Classroom!
Exercise: Meet Your Classmates and Instructor
Meeting Bruno
Complete Course Resources + Code
ZTM Resources
Monthly Coding Challenges Free Resources and Guides
7 Topics
How We Got Here - React Native History
How We Got Here 2 - React Native History
Why React Native?
Our First React Native App
React Native Internals
React Native Internals 2
Exercise: Is There CSS?
5 Topics
The 2 Paths
React DOM vs React Native
Recommended Setup
Keeping Your App Up To Date
Endorsements On LinkedIN
32 Topics
FocusTime Demo
Before We Get Going!
Introduction To Expo
Getting Ready To Hit The Ground Running!
Who Likes Snacks?
Running Snacks On Your Device
Running The FocusTime Demo On Your Device
Proper Preparation Prevents Poor Snacking!
Quick Recap On What We've Done So Far
A Rundown Of What's In Our Snack
Why We Don't Run On Web
How To Avoid The Notch
How To Avoid The StatusBar
Styling The Background
Setting Up Our Focus Feature
Adding Text Input
Storing A Subject
Adding A Button
Making The App Reactive
Cleaning Up Spacing
Adding A Countdown Component
Adding The Timer Feature
Hooking Up Our Countdown
Adding The Focus Subject
Hooking Up The Progress Bar
Vibrating When The Timer Ends
Adding Timer Controls
Resetting The Timer
Keeping The App Awake
Focus History Feature Setup
Designing Our Focus List
Populating The Focus History
23 Topics
Before You Start Read This!
[MAC] Exporting FocusTime Locally
[MAC] Installing GIT
[MAC] Installing Node and Yarn
[MAC] Running it on IOS Simulator
[MAC] Installing Android Studio
[MAC] Installing Android SDK Tools
[MAC] Running On An Emulator
[MAC] Installing VSCode
[MAC] Optional: Using GIT With Visual Studio Code
[WINDOWS] Exporting FocusTime Locally
[WINDOWS] Installing GIT And VSCode
[WINDOWS] Optional: Using GIT With Visual Studio Code Part 1
[WINDOWS] Optional: Using GIT With Visual Studio Code Part 2
Github What Is It Good For?
Github Appendix
[WINDOWS] Optional: Publishing Your Code To Github
[MAC] Optional: Publishing Your Code To Github
[WINDOWS] Installing Android Studio
[WINDOWS] Installing Node and Yarn
[WINDOWS] Running FocusTime On My Device
What If I'm Still Running Into Issues?
Exercise: Imposter Syndrome
9 Topics
MealsToGo Demo
Project Files
Navigating Package Versions and Staying Up-to-Date
Setting Up Our Master Project
Note For Windows Users
Creating The MealsToGo Project
[OPTIONAL] MealsToGo On Github
Video Playback Speed
Watch This Before Getting Started!
58 Topics
Time For Yoga!
Let's Do Some Yoga!
React Native Flexbox And Snacks
Spring Cleaning The Expo Setup
Quick Note On Publishing Your App
Exercise App Layout
Solution App Layout
Android StatusBar Issue
Quick Note On Debugging
Keeping Up With The Code Step By Step
Setting Up Eslint And Prettier
Using Eslint
Optimizing Eslint
Setting Up Prettier
Exercise SearchBar
Solution SearchBar
Feature Overview Restaurant List Item
Restaurant Info Setup Part 1
Restaurant Info Setup Part 2
Exercise Restaurant Info Card
Solution Restaurant Info Card
Reflection Time Restaurant Info
The Way We Are Styling Feels Weird
Trying Out Styled Components
Installing And Using Styled Component
Quick Note On How To Look At Changes
Exercise Migrating To Styled Components
Solution Migrating To Styled Components
Uhoh We Have An IOS Error
How Do We Make Things Consistent?
Setting Up Our Theme
Exercise Theme Cleanup
Solution Theme Cleanup
Custom Fonts Fonts Fonts!
Loading Custom Fonts
Adding The Address
Using SVG With Rating
Exercise Adding Open Now SVG
Solution Finishing Our Restaurant Card
Quick Reminder
Building A Spacer Component
Optimizing The Spacer Component
Wait A Second It Won't Render On Android
Hold Up Why Do We Need Consistency
Creating A Typography Component And Cleanup
Solution Code Cleanup
FlatList!
List It!
Note On Content Container Style
No Inline Styles
Why Is There A White Bar?
Feature Overview: App Navigation
Navigation Installation
Exercise Tab Navigation
Solution Tab Navigation
Exercise Tab Bar Icons
Solution Tab Bar Icons
Simplifying Tab Icon Logic
74 Topics
Feature Overview: Adding Data!
Quick Recap Of What We'll Be Doing
Fake An API Request
Quick Refresh On Promises
Let's Transform The Data
Let's Transform The Data Part 2
Setting Up RestaurantContext
Hooking Up Our Context
Exercise Activity Indicator
Solution Activity Indicator
Quick Architecture Overview
Feature Overview Geocoding And Search
Setting Up Our Geocoding Service
Setting Up Our Geocoding Context
Hooking Up The Searchbar
Searching For Restaurants
Oh No A Bug!
Oh No A Bug Solution!
Key Warnings
Oh No An Anti-Pattern
Our Next Feature!
Let's Optimize Before We Build!
Building Navigation Infrastructure For Scale
Restructuring Navigation
Setting Up Stack Navigation
Setting Up Restaurant Detail Navigation
Modals And Touch Feedback
Exercise Rendering The Card
Solution Rendering The Card
Back To Our Feature!
Exercise Menu List
Solution Menu List
Feature Overview Map
Installing React Native Maps
Map Screen And Search
Setting The Map Region
Rendering Map Markers
Custom Map Callout Exercise
Custom Map Callout Solution
Linking A Callout To Details
Feature Overview Favourites
Favourites Context
Hooking Up Favourites Part 1
Hooking Up Favourites Part 2
Building A Favourites Bar Part 1
Building A Favourites Bar Part 2
Storing Favourites
Uh Oh An Android Bug
Feature Overview Firebase And Authentication
Firebase Installation
Quick Note On Firebase
Let's Test Authentication
Authentication Service And Context
Account And Authentication Navigation
Image Background Exercise
Image Background Solution
Lighten Up The Background
Account Screen Buttons
Exercise Login Screen
Solution Login Screen
Tying Up Some Loose Ends
Feature Overview: Registration
Activity Indicators
Favourites Is Broken Part 1
Favourites Is Broken Part 2
Adding A Watermelon Animation
Feature Overview: Settings
Building The Settings Feature
Making The Settings Screen Look Nice
Favourites Screen Exercise
Favourites Screen Solution
Animations And Polish
App Icons
Expo Publish
7 Topics
Feature Overview Camera Module
Setting Up The Infrastructure
Exercise Expo Camera
Solution Expo Camera
Taking A Picture
Additional Changes For Android To Take a Picture
Storing And Retrieving The Picture
22 Topics
Important Note On This Section!
Setting Up Your Payment Information For Firebase
Setting Up Firebase CLI
Quick Note On Running Functions Locally
Running Firebase Functions Locally
Moving Location Mock Part 1
Moving Location Mock Part 2
Moving Restaurants Mock
Deploying Our Functions
Switching Between Local And Deployed Functions
Oh No Android Doesn't Work!
Creating a Google Cloud Account
A Cautionary Tale
Configuring Our Google Cloud Project
Setting Up Google Node SDK
Firebase Environment
Integrating Geocoding API
Integrating Places API
Integrating Places Photos
Publishing Our Expo App And Functions
Minor Optimizations
Error Management
27 Topics
Stripe Integration Demo
Stripe Integration Architecture
Signing Up For Stripe
Quick Recap On Firebase Functions
High Level Stripe Payment Flow
React Native Stripe Client
Setting Up Our Checkout
Our Credit Card Input
Getting Our First Stripe Token
Hooking Up Our Credit Card Form
Checkout Cart Overview
Building The Cart Context
Integrating Our Cart
Oh No! A Cart Bug
An Empty Cart
Adding The Checkout UI
Starting On The Payment Flow
Getting The Payee Name
Setting Up For Payment
Building Our Payment Gateway
Payment Request Part 1
Payment Request Part 2
Payment Request Part 3
Adding Loading State
Handling Error States
Exercise Cart Persistance
Solution Cart Persistance
9 Topics
Before We Get Started
What Will I Get Out Of This Section
Building Standalone Apps
Building An APK For Android
Running Our APK On The Emulator
Creating A Play Store Account
Building iOS With Expo
Testing Your iOS Build On A Simulator
AppStore Connect And TestFlight
5 Topics
Adding Some Polish
Adapting The Theme Colors
Improving The Settings Screen
Improving Restaurant Detail Screen
The Favourites Bar
4 Topics
New Year New Me
Why Upgrade
Upgrading
Smoke Testing the Upgrade
7 Topics
Thank You!
Become An Alumni
Learning Guideline
Coding Challenges
Endorsements On LinkedIN
Course Review
The Final Challenge
40 Topics
Before We Start
Introduction To React.js
Create React App
React App Folder Structure
React 18 Update
React Fundamentals
React Fundamentals 2
Hooks vs Classes
Class vs Functional App.js
Quick Note: Service Worker File
Your First React Component
Building A React App 1
The Dirty Little Secret To Become An Expert
Exercise: Learn to Read the Docs
Building A React App 2
Building A React App 3
Styling Your React App
Quick Note: JSON Placeholder
Building A React App 4
Building A React App 5
Building A React App 6
Project Files
Keeping Your Projects Up To Date
Exercise: React 18
Solution: Try Upgrading to React 18
React Review
Error Boundaries In React
Deploying Our React App
New React Hooks Documentation
React Hooks
React Hooks 2
React Hooks 3
React Hooks 4
React Hooks 5
React Hooks 6
React Hooks 7
React Hooks 8
Project Files
React Hooks 9
Next Steps
3 Topics
CWD: Git + Github
Github Update: Master --> Main
CWD: Git + Github 2
3 Topics
Contributing To Open Source
Contributing To Open Source 2
Exercise: Contribute To Open Source
1 Topic
Special Bonus Lecture
Complete React Native Bootcamp (with Hooks)
Related React Native Courses
Thank You!
Your review has been submitted successfully.