React Native - 实用指南 [2023]
React Native - The Practical Guide [2023]
- 01 - Getting Started
- 001 Welcome To This Course & What To Expect!
- 002 What Is React Native
- 004 A Glance Under The Hood Of React Native
- 005 Creating React Native Projects Expo CLI vs React Native CLI
- 006 Creating a New React Native Project
- 007 Analyzing The Created Project
- 008 Running Our First App On A Real Device!
- 009 Setting Up A Local Development Environment
- 010 About This Course
- 02 - React Native Basics [COURSE GOALS APP]
- 001 Module Introduction
- 002 Exploring Core Components & Component Styling
- 003 Working With Core Components
- 004 Styling React Native Apps
- 006 Exploring Layouts & Flexbox
- 007 React Native & Flexbox
- 008 Using Flexbox To Create Layouts
- 009 Flexbox - A Deep Dive
- 010 Improving The Layout
- 011 Handling Events
- 012 Managing A List Of Course Goals (in our Demo App)
- 013 iOS & Android Styling Differences
- 014 Making Content Scrollable with ScrollView
- 015 Optimizing Lists with FlatList
- 016 Splitting Components Into Smaller Components
- 017 Utilizing Props
- 018 Working on the Goal Input Component
- 019 Handling Taps with the Pressable Component
- 020 Making Items Deletable & Using IDs
- 021 Adding an Android Ripple Effect & an iOS Alternative
- 022 Adding a Modal Screen
- 023 Styling the Modal Overlay
- 024 Opening & Closing the Modal
- 025 Working with Images & Changing Colors
- 026 App Finishing Touches
- 027 Module Summary
- 03 - Debugging React Native Apps (Introduction)
- 001 Module Introduction
- 002 Handling Errors
- 003 Logging to the Console
- 004 Debugging JavaScript Remotely
- 005 Using the React DevTools
- 006 Using the Documentation
- 04 - Diving Deeper into Components, Layouts & Styling - Building a Mini-Game App
- 001 Module Introduction & What We'll Build
- 002 Starting Setup & Analyzing the Target App
- 003 Setting Up our Screen Components
- 004 Creating Custom Buttons
- 005 Styling for Android & iOS
- 006 Styling the Number Input Element
- 007 Configuring the TextInput Field
- 008 Adding Visual Feedback to the Buttons
- 009 Improving the Buttons
- 010 Coloring the Components & The Overall App
- 011 Adding a Linear Gradient
- 012 Adding a Background Image
- 013 Getting Started with the Game Logic
- 014 Handling User Input & Showing an Alert Dialog
- 015 Switching Screens Programmatically
- 016 Starting Work on the Game Screen
- 017 Respecting Device Screen Restrictions with the SafeAreaView
- 018 Creating a Title Component
- 019 Managing Colors Globally
- 020 Creating, Using & Displaying Random Numbers
- 021 Adding Game Control Buttons (+ & -) to the App
- 022 Checking for Game Over
- 023 Improving the Game Screen Visuals
- 024 Using Cascading Styles
- 025 Working with Icons (Button Icons)
- 026 Adding & Using Custom Fonts with React Native Apps
- 027 Adding a (Foreground) Image
- 028 Using & Styling Nested Text
- 029 Adding Logic to (Re-)Start Games & Displaying a Summary Screen
- 030 Logging Game Rounds
- 031 Outputting Log Data with FlatList
- 032 Styling the Game Round Logs
- 033 Finishing Touches
- 034 Module Summary
- 05 - Building Adaptive User Interfaces (Adapt to Platform & Device Sizes)
- 001 Module Introduction
- 002 Setting Dynamic Widths
- 003 Introducing the Dimensions API
- 004 Adjusting Image Sizes with the Dimensions API
- 005 Understanding Screen Orientation Problems
- 006 Setting Sizes Dynamically (for different Orientations)
- 007 Managing Screen Content with KeyboardAvoidingView
- 008 Improving the Landscape Mode UI
- 009 Further Improvements with useWindowDimensions
- 010 Writing Platform-specific Code with the Platform API
- 011 Styling the Status Bar
- 06 - React Native Navigation with React Navigation [MEALS APP]
- 001 Module Introduction
- 002 What Is Navigation
- 003 Getting Started with the App & Outputting Meal Categories
- 004 Displaying Items in a Grid
- 005 Getting Started with the React Navigation Package
- 006 Implementing Navigation Between Two Screens
- 008 Understanding the useNavigation Hook
- 009 Working with Route Parameters To Pass Data Between Screens
- 010 Displaying Meals
- 011 Adding Images & Styling
- 012 Styling Screen Headers & Backgrounds
- 013 Setting Navigation Options Dynamically
- 014 Adding & Configuring the Meal Details Screen
- 015 Outputting Content in the Meal Detail Screen
- 016 Finishing the Meal Detail Screen
- 017 Adding Header Buttons
- 018 Adding an Icon Button to a Header
- 019 Adding Drawer Navigation & Creating a Drawer
- 020 Configuring the Drawer Navigator & The Drawer
- 021 Adding, Configuring & Using Bottom Tabs
- 022 Nesting Navigators
- 023 Bottom Tabs & App Finishing Touches
- 024 Module Summary
- 07 - App-wide State Management with Redux & Context API
- 001 Module Introduction
- 002 Getting Started with React's Context API
- 003 Managing App-wide State with Context
- 004 Using the Created Context with useContext
- 005 Managing Favorite Meals with the Context API
- 006 Getting Started with Redux & Redux Toolkit
- 007 Working with Redux Slices
- 008 Managing Redux State & Dispatching Actions
- 009 Using Redux State in Components
- 010 Module Summary
- 08 - Time To Practice - The Expense Tracker App
- 001 Module Introduction & What We'll Build
- 002 The Starting Setup
- 003 Adding Navigation (with React Navigation) & Configuring Navigation
- 004 Adding Global Colors & Editing Navigation Configuration
- 005 Creating Key App Components to Display Expenses
- 006 Continuing Work on the Expense-related Components
- 007 Adding Dummy Expense Data
- 008 Outputting a List of Expenses
- 009 Improving App Layout & Styling
- 010 Working on Expense List Items
- 011 Formatting Dates
- 012 Adding a Header Button & Making Expense Items Tappable
- 013 Navigating Programmatically Between Screens
- 014 Styling The Expense Management Screen
- 015 Supporting Different Editing Modes & Using Route Parameters
- 016 Adding a Delete Button
- 017 Adding Custom Buttons
- 018 Closing A Modal Programmatically
- 019 Managing App-wide State With Context
- 020 Using Context From Inside Components
- 021 Deleting & Updating Expenses
- 022 Finishing Touches
- 09 - Handling User Input
- 001 Module Introduction
- 002 Building a Custom Input Component
- 003 Creating an Overall Form
- 004 Configuring the Form Input Elements
- 005 Adding Styling
- 006 Setting the Form Layout
- 007 Handling User Input in a Generic Way
- 008 Managing Form State & Submission
- 009 Working with Entered Data
- 010 Setting & Using Default Values
- 011 Adding Validation
- 012 Providing Visual Validation Feedback
- 013 Adding Error Styling
- 014 Module Summary
- 10 - Sending Http Requests
- 001 Module Introduction
- 002 Backend Setup (Firebase)
- 003 Installing Axios
- 004 Sending POST Http Requests
- 005 Fetching Backend Data (GET Requests)
- 006 Transforming & Using Fetched Data
- 007 Using Response Data from POST Requests
- 008 Updating & Deleting Backend Data (UPDATE & DELETE Requests)
- 009 Managing the Loading State
- 010 Handling Request Errors
- 011 Module Summary
- 11 - User Authentication
- 001 Module Introduction
- 002 Demo App Walkthrough
- 003 How Does Authentication Work
- 004 Backend Setup
- 005 Controlling Signup & Login Screens
- 006 Sending Authentication Requests to the Backend
- 007 Creating New Users
- 008 Logging Users In
- 009 Authentication Error Handling
- 010 Storing & Managing the User Authentication State (with Context)
- 011 Extracting the Authentication Token
- 012 Protecting Screens
- 013 Adding a Logout Functionality
- 014 Accessing Protected Resources
- 015 Storing Auth Tokens on the Device & Logging Users In Automatically
- 017 Module Summary
- 12 - Using Native Device Features (Camera, Location & More)
- 001 Module Introduction
- 002 Adding a Favorite Places List
- 003 Editing the Favorite Place Items
- 004 Adding an Add Place Screen + Navigation
- 005 Adding a Header Button
- 006 Global Colors & Styling
- 007 Getting Started with a Custom Form
- 008 Adding & Configuring the Camera Package (for Native Camera Access)
- 009 Taking Photos on Android
- 010 Taking Photos on iOS + Managing Permissions
- 011 Showing an Image Preview
- 012 Creating a Custom Button
- 013 Getting Started with the Location Picker
- 014 Locating Users
- 015 Adding a Location Preview Map
- 016 Adding an Interactive Map (Google Maps & Apple Maps)
- 017 Allowing Map Interaction & Adding Markers
- 018 Confirming Picked Locations
- 019 Previewing Picked Locations
- 020 Adding a Form Submit Button
- 021 Managing Location & Image State in the Form
- 022 Converting Picked Locations to Human-Readable Addresses
- 023 Passing Entered Data to the AllPlaces Screen
- 024 Outputting a List Of Places
- 025 Styling Place Items
- 026 SQLite Getting Started & Initialization
- 027 Preparing Code to Insert Data into the SQLite Database
- 028 Inserting Places into the Database
- 029 Fetching Places from the Database
- 030 Adding the Place Details Screen
- 031 Fetching Place Detail Data from the Database
- 032 Showing a Readonly Map
- 033 Module Summary
- 13 - Building React Native Apps Without Expo
- 001 Module Introduction
- 002 How Exactly Does Expo Work
- 003 Expo Alternatives
- 004 Setting Up Our System
- 005 Using Expo's Bare Workflow
- 006 Using Native Device Features with the Bare Workflow
- 007 Ejecting To The Bare Workflow
- 008 Creating Projects with the React Native CLI (no Expo)
- 009 Non-Expo Apps & Native Device Features
- 010 Module Summary
- 14 - Publishing React Native Apps
- 001 Module Introduction
- 002 Publishing Apps An Overview
- 003 Key Configuration Items & Considerations
- 004 Configuring App Names & Versions
- 005 A Quick Note About Environment Variables
- 006 Adding Icons & A Splash Screen
- 007 Building Expo Apps with EAS
- 008 EAS for iOS (even on Windows Devices)
- 009 Building for iOS Without Expo
- 010 Building for Android Without Expo
- 15 - Push Notifications
- 001 Module Introduction
- 002 What are (Local) Notifications
- 003 Adding the Expo Notification Package
- 004 Scheduling Notifications
- 006 Handling Incoming Notifications
- 008 Reacting To Incoming Notifications
- 009 Reacting To User Interaction With Incoming Notifications
- 010 Understanding Push Notifications
- 011 Push Notifications Setup
- 012 Using the Push Token
- 013 Sending Push Notifications
- 014 Module Summary
- 16 - Course Roundup
- 001 Course Roundup
- 17 - Bonus JavaScript Refresher
- 001 Module Introduction
- 002 JavaScript - A Summary
- 004 Core Syntax Refresher
- 005 let & const
- 006 Arrow Functions
- 007 Objects Properties & Methods
- 008 Arrays & Array Methods
- 009 Arrays, Objects & Reference Types
- 010 Spread Operator & Rest Parameters
- 011 Destructuring
- 012 Async Code & Promises
- 013 Wrap Up
- 18 - Bonus React.js Refresher
- 001 Module Introduction
- 002 What is React
- 003 A Starting Project
- 004 Understanding JSX
- 005 Understanding Components
- 006 Working with Multiple Components
- 007 Working with Props
- 008 Rendering Lists of Data
- 009 Handling Events
- 010 Parent-Child Communication
- 011 Managing State
- 012 More on State
- 013 User Input & Two-Way Binding
- 014 Wrap Up
- 19 - Bonus
- 002 This Course Was Updated Update Information