Certified ReactJS Developer

Video Module 01 – Welcome

• Welcome & Asking Good Questions
• ‘Why should I learn React?’

Video Module 02 – Setting up Your Environment

• Section Intro: Setting up Your Environment
• Installing Visual Studio Code
• Installing Node.js & Yarn

Video Module 03 – Hello React

• Section Intro: Hello React
• Setting up a Web Server
• Hello React
• Setting up Babel
• Exploring JSX
• JSX Expressions
• Conditional Rendering in JSX
• ES6 Aside: const and let
• ES6 Aside: Arrow Functions
• ES6 Aside: Arrow Functions Part II
• Events and Attributes
• Manual Data Binding
• Forms and Inputs
• Arrays in JSX
• Picking an Option
• Build It: Visibility Toggle

Video Module 04 – React Components

• Section Intro: React Components
• Thinking in React
• ES6 Classes: Part I
• ES6 Classes: Part II
• Creating a React Component
• Nesting Components
• Component Props
• Events & Methods
• Method Binding
• What Is Component State?
• Adding State to Counter App: Part I
• Adding State to Counter App: Part II
• Alternative setState Syntax
• Build It: Adding State to VisibilityToggle
• Indecision State: Part I
• Indecision State: Part II
• Summary: Props vs. State

Video Module 05 – Stateless Functional Components

• Section Intro: Stateless Functional Components
• The Stateless Functional Component
• Default Prop Values
• React Dev Tools
• Removing Individual Options
• Lifecycle Methods
• Saving and Loading Options Data
• Saving and Loading the Count

Video Module 06 – Webpack

• Section Intro: Webpack
• What Is Webpack?
• Avoid Global Modules
• Installing & Configuring Webpack
• ES6 import/export
• Default Exports
• Importing npm Modules
• Setting up Babel with Webpack
• One Component per File
• Source Maps with Webpack
• Webpack Dev Server
• ES6 class properties

Video Module 07 – Using a Third-Party Component

• Section Intro: Using a Third-Party Component
• Passing Children to Component
• Setting up React-Modal
• Bonus: Refactoring Other Stateless Functional Components

Video Module 08 – Styling React

• Section Intro: Styling React
• Setting up Webpack with SCSS
• Architecture and Header Styles
• Reset That $#!*
• Theming with Variables
• Big Button & Options List
• Styling the Options List
• Styling Option Item
• Styling React-Modal
• Mobile Considerations
• Bonus: Favicon

Video Module 09 – React-Router

• Section Intro: React Router
• Server vs. Client Routing
• Setting Up Budget App
• React-Router 101
• Setting up a 404
• Linking Between Routes
• Organizing Our Routes
• Query Strings and URL Parameters
• Build It: Router for Portfolio Site

Video Module 10 – Redux

• Section Intro: Redux
• Why Do We Need Something Like Redux?
• Setting up Redux
• Dispatching Actions
• Subscribing and Dynamic Actions
• ES6 Object Destructuring
• ES6 Array Destructuring
• Refactoring and Organizing
• Reducers
• Working with Multiple Reducers
• ES6 Spread Operator in Reducers
• Spreading Objects
• Wrapping up Our Reducers
• Filtering Redux Data
• Sorting Redux Data

Video Module 11 – React with Redux

• Section Intro: Connecting React and Redux
• Organizing Redux
• The Higher Order Component
• Connecting Store and Component with React-Redux
• Rendering Individual Expenses
• Controlled Inputs for Filters
• Dropdown for Picking SortBy
• Creating Expense Add/Edit Form
• Setting up a Date Picker
• Wiring up Add Expense
• Wiring up Edit Expense
• Redux Dev Tools
• Filtering by Dates

Video Module 12 – Testing Your Application

• Section Intro: Testing React Components
• Setting up Jest
• Testing Expenses Action Generators
• Testing Filters Action Generators
• Testing Expenses Selector
• Testing Filters Reducer
• Testing Expenses Reducer
• Snapshot Testing
• Enzyme
• Snapshot Testing with Dynamic Components
• Mocking Libraries with Jest
• Testing User Interaction
• Test Spies
• Testing AddExpensePage
• Testing EditExpensePage
• Testing ExpenseListFilters
• Testing ExpenseListFilters: Part II

Video Module 13 – Deploying Your Apps

• Section Intro: Deploying Your Apps
• Installing Git
• What is Git?
• Integrating Git into Our Project
• Setting up SSH and Github
• Production Webpack
• Creating Separate CSS Files
• A Production Web Server with Express
• Deploying with Heroku
• Regular vs Development Dependencies
• New Feature Workflow
• Build It: Adding Total Selector
• Build It: Adding Summary Component

Video Module 14 – Firebase 101

• Section Intro: Firebase 101
• Getting Firebase
• Writing to the Database
• ES6 Promises
• Promises with Firebase
• Removing Data from Firebase
• Updating Data
• Fetching Data from Firebase
• Array Data in Firebase: Part I
• Array Data in Firebase: Part II

Video Module 15 – Firebase with Redux

• Section Intro: Firebase with Redux
• Asynchronous Redux Actions
• Testing Async Redux Actions: Part I
• Testing Async Redux Actions: Part II
• Creating a Separate Test Database
• Heroku Environment Variables
• Fetching Expenses: Part I
• Fetching Expenses: Part II
• Remove Expense
• Update Expense

Video Module 16 – Firebase Authentication

• Section Intro: Firebase Authentication
• Login Page and Google Authentication
• Logging Out
• Redirecting Login or Logout
• The Auth Reducer
• Private Only Routes
• Public Only Routes
• Private Firebase Data
• Data Validation and Deployment

Video Module 17 – Styling Expensify App

• Section Intro: Styling Expensify App
• Styling Login Page
• Styling Buttons
• Styling Summary Area
• Styling List Filters
• Styling Inputs
• Styling Expense Form
• Styling Expenses List: Part I
• Styling Expenses List: Part II
• Adding Loader
• Babel Polyfill
• Final Deployment

Video Module 18 – What Now?

• Section Into: What Now?
• Creating the Final Boilerplate
• Expensify App Enhancements
• Indecision App Enhancements
• New App Idea: Blog
• Until Next Time

Video Module 19 – [New!] Hooks, Context, Fragments, and More

• Section Intro
• Using Create React App
• The useState Hook
• useState vs. setState
• Complex State with useState
• The useEffect Hook
• useEffect Dependencies
• Cleaning up Effects
• The useReducer Hook
• The Context API & useContext Hook: Part I
• The Context API & useContext Hook: Part II
• Fragments
• Creating Custom Hooks