React Native - The Practical Guide

Video Description

Use React Native, your React knowledge and your web development skills to build native iOS and Android Apps

About This Video

  • Intermediate knowledge of React is a must alongside JavaScript
  • No Android/ Java or iOS (Swift, ObjectiveC) development experience is required

In Detail

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? That's exactly what React Native allows you to do! No need to learn Java, Android, Swift, ObjectiveC or any 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 know to create your own React Native apps, publish them to the Google Play Store and Apple App Store and dive 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 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.

No Android, Java, Swift or ObjectiveC knowledge is required! JavaScript and React (for the web) knowledge are required though - you don't need to be an expert, but the basics need to be set.

Publisher Resources

Download Example Code

Table of Contents

  1. Chapter 1 : Getting Started
    1. Welcome! 00:03:07
    2. What is React Native? 00:04:22
    3. How React Native Works 00:06:16
    4. Expo vs React Native CLI 00:06:07
    5. Creating Our First React Native App 00:07:47
    6. Working on Our First App 00:09:42
    7. React Native Apps Are Hard Work! 00:02:53
    8. React Native Alternatives 00:04:52
    9. Course Requirements 00:01:27
    10. Running the App on an Android Emulator 00:08:36
    11. Running the App on an iOS Simulator 00:03:15
    12. Course Outline 00:07:42
    13. How to get the Most out of This Course 00:02:46
  2. Chapter 2 : Diving into the Basics [COURSE GOALS APP]
    1. Module Introduction 00:00:34
    2. How to work with React Native Components 00:02:46
    3. Setting Up A New Project 00:03:05
    4. Planning the App 00:01:43
    5. Working with Core Components 00:04:56
    6. Getting Started with Styles 00:07:53
    7. Flexbox & Layouts (Intro) 00:03:55
    8. React Native Flexbox Deep Dive 00:12:20
    9. Inline Styles & StyleSheet Objects 00:05:13
    10. Working with State & Events 00:09:45
    11. Outputting a List of Items 00:03:51
    12. Styling List Items 00:03:22
    13. Making it Scrollable with ScrollView! 00:03:49
    14. A Better List: FlatList 00:07:20
    15. Splitting the App into Components 00:04:35
    16. Passing Data Between Components 00:06:49
    17. Working with Touchable Components 00:08:39
    18. Deleting Items 00:04:57
    19. Adding a Modal Overlay 00:06:07
    20. More Flexbox Styling 00:03:50
    21. Closing the Modal & Clearing Input 00:06:46
    22. Finishing the Modal Styling 00:05:08
    23. Wrap Up 00:02:30
  3. Chapter 3 : Debugging React Native Apps
    1. Module Introduction 00:00:33
    2. What to Debug & How to Debug? 00:06:18
    3. Handling Error Messages 00:05:26
    4. Understanding Code Flow with console.log() 00:04:07
    5. Using the Remote Debugger & Breakpoints 00:04:03
    6. Working with the Device DevTools Overlay 00:02:18
    7. Debugging the UI & Using React Native Debugger 00:07:26
    8. Wrap Up 00:01:03
  4. Chapter 4 : Components, Styling, Layouts - Building Real Apps [GUESS A NUMBER APP]
    1. Module Introduction 00:02:33
    2. Setup & App Planning 00:03:25
    3. Adding a Custom Header Component 00:07:55
    4. Adding a Screen Component 00:05:33
    5. Working on the Layout 00:07:04
    6. Styling a View as a "Card" Container (with Drop Shadows & Rounded Corners) 00:07:03
    7. Extracting a Card Component (Presentational Component) 00:05:58
    8. Color Theming with Constants 00:06:04
    9. Configuring & Styling a TextInput 00:10:17
    10. Cleaning User Input & Controlling the Soft Keyboard 00:05:23
    11. Resetting & Confirming User Input 00:08:28
    12. Showing an Alert 00:02:50
    13. Time to Finish the "Confirmation Box" 00:07:44
    14. Adding Random Number Generation 00:06:34
    15. Switching Between Multiple "Screens" 00:10:41
    16. Adding Game Features: Hints & Validation 00:11:03
    17. Checking the "Win" Condition with useEffect() 00:10:11
    18. Finishing the Game Logic 00:05:18
    19. Adding Custom Fonts 00:09:50
    20. A Synthetic Style "Cascade": Custom Wrapper Components & Global Styles 00:10:34
    21. Adding Local Images 00:04:56
    22. Styling Images 00:06:08
    23. Working with Network (Web) Images 00:02:52
    24. A Closer Look at the "Text" Component (and what you can do with it) 00:09:10
    25. Building a Custom Button Component 00:11:42
    26. Adding Icons 00:04:44
    27. Exploring UI Libraries 00:02:58
    28. Managing Past Guesses as a List 00:07:57
    29. Styling List Items & Lists 00:08:55
    30. ScrollView & Flexbox (Yes, that works!) 00:07:21
    31. Using FlatList Instead of ScrollView 00:09:50
    32. Wrap Up 00:05:14
  5. Chapter 5 : Responsive & Adaptive User Interfaces and Apps
    1. Module Introduction 00:02:27
    2. Finding Improvement Opportunities 00:03:52
    3. Working with More Flexible Styling Rules 00:03:09
    4. Introducing the Dimensions API 00:03:50
    5. Using Dimensions in "if" Checks 00:07:51
    6. Calculating Sizes Dynamically 00:05:23
    7. Problems with Different Device Orientations 00:03:12
    8. Controlling Orientation & Using the KeyboardAvoidingView 00:03:50
    9. Listening to Orientation Changes 00:05:32
    10. Rendering Different Layouts 00:07:09
    11. Fixing the GameOver Screen 00:02:09
    12. Expo's ScreenOrientation API 00:03:43
    13. Introducing the Platform API 00:04:26
    14. Working with Platform.select() and Platform in "if" Checks 00:07:04
    15. Using Platform-specific Code Files 00:03:33
    16. Using the SafeAreaView 00:05:56
    17. Wrap Up 00:01:38
  6. Chapter 6 : Navigation with React Navigation [THE MEALS APP]
    1. Module Introduction 00:01:14
    2. Planning the App 00:05:47
    3. Adding Screens 00:06:32
    4. Adding Fonts 00:03:55
    5. Installing React Navigation & Adding Navigation to the App 00:06:44
    6. Creating a StackNavigator 00:09:28
    7. Navigating Between Screens 00:06:50
    8. Navigation to the "Meal Details" Screen 00:01:11
    9. Pushing, Popping & Replacing 00:07:36
    10. Outputting a Grid of Categories 00:07:55
    11. Configuring the Header with Navigation Options 00:07:59
    12. Passing & Reading Params Upon Navigation 00:04:29
    13. Setting Dynamic Navigation Options 00:05:47
    14. Default Navigation Options & Config 00:09:51
    15. Grid Styling & Some Refactoring 00:12:16
    16. Adding Meal Models & Data 00:03:46
    17. Loading Meals for Categories 00:04:34
    18. Rendering a Meals List 00:18:04
    19. Passing Data to the Meal Detail Screen 00:05:20
    20. Adding Header Buttons 00:11:23
    21. Fixing the Shadows 00:02:52
    22. Adding Tabs-based Navigation 00:06:11
    23. Setting Icons and Configuring Tabs 00:08:08
    24. Adding MaterialBottomTabs 00:09:25
    25. Adding a Favorites Stack 00:13:30
    26. Adding a Menu Button & Drawer Navigation 00:10:06
    27. Configuring the Drawer 00:06:33
    28. More Navigation Config & Styling 00:06:28
    29. Adding a DefaultText Component 00:03:08
    30. Adding the MealDetail Screen Content 00:11:18
    31. Time for the "Filters" Screen Content! 00:11:57
    32. Passing Data Between Component & Navigation Options (Header) 00:13:07
    33. Wrap Up 00:00:47
  7. Chapter 7 : State Management & Redux
    1. Module Introduction 00:01:04
    2. What is State & What is Redux? 00:04:08
    3. Redux & Store Setup 00:10:59
    4. Selecting State Slices 00:08:31
    5. Redux Data & Navigation Options 00:05:04
    6. Dispatching Actions & Reducer Logic 00:13:55
    7. Switching the Favorites Icon 00:07:09
    8. Rendering a Fallback Text 00:02:44
    9. Adding Filtering Logic 00:06:16
    10. Dispatching Filter Actions 00:06:08
    11. Wrap Up 00:01:34
  8. Chapter 8 : Time to Practice - THE SHOP APP
    1. Module Introduction 00:01:34
    2. Planning the App 00:10:43
    3. Creating the Basic Project Setup 00:06:09
    4. The Products Overview Screen 00:09:49
    5. Setting Up a Navigator 00:10:41
    6. Styling the Product Items 00:19:15
    7. Adding Touchable Components 00:12:27
    8. Working on the Product Details Screen 00:05:57
    9. Using Custom Fonts 00:05:11
    10. Adding Items to the Cart 00:21:09
    11. Implementing Header Buttons 00:18:30
    12. Outputting Cart Items 00:11:48
    13. Adding Logic to Delete Items 00:10:34
    14. Adding Redux Logic for Orders 00:09:10
    15. SideDrawer & The Orders Screen 00:13:07
    16. Clearing the Cart 00:01:43
    17. Styling Order Items 00:12:43
    18. Making the "Show Details" Button Work 00:08:56
    19. Building the "User Products" Screen 00:09:36
    20. Reorganizing the ProductItem Component 00:05:29
    21. Deleting Items 00:07:57
    22. Adding Basic Editing & Navigation Logic 00:06:37
    23. Handling User Input 00:12:05
    24. Using Params to Submit User Input 00:02:16
    25. Dispatching Actions for Creating & Updating 00:15:34
    26. Time to Improve the App! 00:09:23
    27. Wrap Up 00:01:13
  9. Chapter 9 : Handling User Input
    1. Module Introduction 00:01:00
    2. Configuring TextInputs 00:08:22
    3. Adding Basic Validation 00:05:45
    4. Getting Started with useReducer() 00:12:13
    5. Finishing the Merged Form & Input Management 00:12:59
    6. Moving Input Logic into A Separate Component 00:11:18
    7. Connecting Input Component & Form 00:14:47
    8. Tweaking Styles & Handling the Soft Keyboard 00:05:29
    9. Alternatives & Wrap Up 00:02:06
  10. Chapter 10 : Http Requests & Adding a Web Server + Database
    1. Module Introduction 00:01:04
    2. Setup & How to Send Requests 00:03:28
    3. Installing Redux Thunk 00:02:03
    4. Storing Products on a Server 00:09:06
    5. Fetching Products from the Server 00:07:54
    6. Displaying a Loading Spinner & Handling Errors 00:13:04
    7. Setting Up a Navigation Listener 00:05:15
    8. Updating & Deleting Products 00:04:47
    9. Handling Additional Errors 00:09:31
    10. Storing Orders 00:04:35
    11. Displaying an ActivityIndicator 00:03:13
    12. Fetching Stored Orders 00:08:16
    13. Adding "Pull to Refresh" 00:04:13
    14. Wrap Up 00:01:08
  11. Chapter 11 : User Authentication
    1. Module Introduction 00:00:44
    2. How Authentication Works 00:03:36
    3. Implementing a Basic Login Screen 00:14:57
    4. Adding User Signup 00:12:44
    5. Logging Users In 00:06:27
    6. Managing the Loading State & Errors 00:09:02
    7. Using the Token 00:11:05
    8. Mapping Orders to Users 00:07:42
    9. Improved Mapping (Scoping) 00:01:15
    10. Implementing "Auto Login" 00:16:51
    11. Adding Logout 00:07:20
    12. Implementing "Auto Logout" 00:15:26
    13. Wrap Up 00:01:03
  12. Chapter 12 : Native Device Features (Camera, Maps, Location, SQLite, ...) [GREAT PLACES APP]
    1. Module Introduction 00:01:13
    2. Planning the App 00:04:00
    3. Screen & Navigation Setup 00:13:28
    4. Getting Started with the Form 00:05:37
    5. Redux & Adding Places 00:07:29
    6. Outputting a List of Places 00:06:37
    7. Accessing the Device Camera 00:17:27
    8. Configuring the Camera Access 00:05:11
    9. Using the Picked Image 00:05:00
    10. Storing the Image on the Filesystem 00:08:29
    11. Diving into SQLite for Permanent Data Storage 00:10:24
    12. Storing Data in the Local Database 00:07:53
    13. Fetching Data from the Local Database 00:07:00
    14. Getting the User Location 00:11:01
    15. Showing a Map Preview of the Location 00:13:25
    16. Displaying an Interactive Map 00:08:32
    17. Adding a Marker 00:05:28
    18. Making the Picked Location "Saveable" 00:07:23
    19. Storing Picked Places 00:02:50
    20. Updating the Location Screen When the Location Changes 00:04:25
    21. Storing the Address 00:07:33
    22. Displaying the "Details" Screen 00:06:28
    23. Finishing the "Map" Screen 00:06:19
    24. Running the App on iOS 00:03:06
    25. Running the App on Android 00:01:22
    26. Wrap Up 00:01:36
  13. Chapter 13 : Building Apps Without Expo
    1. Module Introduction 00:03:32
    2. Alternatives to Expo 00:06:02
    3. Building Apps with Just the React Native CLI 00:09:27
    4. Adding Native Modules to Non-Expo Apps 00:08:55
    5. Understanding Expo's "Bare Workflow" 00:08:35
    6. Ejecting from Expo's "Managed Workflow" 00:10:59
    7. When to Use Which? 00:05:29
  14. Chapter 14 : Publishing React Native Apps
    1. Module Introduction 00:00:41
    2. Deployment Steps 00:04:32
    3. Configuring the App & Publishing 00:08:09
    4. Configuring Icons & The Splash Screen 00:09:13
    5. Working with Offline Asset Bundles 00:03:04
    6. Using "Over the Air Updates" (OTA Updates) 00:07:44
    7. Building the Apps for Deployment (iOS & Android) 00:19:08
    8. Publishing iOS Apps without Expo 00:10:24
    9. Publishing Android Apps without Expo 00:07:21
  15. Chapter 15 : Updating to React Navigation 5+
    1. Module Introduction 00:01:07
    2. What Changed? 00:03:55
    3. Preparing the Project 00:04:03
    4. More Information & Updating the Project Dependencies 00:02:08
    5. Moving from the "Registry-like" to the "Component-based" Navigation Config 00:10:35
    6. First Migration Steps 00:11:37
    7. Converting More Stack Navigators to the New Config 00:06:49
    8. Migrating the Drawer Navigation 00:08:12
    9. Replacing the "Switch" Navigator & Auth Flow 00:12:51
    10. Logout & Further Fixes/ Adjustments 00:04:58
    11. Extracting Screen Params 00:07:47
    12. Setting Screen Options Dynamically 00:03:02
    13. Remaining Migration Steps & Roundup 00:03:03
    14. A Summary of All-Important Changes 00:05:48
  16. Chapter 16 : Course Roundup & Next Steps
    1. Roundup & Next Steps 00:03:38

Product Information

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