Video description
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, Objective-C, or anything else. 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 many global companies are using it to build their mobile apps! With this course, learn 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.
Learn all about the theory behind React Native, its core concepts, how to build responsive designs that work on different device sizes, how to navigate around, use maps and the camera, and so much more! The best way to learn is by building a real app. We will build the “Favorite 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 such as using maps, the camera, user authentication, connecting to a server, and much more in action.
By the end of this course, you will have developed React Native and JavaScript skills needed to build and deploy responsive mobile applications.
What You Will Learn
- Learn how to use React, JavaScript, and native components
- Understand how to navigate React Native apps
- Have a closer look at styling and animating React Native apps
- Learn how to use third-party libraries in your React Native app
- Learn with detailed examples on how to use maps or an image picker
- Learn how to connect to a backend server from your app
Audience
This course is for you if you are a software engineer, web developer, or mobile developer who wants to create modern, powerful, and responsive mobile apps with React Native. To get started with this course, you will need a basic understanding of React and JavaScript.
About The Author
Academind by Maximilian Schwarzmüller:
Academind GmbH
Bundling the courses and the knowledge of successful instructors, Academind strives to deliver high-quality online education. The platform covers topics such as web development, data analysis, and more in a fun and engaging way.
Maximilian Schwarzmüller
Since the age of 13, he has never stopped learning new programming skills and languages. In his early days, he started creating websites simply for fun. This passion has remained and shaped his decision to work as a freelance web developer and consultant. Although he started web development on the backend (PHP with Laravel and NodeJS), he has progressed to becoming a front-end developer using modern frameworks such as React, Angular, and VueJS 2 in many projects.
The most rewarding experience for him is to see how people find new and better jobs, build exciting web applications, acquire amazing projects, or simply enjoy their hobby with the help of his content.
Table of contents
-
Chapter 1 : Getting Started
- Welcome to This Course and What to Expect!
- What Is React Native?
- A Glance Under the Hood of React Native.
- Creating React Native Projects: Expo CLI Versus React Native CLI
- Creating a New React Native Project
- Analyzing the Created Project
- Running Our First App on a Real Device!
- Setting Up a Local Development Environment
- About This Course
-
Chapter 2 : React Native Basics [Course Goals App]
- Module Introduction
- Exploring Core Components and Component Styling
- Working with Core Components
- Styling React Native Apps
- Exploring Layouts and Flexbox
- React Native and Flexbox
- Using Flexbox to Create Layouts
- Flexbox - A Deep Dive
- Improving the Layout
- Handling Events
- Managing a List of Course Goals (in Our Demo App)
- iOS and Android Styling Differences
- Making Content Scrollable with ScrollView
- Optimizing Lists with FlatList
- Splitting Components into Smaller Components
- Utilizing Props
- Working on the "Goal Input" Component
- Handling Taps with the Pressable Component
- Making Items Deletable and Using IDs
- Adding an Android Ripple Effect and an iOS Alternative
- Adding a Modal Screen
- Styling the Modal Overlay
- Opening and Closing the Modal
- Working with Images and Changing Colors
- App Finishing Touches
- Module Summary
- Chapter 3 : Debugging React Native Apps (Introduction)
-
Chapter 4 : Diving Deeper into Components, Layouts, and Styling - Building a Mini-Game App
- Module Introduction and What We will Build
- Starting Setup and Analyzing the Target App
- Setting Up Our Screen Components
- Creating Custom Buttons
- Styling for Android and iOS
- Styling the "Number Input" Element
- Configuring the TextInput Field
- Adding Visual Feedback to the Buttons
- Improving the Buttons
- Coloring the Components and the Overall App
- Adding a Linear Gradient
- Adding a Background Image
- Getting Started with Game Logic
- Handling User Input and Showing an Alert Dialog
- Switching Screens Programmatically
- Starting Work on the Game Screen
- Respecting Device Screen Restrictions with the SafeAreaView
- Creating a Title Component
- Managing Colors Globally
- Creating, Using, and Displaying Random Numbers
- Adding Game Control Buttons ("+" and "-") to the App
- Checking for "Game Over"
- Improving the Game Screen Visuals
- Using "Cascading Styles"
- Working with Icons (Button Icons)
- Adding and Using Custom Fonts with React Native Apps
- Adding a (Foreground) Image
- Using and Styling Nested Text
- Adding Logic to (Re)Start Games and Displaying a Summary Screen
- Logging Game Rounds
- Outputting Log Data with FlatList
- Styling the Game Round Logs
- Finishing Touches
- Module Summary
-
Chapter 5 : Building Adaptive User Interfaces (Adapt to Platform and Device Sizes)
- Module Introduction
- Setting Dynamic Widths
- Introducing the Dimensions API
- Adjusting Image Sizes with the Dimensions API
- Understanding Screen Orientation Problems
- Setting Sizes Dynamically (for Different Orientations)
- Managing Screen Content with KeyboardAvoidingView
- Improving the Landscape Mode UI
- Further Improvements with useWindowDimensions
- Writing Platform-Specific Code with the Platform API
- Styling the Status Bar
-
Chapter 6 : React Native Navigation with React Navigation [Meals App]
- Module Introduction
- What Is Navigation?
- Getting Started with the App and Outputting Meal Categories
- Displaying Items in a Grid
- Getting Started with the React Navigation Package
- Implementing Navigation Between Two Screens
- Understanding the useNavigation Hook
- Working with Route Parameters to Pass Data Between Screens
- Displaying Meals
- Adding Images and Styling
- Styling Screen Headers and Backgrounds
- Setting Navigation Options Dynamically
- Adding and Configuring the Meal Details Screen
- Outputting Content in the Meal Details Screen
- Finishing the Meal Details Screen
- Adding Header Buttons
- Adding an Icon Button to a Header
- Adding Drawer Navigation and Creating a Drawer
- Configuring the Drawer Navigator and the Drawer
- Adding, Configuring, and Using Bottom Tabs
- Nesting Navigators
- Bottom Tabs and App Finishing Touches
- Module Summary
-
Chapter 7 : App-Wide State Management with Redux and Context API
- Module Introduction
- Getting Started with React's Context API
- Managing App-Wide State with Context
- Using the Created Context with useContext
- Managing Favorite Meals with the Context API
- Getting Started with Redux and Redux Toolkit
- Working with Redux Slices
- Managing Redux State and Dispatching Actions
- Using Redux State in Components
- Module Summary
-
Chapter 8 : Time to Practice - The Expense Tracker App
- Module Introduction and What We will Build
- The Starting Setup
- Adding Navigation (with React Navigation) and Configuring Navigation
- Adding Global Colors and Editing Navigation Configuration
- Creating Key App Components to Display Expenses
- Continuing Work on the Expense-Related Components
- Adding Dummy Expense Data
- Outputting a List of Expenses
- Improving App Layout and Styling
- Working on Expense List Items
- Formatting Dates
- Adding a Header Button and Making Expense Items Tappable
- Navigating Programmatically Between Screens
- Styling the Expense Management Screen
- Supporting Different Editing Modes and Using Route Parameters
- Adding a "Delete" Button
- Adding Custom Buttons
- Closing a Modal Programmatically
- Managing App-Wide State with Context
- Using Context from Inside Components
- Deleting and Updating Expenses
- Finishing Touches
-
Chapter 9 : Handling User Input
- Module Introduction
- Building a Custom Input Component
- Creating an Overall Form
- Configuring the Form Input Elements
- Adding Styling
- Setting the Form Layout
- Handling User Input in a Generic Way
- Managing Form State and Submission
- Working with Entered Data
- Setting and Using Default Values
- Adding Validation
- Providing Visual Validation Feedback
- Adding Error Styling
- Module Summary
-
Chapter 10 : Sending Http Requests
- Module Introduction
- Backend Setup (Firebase)
- Installing Axios
- Sending POST Http Requests
- Fetching Backend Data (GET Requests)
- Transforming and Using Fetched Data
- Using Response Data from POST Requests
- Updating and Deleting Backend Data (UPDATE and DELETE Requests)
- Managing the Loading State
- Handling Request Errors
- Module Summary
-
Chapter 11 : User Authentication
- Module Introduction
- Demo App Walkthrough
- How Does Authentication Work?
- Backend Setup
- Controlling Signup and Login Screens
- Sending Authentication Requests to the Backend
- Creating New Users
- Logging Users In
- Authentication Error Handling
- Storing and Managing the User Authentication State (with Context)
- Extracting the Authentication Token
- Protecting Screens
- Adding a Logout Functionality
- Accessing Protected Resources
- Storing Auth Tokens on the Device and Logging Users Automatically
- Module Summary
-
Chapter 12 : Using Native Device Features (Camera, Location, and More)
- Module Introduction
- Adding a "Favorite Places" List
- Editing the Favorite Place Items
- Adding an "Add Place" Screen + Navigation
- Adding a Header Button
- Global Colors and Styling
- Getting Started with a Custom Form
- Adding and Configuring the Camera Package (for Native Camera Access)
- Taking Photos on Android
- Taking Photos on iOS + Managing Permissions
- Showing an Image Preview
- Creating a Custom Button
- Getting Started with the Location Picker
- Locating Users
- Adding a Location Preview Map
- Adding an Interactive Map (Google Maps and Apple Maps)
- Allowing Map Interaction and Adding Markers
- Confirming Picked Locations
- Previewing Picked Locations
- Adding a Form Submit Button
- Managing Location and Image State in the Form
- Converting Picked Locations to Human-Readable Addresses
- Passing Entered Data to the "AllPlaces" Screen
- Outputting a List of Places
- Styling Place Items
- SQLite: Getting Started and Initialization
- Preparing Code to Insert Data into the SQLite Database
- Inserting Places into the Database
- Fetching Places from the Database
- Adding the Place Details Screen
- Fetching Place Detail Data from the Database
- Showing a Readonly Map
- Module Summary
-
Chapter 13 : Building React Native Apps without Expo
- Module Introduction
- How Exactly Does Expo Work?
- Expo Alternatives
- Setting Up Our System
- Using Expo's Bare Workflow
- Using Native Device Features with the Bare Workflow
- Ejecting to the Bare Workflow
- Creating Projects with the React Native CLI (no Expo)
- Non-Expo Apps and Native Device Features
- Module Summary
-
Chapter 14 : Publishing React Native Apps
- Module Introduction
- Publishing Apps: An Overview
- Key Configuration Items and Considerations
- Configuring App Names and Versions
- A Quick Note About Environment Variables
- Adding Icons and a Splash Screen
- Building Expo Apps with EAS
- EAS for iOS (Even on Windows Devices)
- Building for iOS without Expo
- Building for Android without Expo
-
Chapter 15 : Push Notifications
- Module Introduction
- What Are (Local) Notifications?
- Adding the Expo Notification Package
- Scheduling Notifications
- Handling Incoming Notifications
- Reacting to Incoming Notifications
- Reacting to User Interaction with Incoming Notifications
- Understanding Push Notifications
- Push Notifications Setup
- Using the Push Token
- Sending Push Notifications
- Module Summary
- Chapter 16 : Course Roundup
- Chapter 17 : Bonus: JavaScript Refresher
- Chapter 18 : Bonus: React.js Refresher
Product information
- Title: React Native - The Practical Guide
- Author(s):
- Release date: May 2022
- Publisher(s): Packt Publishing
- ISBN: 9781789139747
You might also like
book
React Hooks in Action
Build stylish, slick, and speedy-to-load user interfaces in React without writing custom classes. React Hooks are …
video
The Complete React Developer Course (with Hooks and Redux)
The Complete React Developer Course (with Hooks and Redux) starts with the fundamentals and covers everything …
video
React - The Complete Guide (incl. Hooks, React Router and Redux)
Learn React or dive deeper into it. Learn the theory, solve assignments, practice on demo projects …
book
Full Stack Development with Spring Boot and React - Third Edition
PUBLISHER'S NOTE: A new edition of this book is now available, revised and updated for Spring …