The Complete React Native + Hooks Course

Understand React Native  with Hooks, Context, and React Navigation.
 
 
Apply Now

What you'll learn

  • Create real-world native apps using React Native
  • Understand the terminology and concepts of Redux
  • Get up to speed with React design principles and methodologies
  • Make truly reusable components that look great
  • Prototype and deploy your own applications to the Apple and Google Play Stores
  • Discover mobile design patterns used by experienced engineers

Course Content

  • How to Get Help
  • Course Overview!
  • Boilerplate Download
  • Trouble Installing?
  • App Setup
  • Making Changes
  • Using iOS and Android Simulators
  • Official Course Repo

  • Overview of React Components
  • Showing a Custom Component
  • Common Questions and Answers
  • Rules of JSX
  • One Common Error
  • JSX Exercise Overview
  • JSX Solution

  • Building Lists
  • The FlatList Element
  • Rendering a FlatList
  • Why a Key Property?
  • Solving the Key Issue
  • A Few Props Around FlatList
  • Exercise Overview Exercise Solution
  • Exercise Solution

  • Button Types
  • Buttons in Action
  • Touchable Opacity in Action
  • Navigating with React Navigation
  • Destructuring Props

  • Component Reuse with Props
  • Buttons in Action
  • Exercise Solution
  • Parent-Child Relationships
  • Communicating from Parent to Child
  • Images Download
  • Showing Images
  • Passing Images as Props
  • Exercise Outline
  • Exercise Solution

  • State in Components
  • Screen Boilerplate
  • State in Action
  • Notes on State
  • App Overview
  • Generating Random Colors
  • Adding Random Colors
  • Showing Colors with a FlatList
  • The Position Property
  • App Overview
  • Coordinating State
  • Passing Callbacks to Children
  • Tying State Values Together
  • Validating State Changes
  • Reusable State Updates
  • Introduction to Reducers
  • Creating a Reducer
  • Applying State with a Reducer
  • Restoring Validation
  • Community Convention in Reducers
  • Exercise Solution
  • Two Important Props
  • Weird Things with Text and State
  • Updating State
  • Exercise Outline
  • Exercise Solution

  • Layout with React Native
  • Basics of Box Object Model
  • AlignItems with Flex
    • Flex Direction
  • Justify Content
  • Justify Content
  • Flex Values
  • Align Self on Children
  • The Position Property
  • Top, Bottom, Left, Right
  • Absolute Fill Objects
  • Applying Layout Systems
  • Exercise Overview
  • Exercise Solutions

  • Configuring Axios
  • Making the Request
  • Error Handling
  • Running an Initial Search

  • Incorrect Hook Name in Slide
  • The UseEffect Hook
  • Extracting Hook Logic
  • Showing Search Results
  • Grouping Results
  • FlatList Rendering

  • Showing a Single Result
  • Showing Additional Info
  • A Few More Styling Issues
  • Hiding Scroll Bars
  • Constraining View Elements
  • Empty Elements
  • Spacing on the Search Bar
  • Reminder on Navigation
  • Navigating from a Child Component
  • The WithNavigation Helper
  • Communicating Between Screens
  • Fetching a Single Restaurant
  • Showing a List of Images
  • One Last Fix

  • App Overview
  • Issues with Data
  • React Navigation Fix
  • Initial Setup
  • Wrapping the Navigator
  • Introduction to Context
  • Adding Context
  • Moving Data with Context
  • Rendering a List of Posts
  • Adding State in Context
  • It Works!
  • Opportunity for Improvement
  • Updating with UseReducer
  • Automating Context Creation
  • More Automatic Context Creation
  • A Bit of Styling
  • Deleting Posts
  • Updating the Reducer
  • Navigation on Tap
  • Retrieving Single Posts
  • Adding a Creation Screen
  • headerRight Deprecation in 'navigationOptions'
  • Header Navigation
  • Displaying a Form
  • Saving a New Post
  • Navigation on Save
  • headerRight Deprecation in 'navigationOptions'
  • The Edit Icon Link
  • Communicating Info to Edit
  • Initializing State from Context
  • Extracting Form Logic
  • Customizing OnSubmit
  • Initial Form Values
  • Default Props
  • Editing Action Function
  • Editing in a Reducer
  • Navigating Backwards

  • Outside Data API
  • Issues with Servers + React Native
  • JSON Server and Ngrok Setup
  • JSON Server REST Conventions
  • Making a Request
  • Remote Fetch of Posts
  • Creating Posts with Post Requests
  • Refetching on Navigate
  • Deleting a Post
  • Editing Posts
  • App Wrapup

  • App Overview
  • Dependencies Setup
  • Error Handling
    • The Basics of Express
  • MongoDB Setup
  • Connecting to MongoDB
  • Understanding the Signup Process
  • Using Postman
  • Defining a User Schema
  • Creating and Saving a User
  • JSON Web Tokens
  • Creating a JWT
  • Wiring Up JSON Web Tokens
  • Understanding Password Hashing
  • Salting and Hashing
  • Testing Signup and Signin
  • Defining Tracks
  • Listing Tracks
  • Creating Tracks

  • Server Code
  • Navigation Design
  • React Navigation Fix
  • A LOT of BoilerplateFix
  • MongoDB Setup
  • Navigator Hookup
  • Testing the Navigation Flow
  • Helper Styling Components
  • navigationOptions Deprecation Warning
  • Styling Odds and Ends
  • Input Props
  • The Auth Context
  • What's the Context Doing?
  • Axios Setup
  • Making an API Request
  • Handling Errored Requests
  • Async Storage
  • Storing the Token
  • Navigation From Outside of React
  • Oops, Typo
  • Navigation to Signin
  • Extracting Form Logic
  • Last Bit of Extracting
  • Last Bit of Extracting
  • Creating a NavLink
  • Last Bit of Extracting
  • navigationOptions Deprecation
  • Real Component Reuse!
  • Wiring Up Signin
  • onWillFocus vs onWillBlur Update
  • Clearing Error Messages
  • Automatic Signin
  • Empty Screens While Resolving Auth
  • Signing Out a User
  • Safe Area Views
  • Working on Track Create
  • Installing React Native Maps
  • Showing a Map
  • Drawing a Series of Points
  • Notes on Location
  • Fix for Missing Location Request Error
  • Requesting Location Permissions
  • Resetting Permissions
  • How to Test Location?
  • Faking the Users Location
  • Reading a Location
  • Bugginess with Location
  • Location Architecture
  • Location Context
  • Live Location Updates
  • Drawing a Position Indicator
  • Disabling Location Tracking
  • Automatic Disables
  • Building a Track Form
  • Updates to Location Context
  • Track Form Wire Up
  • Buggy UseEffects
  • Understanding Stale References
  • Some Errors You May See
  • Kind of Fixed
  • The UseCallback Hook
  • Cleaning Up After Ourselves
  • Avoiding Stale References
  • Tracking While Recording
  • Bring Back the Polyline
  • What Manages Tracks
  • Coordination Between Contexts
  • Automatic Authentication
  • Form Reset and Navigation
  • Fetching Created Tracks
  • Listing All Tracks
  • Navigating to a Saved Track
  • Showing Track Details
  • Fixing Odds and Ends

  • Note on the Following Videos

  • Windows Setup of React Native
  • Android Studio and React Native CLI Installation
  • Emulator Creation and System Variables
  • ESLint Setup with VSCode

  • Join the #FlutterBrew Contest!
  • Keep Learning!
  • Publish Your Apps!
  • Tip from Fash- Review your goals!
  • Feedback Time!

  • Troubleshooting React Native Installs
  • Project Directory Walkthrough
  • Getting Content on the Screen
  • Creating a Component with JSX
  • Registering a Component
  • Destructuring Imports
  • Application Outline
  • The Header Component
  • Consuming File Exports

  • Troubleshooting React Native Installs
  • Project Directory Walkthrough
  • Getting Content on the Screen
  • Creating a Component with JSX
  • Registering a Component
  • Destructuring Imports
  • Application Outline
  • The Header Component
  • Consuming File Exports

  • Sourcing Album Data
  • List Component Boilerplate
  • Class Based Components
  • Lifecycle Methods
  • Quick Note On Axios
  • Network Requests
  • Component Level State
  • More on Component Level State
  • Rendering a List of Components
  • Displaying Individual Albums
  • Fantastic Reusable Components - The Card
  • Styling a Card
  • Passing Components as Props
  • Dividing Cards into Sections

  • Mastering Layout with Flexbox
  • Positioning of Elements on Mobile
  • More on Styling
  • Lifecycle Methods
  • Making Content Scrollable
  • Handling User Input with Buttons
  • Styling of Buttons with UX Considerations
  • Responding to User Input
  • Linking Between Mobile Apps
  • Setting Button Text by Props
  • App Wrapup

  • Auth App Introduction
  • A Common Root Component
  • Copying Reusable Components
  • What is Firebase?
  • Firebase Client Setup
  • Login Form Scaffolding
  • Handling User Inputs
  • Responding to User Input
  • More on Handling User Inputs
  • How to Create Controlled Components
  • Making Text Inputs From Scratch
  • A Focus on Passing Props
  • Making the Input Pretty
  • Wrapping up Inputs
  • Password Inputs

  • Logging a User In
  • Error Handling
  • More on Authentication Flow
  • Creating an Activity Spinner
  • Conditional Rendering of JSX
  • Handling Authentication Events
  • Handling User Inputs
  • Responding to User Input
  • More on Conditional Rendering
  • Logging a User Out and Wrapup

  • App Mockup and Approach
  • The Basics of Redux
  • More on Redux
  • Redux is Hard!
  • Application Boilerplate
  • More on Redux Boilerplate
  • Handling User Inputs
  • Responding to User Input
  • More on Handling User Inputs
  • How to Create Controlled Components

  • Rendering the Header
  • Reducer and State Design
  • Library List of Data
  • JSON CopyPaste
  • The Connect Function
  • MapStateToProps with Connect
  • A Quick Review and Breather

  • The Theory of ListView
  • ListView in Practice
  • Styling the List
  • Creating the Selection Reducer
  • Introducing Action Creators
  • MapStateToProps with Connect
  • Calling Action Creators
  • Adding a Touchable
  • Rules of Reducers
  • Expanding a Row
  • Moving Logic Out of Components
  • Animations
  • Wrapup

  • Overview of Our Next App
  • App Challenges
  • Quick Note
  • Just a Touch More Setup
  • More on Boilerplate Setup

Requirement

  • All you need is basic understanding of Javascript
Apply Now