React Native – The Practical Guide [2020 Edition]

React Native – The Practical Guide [2020 Edition]
React Native – The Practical Guide [2020 Edition]

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 32.5 Hours | 17.1 GB
eLearning | Skill level: All Levels


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

This course was completely updated and now does not only cover the latest version of React Native but also includes refreshers on JavaScript & React.js!

In addition, a whole section on “Push Notifications” was added.

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

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
+ Table of Contents

Getting Started
Welcome!
React Native Alternatives
Course Requirements
Course Requirement Refreshers
Running the App on an Android Emulator
Running the App on an iOS Simulator
Course Outline
How to get the Most out of This Course
Useful Resources & Links
What is React Native
Join our Online Learning Community
How React Native Works
Expo vs React Native CLI
Node.js Download
Creating Our First React Native App
Working on Our First App
React Native Apps Are Hard Work!

Diving into the Basics [COURSE GOALS APP]
Module Introduction
Components, Styles, Layouts
Working with State & Events
Outputting a List of Items
Styling List Items
Making it Scrollable with ScrollView!
A Better List FlatList
More Components & Lists
Splitting the App Into Components
Passing Data Between Components
Working with Touchable Components
How to work with React Native Components
Deleting Items
Adding a Modal Overlay
More Flexbox Styling
Closing the Modal & Clearing Input
Finishing the Modal Styling
Wrap Up
Useful Resources & Links
Setting Up A New Project
Planning the App
Working with Core Components
Getting Started with Styles
Flexbox & Layouts (Intro)
React Native Flexbox Deep Dive
Inline Styles & StyleSheet Objects

Debugging React Native Apps
Module Introduction
Useful Resources & Links
What To Debug & How To Debug
Running the App on a Real Device & Debugging
Handling Error Messages
Understanding Code Flow with console.log()
Using the Remote Debugger & Breakpoints
Working with the Device DevTools Overlay
Debugging the UI & Using React Native Debugger
Wrap Up

Components, Styling, Layouts – Building Real Apps [GUESS A NUMBER APP]
Module Introduction
Color Theming with Constants
Configuring & Styling a TextInput
Cleaning User Input & Controlling the Soft Keyboard
Resetting & Confirming User Input
Configuring Components
Showing an Alert
Time to Finish the Confirmation Box
Adding Random Number Generation
Switching Between Multiple Screens
Adding Game Features Hints & Validation
Setup & App Planning
Checking the Win Condition with useEffect()
Finishing the Game Logic
Adding Custom Fonts
Installing expo-font
A Synthetic Style Cascade Custom Wrapper Components & Global Styles
Adding Local Images
Styling Images
Working with Network (Web) Images
A Closer Look at the Text Component (and what you can do with it)
View vs Text – A Summary
Adding a Custom Header Component
Building a Custom Button Component
Adding Icons
Exploring UI Libraries
Managing Past Guesses as a List
Styling List Items & Lists
ScrollView & Flexbox (Yes, that works!)
Using FlatList Instead of ScrollView
Wrap Up
Useful Resources & Links
Adding a Screen Component
Working on the Layout
Styling a View as a Card Container (with Drop Shadows & Rounded Corners)
React Native Styling vs CSS Styling
Extracting a Card Component (Presentational Component)
Components & Styling

Responsive & Adaptive User Interfaces and Apps
Module Introduction
Rendering Different Layouts
Fixing the GameOver Screen
Updating All Code to Update Dynamically
The Dimensions API & Responsive UIs
Expo’s ScreenOrientation API
Introducing the Platform API
Working with Platform.select() and Platform in if Checks
Using Platform-specific Code Files
The Platform API
Using the SafeAreaView
Finding Improvement Opportunities
Wrap Up
Useful Resources & Links
Working with More Flexible Styling Rules
Introducing the Dimensions API
Using Dimensions in if Checks
Calculating Sizes Dynamically
Problems with Different Device Orientations
Controlling Orientation & Using the KeyboardAvoidingView
Listening to Orientation Changes

Navigation with React Navigation [THE MEALS APP]
Module Introduction
Alternative Navigation Syntax
Navigation Basics
Navigation to the Meal Details Screen
Pushing, Popping & Replacing
Outputting a Grid of Categories
Configuring the Header with Navigation Options
Passing & Reading Params Upon Navigation
Setting Dynamic Navigation Options
Default Navigation Options & Config
Navigation Params & Configuration
Planning the App
Grid Styling & Some Refactoring
Adding Meal Models & Data
Loading Meals for Categories
Rendering a Meals List
Passing Data to the Meal Detail Screen
Adding Header Buttons
Fixing the Shadows
Adding Tabs-based Navigation
Setting Icons and Configuring Tabs
navigationOptions inside of a Navigator
Adding Screens
Adding MaterialBottomTabs
Adding a Favorites Stack
Adding a Menu Button & Drawer Navigation
Configuring the Drawer
More Navigation Config & Styling
Adding a DefaultText Component
Adding the MealDetail Screen Content
Time for the Filters Screen Content!
Passing Data Between Component & Navigation Options (Header)
[React Refresher] useEffect() & useCallback()
Adding Fonts
Wrap Up
Useful Resources & Links
React Navigation Docs
Installing React Navigation & Adding Navigation to the App
MUST READ Installing Different Navigators
Creating a StackNavigator
Navigating Between Screens

State Management & Redux
Module Introduction
Dispatching Filter Actions
Debugging Redux in React Native Apps
Wrap Up
Useful Resources & Links
What is State & What is Redux
Redux & Store Setup
Selecting State Slices
Redux Data & Navigation Options
Dispatching Actions & Reducer Logic
Switching the Favorites Icon
Rendering a Fallback Text
Adding Filtering Logic

Time to Practice – THE SHOP APP
Module Introduction
Adding Items to the Cart
Implementing Header Buttons
Outputting Cart Items
Adding Logic to Delete Items
Adding Redux Logic for Orders
SideDrawer & The Orders Screen
Clearing the Cart
Styling Order Items
Making the Show Details Button Work
Building the User Products Screen
Planning the App
Reorganizing the ProductItem Component
Deleting Items
Adding Basic Editing & Navigation Logic
Handling User Input
Using Params to Submit User Input
Dispatching Actions for Creating & Updating
Time to Improve the App!
Wrap Up
Useful Resources & Links
Creating the Basic Project Setup
The Products Overview Screen
Setting Up a Navigator
Styling the Product Items
Adding Touchable Components
Working on the Product Details Screen
Using Custom Fonts

Handling User Input
Module Introduction
Useful Resources & Links
Configuring TextInputs
Adding Basic Validation
Getting Started with useReducer()
Finishing the Merged Form & Input Management
Moving Input Logic Into A Separate Component
Connecting Input Component & Form
Tweaking Styles & Handling the Soft Keyboard
Alternatives & Wrap Up

Http Requests & Adding a Web Server + Database
Module Introduction
Storing Orders
Displaying an ActivityIndicator
Fetching Stored Orders
Adding Pull to Refresh
Wrap Up
Useful Resources & Links
Setup & How To Send Requests
Installing Redux Thunk
Storing Products on a Server
Fetching Products from the Server
Displaying a Loading Spinner & Handling Errors
Setting Up a Navigation Listener
Updating & Deleting Products
Handling Additional Errors

User Authentication
Module Introduction
Implementing Auto Login
Adding Logout
Implementing Auto Logout
Auto-Logout & Android (Warning)
Wrap Up
Useful Resources & Links
How Authentication Works
Implementing a Basic Login Screen
Adding User Signup
Logging Users In
Managing the Loading State & Errors
Using the Token
Mapping Orders to Users
Improved Mapping (Scoping)

Native Device Features (Camera, Maps, Location, SQLite, …) [GREAT PLACES APP]
Module Introduction
Storing the Image on the Filesystem
Diving into SQLite for Permanent Data Storage
Storing Data in the Local Database
Fetching Data from the Local Database
Getting the User Location
Showing a Map Preview of the Location
More on Environment Variables
Displaying an Interactive Map
Adding a Marker
Making the Picked Location Saveable
Planning the App
Storing Picked Places
Updating the Location Screen When the Location Changes
Storing the Address
Displaying the Details Screen
Finishing the Map Screen
Running the App on iOS
Running the App on Android
Wrap Up
Useful Resources & Links
Screen & Navigation Setup
Getting Started with the Form
Redux & Adding Places
Outputting a List of Places
Accessing the Device Camera
Configuring the Camera Access
Using the Picked Image

Building Apps Without Expo
Module Introduction
Alternatives to Expo
Building Apps with Just the React Native CLI
Live Reload and RN CLI Apps
Adding Native Modules to Non-Expo Apps
Understanding Expo’s Bare Workflow
Ejecting from Expo’s Managed Workflow
When To Use Which
Useful Resources & Links

Publishing React Native Apps
Module Introduction
Configuring Android Apps
Useful Resources & Links
Deployment Steps
Configuring the App & Publishing
Configuring Icons & The Splash Screen
Working with Offline Asset Bundles
Using Over the Air Updates (OTA Updates)
Building the Apps for Deployment (iOS & Android)
Publishing iOS Apps without Expo
Publishing Android Apps without Expo

Updating to React Navigation 5+
Module Introduction
Logout & Further Fixes Adjustments
Extracting Screen Params
Setting Screen Options Dynamically
Remaining Migration Steps & Roundup
A Summary Of All Important Changes
Useful Resources & Links
What Changed
Preparing the Project
More Information & Updating the Project Dependencies
Moving from the Registry-like to the Component-based Navigation Config
First Migration Steps
Converting More Stack Navigators to the New Config
Migrating the Drawer Navigation
Replacing the Switch Navigator & Auth Flow

Push Notifications
Module Introduction
Getting a Push Token
Sending Push Notifications
Using Expo’s Push Server
More on Push Tokens
Adding Push Notifications to the Shop App (13)
Adding Push Notifications to the Shop App (23)
Adding Push Notifications to the Shop App (33)
Push Notifications in non-Expo Managed Apps
Module Resources
Understanding Notifications
Sending Local Notifications
Getting Permissions
Controlling How Notifications Are Displayed
Reacting to Foreground Notifications
Reacting to Background Notifications
How Push Notifications Work
Expo & Push Notifications

Course Roundup & Next Steps
Roundup & Next Steps

Bonus JavaScript Refresher
Module Introduction
Spread Operator & Rest Parameters
Destructuring
Async Code & Promises
Wrap Up
Module Resources
JavaScript – A Summary
Project Setup
Core Syntax Refresher
let & const
Arrow Functions
Objects Properties & Methods
Arrays & Array Methods
Arrays, Objects & Reference Types

Bonus React.js Refresher
Module Introduction
Parent-Child Communication
Managing State
More on State
User Input & Two-Way Binding
Wrap Up
Module Resources
What is React
A Starting Project
Understanding JSX
Understanding Components
Working with Multiple Components
Working with Props
Rendering Lists of Data
Handling Events

Bonus
Bonus More Content!