React Native – The Practical Guide [2024]

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Welcome To This Course & What To Expect!

Lecture 2: What Is React Native?

Lecture 3: Join our Online Learning Community

Lecture 4: A Glance Under The Hood Of React Native

Lecture 5: Creating React Native Projects: Expo CLI vs React Native CLI

Lecture 6: Creating a New React Native Project

Lecture 7: Analyzing The Created Project

Lecture 8: Running Our First App On A Real Device!

Lecture 9: Setting Up A Local Development Environment

Lecture 10: Course Setup

Lecture 11: About This Course

Lecture 12: Course Resources, Code Snapshots & How To Use

Chapter 2: React Native Basics [COURSE GOALS APP]

Lecture 1: Module Introduction

Lecture 2: Exploring Core Components & Component Styling

Lecture 3: Working With Core Components

Lecture 4: Styling React Native Apps

Lecture 5: React Native: Core Components, Styling & Colors – More Information

Lecture 6: Exploring Layouts & Flexbox

Lecture 7: React Native & Flexbox

Lecture 8: Using Flexbox To Create Layouts

Lecture 9: Flexbox – A Deep Dive

Lecture 10: Improving The Layout

Lecture 11: Handling Events

Lecture 12: Managing A List Of Course Goals (in our Demo App)

Lecture 13: iOS & Android Styling Differences

Lecture 14: Making Content Scrollable with ScrollView

Lecture 15: Optimizing Lists with FlatList

Lecture 16: Splitting Components Into Smaller Components

Lecture 17: Utilizing Props

Lecture 18: Working on the "Goal Input" Component

Lecture 19: Handling Taps with the Pressable Component

Lecture 20: Making Items Deletable & Using IDs

Lecture 21: Adding an Android Ripple Effect & an iOS Alternative

Lecture 22: Adding a Modal Screen

Lecture 23: Styling the Modal Overlay

Lecture 24: Opening & Closing the Modal

Lecture 25: Working with Images & Changing Colors

Lecture 26: App Finishing Touches

Lecture 27: Module Summary

Chapter 3: Debugging React Native Apps (Introduction)

Lecture 1: Module Introduction

Lecture 2: Handling Errors

Lecture 3: Logging to the Console

Lecture 4: Debugging JavaScript Remotely

Lecture 5: Using the React DevTools

Lecture 6: Using the Documentation

Chapter 4: Diving Deeper into Components, Layouts & Styling – Building a Mini-Game App

Lecture 1: Module Introduction & What We'll Build

Lecture 2: Starting Setup & Analyzing the Target App

Lecture 3: Setting Up our Screen Components

Lecture 4: Creating Custom Buttons

Lecture 5: Styling for Android & iOS

Lecture 6: Styling the "Number Input" Element

Lecture 7: Configuring the TextInput Field

Lecture 8: Adding Visual Feedback to the Buttons

Lecture 9: Improving the Buttons

Lecture 10: Coloring the Components & The Overall App

Lecture 11: Adding a Linear Gradient

Lecture 12: Adding a Background Image

Lecture 13: Getting Started with the Game Logic

Lecture 14: Handling User Input & Showing an Alert Dialog

Lecture 15: Switching Screens Programmatically

Lecture 16: Starting Work on the Game Screen

Lecture 17: Respecting Device Screen Restrictions with the SafeAreaView

Lecture 18: Creating a Title Component

Lecture 19: Managing Colors Globally

Lecture 20: Creating, Using & Displaying Random Numbers

Lecture 21: Adding Game Control Buttons ("+" & "-") to the App

Lecture 22: Checking for "Game Over"

Lecture 23: Improving the Game Screen Visuals

Lecture 24: Using "Cascading Styles"

Lecture 25: Working with Icons (Button Icons)

Lecture 26: Adding & Using Custom Fonts with React Native Apps

Lecture 27: Adding a (Foreground) Image

Lecture 28: Using & Styling Nested Text

Lecture 29: Adding Logic to (Re-)Start Games & Displaying a Summary Screen

Lecture 30: Logging Game Rounds

Lecture 31: Outputting Log Data with FlatList

Lecture 32: Styling the Game Round Logs

Lecture 33: Finishing Touches

Lecture 34: Module Summary

Chapter 5: Building Adaptive User Interfaces (Adapt to Platform & Device Sizes)

Lecture 1: Module Introduction

Lecture 2: Setting Dynamic Widths

Lecture 3: Introducing the Dimensions API

Lecture 4: Adjusting Image Sizes with the Dimensions API

Lecture 5: Understanding Screen Orientation Problems

Lecture 6: Setting Sizes Dynamically (for different Orientations)

Lecture 7: Managing Screen Content with KeyboardAvoidingView

Lecture 8: Improving the Landscape Mode UI

Lecture 9: Further Improvements with useWindowDimensions

Lecture 10: Writing Platform-specific Code with the Platform API

Lecture 11: Styling the Status Bar

Chapter 6: React Native Navigation with React Navigation [MEALS APP]

Lecture 1: Module Introduction