React Native - The Practical Guide [Video]

Preview in Mapt

React Native - The Practical Guide [Video]

Maximilian Schwarzmüller
New Release!

Use React Native and your React knowledge and take your web development skills to build native iOS and Android Apps
Mapt Subscription
FREE
$29.99/m after trial
Video
$10.00
RRP $169.99
Save 94%
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$10.00
$29.99 p/m after trial
RRP $169.99
Subscription
Video
Start 14 Day Trial

Frequently bought together


React Native - The Practical Guide [Video] Book Cover
React Native - The Practical Guide [Video]
$ 169.99
$ 10.00
Angular 5 (formerly Angular 2) - The Complete Guide [Video] Book Cover
Angular 5 (formerly Angular 2) - The Complete Guide [Video]
$ 184.99
$ 10.01
Buy 2 for $20.01
Save $334.97
Add to Cart

Video Details

ISBN 139781789139747
Course Length15 hours and 15 minutes

Video 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, ObjectiveC or anything like 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! 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 what 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.

Style and Approach

With you will gain practical experience in how 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.

Table of Contents

Getting Started
Welcome!
What is React Native?
A Closer Look
What Happens to JavaScript?
Creating Our First React Native App
Dealing with Limitations of React Native
What a Good Course Offers
Course Requirements
Course Outline
How to get the Most out of This Course
Diving into the Basics
Module Introduction
Creating a New Project
JSX Elements you can and can't Use
Ejecting from Create React Native App
Running the App on an Android Simulator (+ Setup)
Running our App on a Real Android Device
Running our App on an iOS Simulator
Running our App on an iOS Device
A Good Development Setup
Working on the App: Adding a Textinput
Styling - Understanding the Basics
Positioning Elements with Flexbox
Adding a Button and Managing State
Creating a Custom Component
Listening to Touch Events
Reacting to Press Events
Using a ScrollView
Rendering Lists Correctly
Adding Static Images
Using Network Images
Adding a Modal
React vs React Native
JavaScript - Supported Features
Wrap Up
Using Redux with React Native
Module Introduction
A Brief Redux Refresher
Installing Redux and Creating a Basic Setup
Setting up Actions
Setting up the Reducer
Connecting React Native to Redux
Wrap Up
Creating the Store
Debugging React Native Apps
Module Introduction
Using the Remote JavaScript Debugging console.log
Debugging with Breakpoints
Debugging+++ with React Native Debugger
Debugging Redux
Wrap Up
Linking and Using Third Party Libraries
Module Introduction
Installing Libraries
Linking Libraries on iOS
Linking Libraries on Android
Using Library Features: Adding Icons
Wrap Up
Navigation in React Native Apps
Module Introduction
Navigation in Web Apps vs Native Apps
Exploring Native Navigation Solutions
Video 4Adding React Native Navigation to iOS
Adding React Native Navigation to Android
Finishing the Library Setup
Registering and Rendering a Screen
Adding a Tabs Screen (Tabs Navigation)
Adding Icons to Tabs
Connecting Screens to Redux
Updating Redux
Pushing Pages (Navigating "Forwards")
Popping Pages (Navigating "Backwards")
More Navigator Methods
Adding a Side Drawer
Using Navigation Events & Toggling the Drawer
Finishing the Drawer
Wrap Up
Styling & Animating React Native Apps (Correctly)
Module Introduction
Using StyleSheet vs Normal JS Objects
Vanilla CS vs React Native Styles
Flexbox in Action
Styling with Relative Units
"Global Styles" with Custom Components
Synthetic Cascading of Styles
Styling Text
Cascading Text Styles
Adding a Background Image
Creating a Re-Usable Custom Button
Editing the "Share Place" Screen
Styling & Splitting the "Share Place" Screen
Finishing the "Share Place" Screen
You’re Challenge!
Styling the Side Drawer
Quick Bug Fix: PlaceInput Component
Intro: Cross Platform Styles & Responsiveness
Cross-Platform Styling Made Easy!
Using the Platform API
Loading Different Icons for Different Platforms
Using Different Entry Points (into the App)
Cross-Platform UI Libraries
The "Responsive Styling" Problem
Responsive Design Solutions
Using the Dimensions API
Adjusting Styles Dynamically (to changing Width / Height)
A Better Responsive Solution
Bug Fix: Centering with Margins
Cleaning Up Dimensions Listeners
Styling Navigation Items (react-native-navigation)
Preparing the App for Animations
Using the Animated API
Animations Summary
Wrap Up
Handling User Input
Module Introduction
Managing Input/ Control State
Adding Custom Validation Logic
Using the Validation State
Dispatching an Auth Action
Switching Form (Auth) Modes
Configuring Text Input Components
Handling the Soft Keyboard
Wrap Up
Using Native Device Features - Maps, Camera & Image Gallery
Module Introduction
Installing react-native-maps
Rendering a Map
Picking a Location on the Map
Adding a Map Marker
Animating Map Movement
Locating the User
Storing the Picked Location with Redux
Installing react-native-image-picker
Using the Image Picker
Storing the Picked Images
Image Picker and the Data it Returns
Wrap Up
Networking - Sending Http Requests
Module Introduction
Sending Http Requests – Theory
Creating the Server
Using the Fetch-API
Storing Data in Firebase
Storing Images
Finishing the Image Upload Function
Storing the Remaining Data
Adding the Activity Indicator
Handling Errors
Getting Data from the Server
Fixing an Error
Wrap Up
Authentication in React Native Apps
Module Introduction
How Authentication Works in React Native Apps
Enabling Firebase Authentication
Signing Users Up
Using the Authentication Result (Response)
Supporting Signup and Login
Adding User Login
Protecting Routes on Firebase
Storing the Auth Token in Redux
Using the Auth Token
Fetching the Token in a Re-Usable Way
Protecting the Firebase Cloudfunction
Adding Places (Authenticated)
Storing the Token in AsyncStorage
Adding an Auto-Signin Functionality
Managing the Token Expiration
Clearing the Auth Storage (AsyncStorage)
Refreshing the Token
Adding User Logout
Refreshing the Token without App Reloads
Wrap Up
Polishing the App
Module Introduction
Identifying "Improvement Potential"
Shrinking Image Sizes
Resetting the "Share Place" Screen
Redirecting to another Tab
Loading Places All the Time!
Improving Http Error Handling
Cleaning Stored Images (on Firebase)
Wrap Up
Publishing the App
Module Introduction
Adding Launcher Icons
Adding a Splash Screen
Configuring & Building the App
Publishing to Google Play Store (Android)
Publishing to the App Store (iOS)
Round Up
Course Roundup

What You Will 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

Authors

Table of Contents

Getting Started
Welcome!
What is React Native?
A Closer Look
What Happens to JavaScript?
Creating Our First React Native App
Dealing with Limitations of React Native
What a Good Course Offers
Course Requirements
Course Outline
How to get the Most out of This Course
Diving into the Basics
Module Introduction
Creating a New Project
JSX Elements you can and can't Use
Ejecting from Create React Native App
Running the App on an Android Simulator (+ Setup)
Running our App on a Real Android Device
Running our App on an iOS Simulator
Running our App on an iOS Device
A Good Development Setup
Working on the App: Adding a Textinput
Styling - Understanding the Basics
Positioning Elements with Flexbox
Adding a Button and Managing State
Creating a Custom Component
Listening to Touch Events
Reacting to Press Events
Using a ScrollView
Rendering Lists Correctly
Adding Static Images
Using Network Images
Adding a Modal
React vs React Native
JavaScript - Supported Features
Wrap Up
Using Redux with React Native
Module Introduction
A Brief Redux Refresher
Installing Redux and Creating a Basic Setup
Setting up Actions
Setting up the Reducer
Connecting React Native to Redux
Wrap Up
Creating the Store
Debugging React Native Apps
Module Introduction
Using the Remote JavaScript Debugging console.log
Debugging with Breakpoints
Debugging+++ with React Native Debugger
Debugging Redux
Wrap Up
Linking and Using Third Party Libraries
Module Introduction
Installing Libraries
Linking Libraries on iOS
Linking Libraries on Android
Using Library Features: Adding Icons
Wrap Up
Navigation in React Native Apps
Module Introduction
Navigation in Web Apps vs Native Apps
Exploring Native Navigation Solutions
Video 4Adding React Native Navigation to iOS
Adding React Native Navigation to Android
Finishing the Library Setup
Registering and Rendering a Screen
Adding a Tabs Screen (Tabs Navigation)
Adding Icons to Tabs
Connecting Screens to Redux
Updating Redux
Pushing Pages (Navigating "Forwards")
Popping Pages (Navigating "Backwards")
More Navigator Methods
Adding a Side Drawer
Using Navigation Events & Toggling the Drawer
Finishing the Drawer
Wrap Up
Styling & Animating React Native Apps (Correctly)
Module Introduction
Using StyleSheet vs Normal JS Objects
Vanilla CS vs React Native Styles
Flexbox in Action
Styling with Relative Units
"Global Styles" with Custom Components
Synthetic Cascading of Styles
Styling Text
Cascading Text Styles
Adding a Background Image
Creating a Re-Usable Custom Button
Editing the "Share Place" Screen
Styling & Splitting the "Share Place" Screen
Finishing the "Share Place" Screen
You’re Challenge!
Styling the Side Drawer
Quick Bug Fix: PlaceInput Component
Intro: Cross Platform Styles & Responsiveness
Cross-Platform Styling Made Easy!
Using the Platform API
Loading Different Icons for Different Platforms
Using Different Entry Points (into the App)
Cross-Platform UI Libraries
The "Responsive Styling" Problem
Responsive Design Solutions
Using the Dimensions API
Adjusting Styles Dynamically (to changing Width / Height)
A Better Responsive Solution
Bug Fix: Centering with Margins
Cleaning Up Dimensions Listeners
Styling Navigation Items (react-native-navigation)
Preparing the App for Animations
Using the Animated API
Animations Summary
Wrap Up
Handling User Input
Module Introduction
Managing Input/ Control State
Adding Custom Validation Logic
Using the Validation State
Dispatching an Auth Action
Switching Form (Auth) Modes
Configuring Text Input Components
Handling the Soft Keyboard
Wrap Up
Using Native Device Features - Maps, Camera & Image Gallery
Module Introduction
Installing react-native-maps
Rendering a Map
Picking a Location on the Map
Adding a Map Marker
Animating Map Movement
Locating the User
Storing the Picked Location with Redux
Installing react-native-image-picker
Using the Image Picker
Storing the Picked Images
Image Picker and the Data it Returns
Wrap Up
Networking - Sending Http Requests
Module Introduction
Sending Http Requests – Theory
Creating the Server
Using the Fetch-API
Storing Data in Firebase
Storing Images
Finishing the Image Upload Function
Storing the Remaining Data
Adding the Activity Indicator
Handling Errors
Getting Data from the Server
Fixing an Error
Wrap Up
Authentication in React Native Apps
Module Introduction
How Authentication Works in React Native Apps
Enabling Firebase Authentication
Signing Users Up
Using the Authentication Result (Response)
Supporting Signup and Login
Adding User Login
Protecting Routes on Firebase
Storing the Auth Token in Redux
Using the Auth Token
Fetching the Token in a Re-Usable Way
Protecting the Firebase Cloudfunction
Adding Places (Authenticated)
Storing the Token in AsyncStorage
Adding an Auto-Signin Functionality
Managing the Token Expiration
Clearing the Auth Storage (AsyncStorage)
Refreshing the Token
Adding User Logout
Refreshing the Token without App Reloads
Wrap Up
Polishing the App
Module Introduction
Identifying "Improvement Potential"
Shrinking Image Sizes
Resetting the "Share Place" Screen
Redirecting to another Tab
Loading Places All the Time!
Improving Http Error Handling
Cleaning Stored Images (on Firebase)
Wrap Up
Publishing the App
Module Introduction
Adding Launcher Icons
Adding a Splash Screen
Configuring & Building the App
Publishing to Google Play Store (Android)
Publishing to the App Store (iOS)
Round Up
Course Roundup

Video Details

ISBN 139781789139747
Course Length15 hours and 15 minutes
Read More

Read More Reviews

Recommended for You

Angular 5 (formerly Angular 2) - The Complete Guide [Video] Book Cover
Angular 5 (formerly Angular 2) - The Complete Guide [Video]
$ 184.99
$ 10.01
Progressive Web Apps (PWA) - The Complete Guide [Video] Book Cover
Progressive Web Apps (PWA) - The Complete Guide [Video]
$ 149.99
$ 10.01
Vue JS 2 - The Complete Guide (incl. Vue Router and Vuex) [Video] Book Cover
Vue JS 2 - The Complete Guide (incl. Vue Router and Vuex) [Video]
$ 188.99
$ 10.00
Docker for the Absolute Beginner - Hands-On [Video] Book Cover
Docker for the Absolute Beginner - Hands-On [Video]
$ 63.99
$ 10.00
Apache Spark with Python - Big Data with PySpark and Spark [Video] Book Cover
Apache Spark with Python - Big Data with PySpark and Spark [Video]
$ 149.99
$ 10.01
Ansible for the Absolute Beginner - Hands-On [Video] Book Cover
Ansible for the Absolute Beginner - Hands-On [Video]
$ 98.99
$ 10.00