The Complete React Native and Redux Course
Course Features
Course Details
What Will I 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
Requirements
All you need is basic understanding of Javascript.
Course Description
We'll start by mastering the fundamentals of React, including JSX, “props", “state", and event handling. Source code is provided for each lecture, so you will always stay up-to-date with the course pacing. Special attention has been paid to creating reusable components that you'll be able to make use of on your own fantastic projects. If you are new to React, or if you've been working to learn it but sometimes feel like you still don't quite 'get it', this is the React course for you! To learn React you have to understand it. 1.Learn how to use React's custom markup language, JSX, to clean up your Javascript code. 2.Learn the process of converting JSX to raw Javascript on the fly in your browser. 3.Master the process of breaking down a complex component into many smaller, interchangeable components. 4.Grasp the difference between “props" and “state" and when to use each. 5.Develop apps that are unique, fun, and responsive. 6.Build on both Android and iOS platforms 7.Master integration with Firebase for user authentication 8.Learn the core principles of navigation with React Native I've built the course that I would have wanted to take when I was learning React Native. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.
Who is the target audience?
This course is for anyone looking to make native apps
Course Outline: 1.Dive Right In!
Introduction - Course Roadmap
Roadmap to the First App
Official Course Github Repo
2.Got OSX? Go Here.
OSX Installation
More on OSX Installation
Running in the Simulator
3.Got Windows? Go Here.
Windows Setup of React Native
Android Studio and React Native CLI Installation
Emulator Creation and System Variables
4.[Optional] ESLint Setup
ESLint Setup and Overview
ESLint Setup with Atom
ESLint Setup with Sublime Text 3
ESLint Setup with VSCode
5.Onwards!
Project Directory Walkthrough
Getting Content on the Screen
React vs React Native
Creating a Component with JSX
Registering a Component
Destructuring Imports
Application Outline
The Header Component
Consuming File Exports
6.Making Great Looking Apps
Styling with React Native
More on Styling Components
Introduction to Flexbox
Header Styling
Making the Header Reusable
7.HTTP Requests with React Native
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
8.Handling Component Layout
Mastering Layout with Flexbox
Positioning of Elements on Mobile
More on Styling
Images with React Native
Displaying Album Artwork
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
9.Authentication with firebase
Auth App Introduction
A Common Root Component
Copying Reusable Components
What is Firebase?
Firebase Client Setup
Login Form Scaffolding
Handling User Inputs
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
10.Processing Authentication Credentials
Logging a User In
Error Handling
More on Authentication Flow
Creating an Activity Spinner
Conditional Rendering of JSX
Clearing the Form Spinner
Handling Authentication Events
More on Conditional Rendering
Logging a User Out and Wrapup
11.Digging Deeper with Redux
App Mockup and Approach
The Basics of Redux
More on Redux
Redux is Hard!
Application Boilerplate
More on Redux Boilerplate
12.Back to React
Rendering the Header
Reducer and State Design
Library List of Data
JSON CopyPaste
The Connect Function
MapStateToProps with Connect
A Quick Review and Breather
13.Rendering Lists the Right Way
The Theory of ListView
ListView in Practice
Rendering a Single Row
Styling the List
Creating the Selection Reducer
Introducing Action Creators
Calling Action Creators
Adding a Touchable
Rules of Reducers
Expanding a Row
Moving Logic Out of Components
Animations
Wrapup
14.Not Done Yet...
Overview of Our Next App
App Challenges
Just a Touch More Setup
More on Boilerplate Setup
15.Handling Data in React vs Redux
Login Form in a Redux World
Rebuilding the Login Form
Handling Form Updates with Action Creators
Wiring up Action Creators
Typed Actions
16.Don't Mutate that State
Immutable State
Creating Immutable State
More on Creating Immutable State
Synchronous vs Asynchronous Action Creators
Introduction to Redux Thunk
Redux Thunk in Practice
Redux Thunk in Practice Continued
Making LoginUser More Robust
Creating User Accounts
Showing Error Messages
A Firebase Gotcha
Showing a Spinner on Loading
17.Navigating Users Around
Dealing with Navigation
Navigation in the Router
Addressing Styling Issues
Displaying Multiple Scenes
Navigating Between Routes
Grouping Scenes with Buckets
Navigation Bar Buttons
Navigating to the Employee Creation Form
Building the Employee Creation Form
Employee Form Actions
Handling Form Updates at the Reducer Level
Dynamic Property Updates
The Picker Component
Pickers and Style Overrides
18.Firebase as a Data Store
Firebase JSON Schema
Data Security in Firebase
Creating Records with Firebase
Default Form Values
Successful Data Save to Firebase
Resetting Form Properties
Fetching Data from Firebase
Storing Data by ID
Dynamic DataSource Building
Transforming Objects to Arrays
List Building in Employee List
19.Code Reuse - Edit vs Create
Reusing the Employee Form
Create vs Edit Forms
Reusable Forms
A Standalone Employee Edit Form
Initializing Forms from State
Updating Firebase Records
Clearing Form Attributes
Texting Employees
Modals as a Reusable Component
The Modal Component Continued
Styling the Modal
Employee Delete Action Creator
Wiring up Employee Delete
20.Bonus!
Bonus? Bonus!
This course does not have any sections.