React Native - The Practical Guide

Video description

Learn React Native and apply your skills to develop real-world mobile applications that can run smoothly on Android and iOS.

About This Video

  • Get to grips with the concepts of React Native and JavaScript
  • Gain the skills to build real-world mobile applications
  • Uncover techniques to make applications work on different devices

In Detail

Do you want to create awesome native mobile applications, such as Airbnb, Skype, and Instagram? This course will show you how to use React Native to create modern, stylish, and powerful applications that will run on both Android and iOS.

The course starts with an introduction to React Native, explaining its role in mobile application development. Next, you will dive deep into learning concepts that will help you to build responsive applications that will work smoothly on different device sizes. You will then discover methods to add modern features, such as animation, navigation, maps, camera, user authentication, and push notifications in your applications. This course also teaches you how to debug your code and catch errors. Once you are ready, you will learn how to publish your applications on Google Play and Apple's App Store. In addition to this, you will also get a refresher on JavaScript and React.js in the final videos.

By the end of this course, you will have developed React Native and JavaScript skills needed to build and deploy responsive mobile applications.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Getting Started
    1. Welcome
    2. What is React Native?
    3. Working of React Native
    4. Expo versus React Native Command Line Interface (CLI)
    5. Creating Your First React Native Application
    6. Working on Your First Application
    7. Scope of Work for React Native Applications
    8. React Native Alternatives
    9. Course Requirements
    10. Running an Application on an Android Emulator
    11. Running an Application on an iOS Simulator
    12. Course Outline
    13. Getting the Most out of This Course
  2. Chapter 2 : Diving into the Basics [Course Goals Application]
    1. Module Introduction
    2. Working with React Native Components
    3. Setting up a New Project
    4. Planning the Application
    5. Working with Core Components
    6. Getting Started with Styles
    7. Flexbox and Layouts - Introduction
    8. Diving Deep into React Native Flexbox
    9. Inline Styles and Stylesheet Objects
    10. Working with State and Events
    11. Outputting a List of Items
    12. Styling List Items
    13. Making the Application Scrollable with ScrollView
    14. A Better List: FlatList Component
    15. Splitting the Application into Components
    16. Passing Data between Components
    17. Working with Touchable Components
    18. Deleting Items
    19. Adding a Modal Overlay
    20. More on Flexbox Styling
    21. Closing the Modal and Clearing Input
    22. Finishing the Modal Styling
    23. Wrapping up
  3. Chapter 3 : Debugging React Native Applications
    1. Module Introduction
    2. Debugging and How to Debug?
    3. Handling Error Messages
    4. Understanding Code Flow with the console.log() Method
    5. Using a Remote Debugger and Breakpoints
    6. Working with the Device's DevTools Overlay
    7. Debugging the User Interface (UI) and Using the React Native Debugger
    8. Wrapping up
  4. Chapter 4 : Components, Styling, and Layouts - Building Real Applications [Guess the Number Application]
    1. Module Introduction
    2. Setup and Application Planning
    3. Adding a Custom Header Component
    4. Adding a Screen Component
    5. Working on the Layout
    6. Styling a View as a "Card" Container (with Drop Shadows and Rounded Corners)
    7. Extracting a Card Component (Presentational Component)
    8. Color Theming with Constants
    9. Configuring and Styling a TextInput Element
    10. Cleaning User Input and Controlling the Soft Keyboard
    11. Resetting and Confirming User Input
    12. Showing an Alert
    13. Finishing by Adding the "Confirmation Box"
    14. Adding Random Number Generator
    15. Switching between Multiple "Screens"
    16. Adding Game Features: Hints and Validation
    17. Checking the "Win" Condition with the useEffect() Method
    18. Finishing the Game Logic
    19. Adding Custom Fonts
    20. A Synthetic Style "Cascade": Custom Wrapper Components and Global Styles
    21. Adding Local Images
    22. Styling Images
    23. Working with Network (Web) Images
    24. A Closer Look at the "Text" Component (and What You Can Do With It)
    25. Building a Custom Button Component
    26. Adding Icons
    27. Exploring User Interface (UI) Libraries
    28. Managing Past Guesses as a List
    29. Styling List Items and Lists
    30. ScrollView and Flexbox (Yes, That Works!)
    31. Using FlatList Instead of ScrollView
    32. Wrapping up
  5. Chapter 5 : Responsive and Adaptive User Interfaces and Applications
    1. Module Introduction
    2. Finding Improvement Opportunities
    3. Working with More Flexible Styling Rules
    4. Introducing the Dimensions Application Programming Interface (API)
    5. Using Dimensions in "if" Checks
    6. Calculating Sizes Dynamically
    7. Problems due to Different Device Orientations
    8. Controlling Orientation and Using the KeyboardAvoidingView Component
    9. Listening to Orientation Changes
    10. Rendering Different Layouts
    11. Fixing the "GameOver" Screen
    12. Expo's ScreenOrientation Application Programming Interface (API)
    13. Introducing Platform Application Programming Interface (API)
    14. Working with the Platform.select() Method and Platform in "if" Checks
    15. Using Platform-specific Code Files
    16. Using SafeAreaView
    17. Wrapping up
  6. Chapter 6 : Navigation with React Navigation [Meals Application]
    1. Module Introduction
    2. Planning the Application
    3. Adding Screens
    4. Adding Fonts
    5. Installing React Navigation and Adding Navigation to the Application
    6. Creating a Stack Navigator
    7. Navigating between Screens
    8. Navigating to the "Meal Details" Screen
    9. Pushing, Popping, and Replacing
    10. Outputting a Grid of Categories
    11. Configuring the Header with Navigation Options
    12. Passing and Reading Parameters upon Navigation
    13. Setting Dynamic Navigation Options
    14. Default Navigation Options and Configuration
    15. Styling the Grid and Some Refactoring
    16. Adding Meal Models and Data
    17. Loading Meals for Categories
    18. Rendering a Meals List
    19. Passing Data to the "Meal Details" Screen
    20. Adding Header Buttons
    21. Fixing the Shadows
    22. Adding Tabs-based Navigation
    23. Setting Icons and Configuring Tabs
    24. Adding MaterialBottomTabs
    25. Adding a "Favorites" Stack
    26. Adding a Menu Button and Drawer Navigation
    27. Configuring the Drawer
    28. More on Navigation Configuration and Styling
    29. Adding a DefaultText Component
    30. Adding the "Meal Details" Screen Content
    31. Adding the "Filter" Option
    32. Passing Data between Component and Navigation Options (Header)
    33. Wrapping up
  7. Chapter 7 : State Management and Redux
    1. Module Introduction
    2. What are State and Redux?
    3. Redux and Setting up Redux
    4. Selecting State Slices
    5. Redux Data and Navigation Options
    6. Dispatching Actions and Reducer Logic
    7. Switching the Favorites Icon
    8. Rendering a Fallback Text
    9. Adding Filtering Logic
    10. Dispatching Filter Actions
    11. Wrapping up
  8. Chapter 8 : Time to Practice - Shop Application
    1. Module Introduction
    2. Planning the Application
    3. Creating the Basic Project Setup
    4. The "Product Overview" Screen
    5. Setting up a Navigator
    6. Styling Product Items
    7. Adding Touchable Components
    8. Working on the "Product Details" Screen
    9. Using Custom Fonts
    10. Adding Items to the Cart
    11. Adding Header Buttons
    12. Outputting Cart Items
    13. Adding Logic to Delete Items
    14. Adding Redux Logic for Orders
    15. SideDrawer and the "Orders" Screen
    16. Clearing the Cart
    17. Styling Order Items
    18. Making the "Show Details" Button Work
    19. Building the "User Products" Screen
    20. Reorganizing the ProductItem Component
    21. Deleting Items
    22. Basic Editing and Navigation Logic
    23. Handling User Input
    24. Using Parameters to Submit the User's Input
    25. Dispatching Actions for Creating and Updating
    26. Improving the Application
    27. Wrapping up
  9. Chapter 9 : Handling User Input
    1. Module Introduction
    2. Configuring TextInputs
    3. Adding Basic Validation
    4. Getting Started with the useReducer() Method
    5. Finishing the Merged Form and Input Management
    6. Moving Input Logic into a Separate Component
    7. Connecting the Input Component and Form
    8. Tweaking Styles and Handling the Soft Keyboard
    9. Wrapping up
  10. Chapter 10 : HTTP Requests and Adding a Web Server + Database
    1. Module Introduction
    2. Setting up and Sending HTTP Requests
    3. Installing Redux Thunk
    4. Storing Products on a Server
    5. Fetching Products from the Server
    6. Displaying a Loading Spinner and Handling Errors
    7. Setting up a Navigation Listener
    8. Updating and Deleting Products
    9. Handling Additional Errors
    10. Storing Orders
    11. Displaying ActivityIndicator
    12. Fetching Stored Orders
    13. Adding "Pull to Refresh"
    14. Wrapping up
  11. Chapter 11 : User Authentication
    1. Module Introduction
    2. Working with Authentication
    3. Implementing a Basic Login Screen
    4. Adding User Signup
    5. Logging in Users
    6. Managing the Loading State and Errors
    7. Using the Token
    8. Mapping Orders to Users
    9. Improved Mapping (Scoping)
    10. Implementing "Auto Login"
    11. Adding "Logout"
    12. Implementing "Auto Logout"
    13. Wrapping up
  12. Chapter 12 : Native Device Features (Camera, Maps, Location, SQLite, and more) [Great Places Application]
    1. Module Introduction
    2. Planning the Application
    3. Setting up the Screen and Navigation
    4. Getting Started with the Form
    5. Redux and Adding Places
    6. Outputting a List of Places
    7. Accessing the Device Camera
    8. Configuring Camera Access
    9. Using the Picked Image
    10. Storing the Image on the Filesystem
    11. Diving into SQLite for Permanent Data Storage
    12. Storing Data in a Local Database
    13. Fetching Data from the Local Database
    14. Getting the User Location
    15. Showing a Map Preview of the Location
    16. Displaying an Interactive Map
    17. Adding a Marker
    18. Making the Picked Location "Saveable"
    19. Storing Picked Places
    20. Updating the Location Screen When the Location Changes
    21. Storing the Address
    22. Displaying the "Details" Screen
    23. Finishing the "Map" Screen
    24. Running the Application on iOS
    25. Running the Application on Android
    26. Wrapping up
  13. Chapter 13 : Building Applications without Expo
    1. Module Introduction
    2. Alternatives to Expo
    3. Building Applications with just the React Native Command Line Interface (CLI)
    4. Adding Native Modules to Non-Expo Applications
    5. Understanding Expo's Bare Workflow
    6. Ejecting from Expo's Managed Workflow
    7. When to Use Which Workflow—Bare Workflow and Managed Workflow?
  14. Chapter 14 : Publishing React Native Applications
    1. Module Introduction
    2. Deployment Steps
    3. Configuring the Application and Publishing It
    4. Configuring Icons and the Splash Screen
    5. Working with Offline Asset Bundles
    6. Using Over the Air (OTA) Updates
    7. Building Applications for Deployment (iOS and Android)
    8. Publishing iOS Applications without Expo
    9. Publishing Android Applications without Expo
  15. Chapter 15 : Updating to React Navigation 5+
    1. Module Introduction
    2. What Changed in React Navigation 5+?
    3. Preparing the Project
    4. More Information and Updating the Project Dependencies
    5. Moving from "Registry-like" to "Component-based" Navigation Configuration
    6. First Migration Steps
    7. Converting More Stack Navigators to the New Configuration
    8. Migrating the Drawer Navigation
    9. Replacing the "Switch" Navigator and Authentication Flow
    10. Logging out and Further Fixes/Adjustments
    11. Extracting Screen Parameters
    12. Setting the Screen Options Dynamically
    13. Remaining Migration Steps and Roundup
    14. A Summary of All the Important Changes
  16. Chapter 16 : Push Notifications
    1. Module Introduction
    2. Understanding Notifications
    3. Sending Local Notifications
    4. Getting Permissions
    5. Controlling How Notifications Are Displayed
    6. Reacting to Foreground Notifications
    7. Reacting to Background Notifications
    8. Working of Push Notifications
    9. Expo and Push Notifications
    10. Getting a Push Token
    11. Sending Push Notifications
    12. Using Expo's Push Server
    13. More on Push Tokens
    14. Adding Push Notifications to the Shop Application - Part 1
    15. Adding Push Notifications to the Shop Application - Part 2
    16. Adding Push Notifications to the Shop Application - Part 3
  17. Chapter 17 : Course Roundup and Next Steps
    1. Roundup and Next Steps
  18. Chapter 18 : JavaScript Refresher
    1. Module Introduction
    2. JavaScript - A Summary
    3. Core Syntax Refresher
    4. let and const Variables
    5. Arrow Functions
    6. Objects: Properties and Methods
    7. Arrays and Array Methods
    8. Arrays, Objects, and Reference Types
    9. Spread Operator and Rest Parameters
    10. Destructuring
    11. Async Code and Promises
    12. Wrapping up
  19. Chapter 19 : React.js Refresher
    1. Module Introduction
    2. What is React.js?
    3. A Starting Project
    4. Understanding JavaScript XML (JSX)
    5. Understanding React.js Components
    6. Working with Multiple Components
    7. Working with Props
    8. Rendering Lists of Data
    9. Handling Events
    10. Parent—Child Communication
    11. Managing States
    12. More on States
    13. User Input and Two-way Binding
    14. Wrapping up

Product information

  • Title: React Native - The Practical Guide
  • Author(s): Maximilian Schwarzmuller
  • Release date: November 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789139747