Share Description
In this course, you will learn :
- The core concepts and theory.
- How to use React, JavaScript and native components.
- Understand how to navigate in React Native apps.
- A closer look at styling and animating React Native apps.
- Instructions on how to use third-party libraries in your React Native app.
- Detailed examples on how to use maps or an image picker.
- A full user authentication flow.
- How to connect to a backend server from your app.
- Debugging instructions.
- And so much more!.
Syllabus :
Section 1 : Getting Started
- What is React Native?
- How React Native Works Preview
- Expo vs React Native CLI
- Node.js Download
- Creating Our First React Native App
- Working on Our First App
- React Native Apps Are Hard Work!
- React Native Alternatives
- Running the App on an Android Emulator
- Running the App on an iOS Simulator
- How to get the Most out of This Course
- Useful Resources & Links
Section 2 : Diving into the Basics [COURSE GOALS APP]
- How to work with React Native Components
- Setting Up A New Project Preview
- Planning the App
- Working with Core Components
- Getting Started with Styles
- Flexbox & Layouts (Intro)
- React Native Flexbox Deep Dive
- Inline Styles & StyleSheet Objects
- Working with State & Events
- Outputting a List of Items
- Styling List Items
- Making it Scrollable with ScrollView!
- A Better List: FlatList
- Splitting the App Into Components
- Passing Data Between Components
- Working with Touchable Components
- Deleting Items
- Adding a Modal Overlay
- More Flexbox Styling
- Closing the Modal & Clearing Input
- Finishing the Modal Styling
Section 3 : Debugging React Native Apps
- What To Debug & How To Debug?
- Handling Error Messages
- Understanding Code Flow with console.log()
- Using the Remote Debugger & Breakpoints
- Working with the Device DevTools Overlay
- Debugging the UI & Using React Native Debugger
Section 4 : Components, Styling, Layouts - Building Real Apps [GUESS A NUMBER APP]
- Setup & App Planning
- Adding a Custom Header Component
- Adding a Screen Component
- Working on the Layout
- Styling a View as a "Card" Container (with Drop Shadows & Rounded Corners)
- Extracting a Card Component (Presentational Component)
- Color Theming with Constants
- Configuring & Styling a TextInput
- Cleaning User Input & Controlling the Soft Keyboard
- Resetting & Confirming User Input
- Showing an Alert
- Time to Finish the "Confirmation Box"
- Adding Random Number Generation
- Switching Between Multiple "Screens"
- Adding Game Features: Hints & Validation
- Checking the "Win" Condition with useEffect()
- Finishing the Game Logic
- Adding Custom Fonts
- A Synthetic Style "Cascade": Custom Wrapper Components & Global Styles
- Adding Local Images
- Styling Images
- Working with Network (Web) Images
- A Closer Look at the "Text" Component (and what you can do with it)
- Building a Custom Button Component
- Adding Icons
- Exploring UI Libraries
- Managing Past Guesses as a List
- Styling List Items & Lists
- ScrollView & Flexbox (Yes, that works!)
- Using FlatList Instead of ScrollView
Section 5 : Responsive & Adaptive User Interfaces and Apps
- Finding Improvement Opportunities
- Working with More Flexible Styling Rules
- Introducing the Dimensions API
- Using Dimensions in "if" Checks
- Calculating Sizes Dynamically
- Problems with Different Device Orientations
- Controlling Orientation & Using the KeyboardAvoidingView
- Listening to Orientation Changes
- Rendering Different Layouts
- Fixing the GameOver Screen
- Expo's ScreenOrientation API
- Introducing the Platform API
- Working with Platform.select() and Platform in "if" Checks
- Using Platform-specific Code Files
- Using the SafeAreaView
Section 6 : Navigation with React Navigation [THE MEALS APP]
- Planning the App
- Adding Screens
- Adding Fonts
- Installing React Navigation & Adding Navigation to the App
- Creating a StackNavigator
- Navigating Between Screens
- Navigation to the "Meal Details" Screen
- Pushing, Popping & Replacing
- Outputting a Grid of Categories
- Configuring the Header with Navigation Options
- Passing & Reading Params Upon Navigation
- Setting Dynamic Navigation Options
- Default Navigation Options & Config
- Grid Styling & Some Refactoring
- Adding Meal Models & Data
- Loading Meals for Categories
- Rendering a Meals List
- Passing Data to the Meal Detail Screen
- Adding Header Buttons
- Fixing the Shadows
- Adding Tabs-based Navigation
- Setting Icons and Configuring Tabs
- Adding MaterialBottomTabs
- Adding a Favorites Stack
- Adding a Menu Button & Drawer Navigation
- Configuring the Drawer
- More Navigation Config & Styling
- Adding a DefaultText Component
- Adding the MealDetail Screen Content
- Time for the "Filters" Screen Content!
- Passing Data Between Component & Navigation Options (Header)
Section 7 : State Management & Redux
- What is State & What is Redux?
- Redux & Store Setup
- Selecting State Slices
- Redux Data & Navigation Options
- Dispatching Actions & Reducer Logic
- Switching the Favorites Icon
- Rendering a Fallback Text
- Adding Filtering Logic
- Dispatching Filter Actions
Section 8 : Time to Practice - THE SHOP APP
- Planning the App
- Creating the Basic Project Setup
- The Products Overview Screen
- Setting Up a Navigator
- Styling the Product Items
- Adding Touchable Components
- Working on the Product Details Screen
- Using Custom Fonts
- Adding Items to the Cart
- Implementing Header Buttons
- Outputting Cart Items
- Adding Logic to Delete Items
- Adding Redux Logic for Orders
- SideDrawer & The Orders Screen
- Clearing the Cart
- Styling Order Items
- Making the "Show Details" Button Work
- Building the "User Products" Screen
- Reorganizing the ProductItem Component
- Deleting Items
- Adding Basic Editing & Navigation Logic
- Handling User Input
- Using Params to Submit User Input
- Dispatching Actions for Creating & Updating
- Time to Improve the App!
Section 9 : Handling User Input
- Configuring TextInputs
- Adding Basic Validation
- Getting Started with useReducer()
- Finishing the Merged Form & Input Management
- Moving Input Logic Into A Separate Component
- Connecting Input Component & Form
- Tweaking Styles & Handling the Soft Keyboard
Section 10 : Http Requests & Adding a Web Server + Database
- Setup & How To Send Requests
- Installing Redux Thunk
- Storing Products on a Server
- Fetching Products from the Server
- Displaying a Loading Spinner & Handling Errors
- Setting Up a Navigation Listener
- Updating & Deleting Products
- Handling Additional Errors
- Storing Orders
- Displaying an ActivityIndicator
- Fetching Stored Orders
- Adding "Pull to Refresh"
Section 11 : User Authentication
- How Authentication Works
- Implementing a Basic Login Screen
- Adding User Signup
- Logging Users In
- Managing the Loading State & Errors
- Using the Token
- Mapping Orders to Users
- Improved Mapping (Scoping)
- Implementing "Auto Login"
- Adding Logout
- Implementing "Auto Logout"
Section 12 : Native Device Features (Camera, Maps, Location, SQLite, ...) [GREAT PLACES APP]
- Planning the App
- Screen & Navigation Setup
- Getting Started with the Form
- Redux & Adding Places
- Outputting a List of Places
- Accessing the Device Camera
- Configuring the Camera Access
- Using the Picked Image
- Storing the Image on the Filesystem
- Diving into SQLite for Permanent Data Storage
- Storing Data in the Local Database
- Fetching Data from the Local Database
- Getting the User Location
- Showing a Map Preview of the Location
- Displaying an Interactive Map
- Adding a Marker
- Making the Picked Location "Saveable"
- Storing Picked Places
- Updating the Location Screen When the Location Changes
- Storing the Address
- Displaying the "Details" Screen
- Finishing the "Map" Screen
- Running the App on iOS
- Running the App on Android
Section 13 : Building Apps Without Expo
- Alternatives to Expo
- Building Apps with Just the React Native CLI
- Adding Native Modules to Non-Expo Apps
- Understanding Expo's "Bare Workflow"
- Ejecting from Expo's "Managed Workflow"
Section 14 : Publishing React Native Apps
- Deployment Steps
- Configuring the App & Publishing
- Configuring Icons & The Splash Screen
- Working with Offline Asset Bundles
- Using "Over the Air Updates" (OTA Updates)
- Building the Apps for Deployment (iOS & Android)
- Publishing iOS Apps without Expo
- Publishing Android Apps without Expo
Section 15 : Updating to React Navigation 5+
- What Changed?
- Preparing the Project
- More Information & Updating the Project Dependencies
- Moving from the "Registry-like" to the "Component-based" Navigation Config
- First Migration Steps
- Converting More Stack Navigators to the New Config
- Migrating the Drawer Navigation
- Replacing the "Switch" Navigator & Auth Flow
- Logout & Further Fixes/ Adjustments
- Extracting Screen Params
- Setting Screen Options Dynamically
- Remaining Migration Steps & Roundup
- A Summary Of All Important Changes
