Certified ReactJS Developer

Welcome

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

Setting up Your Environment

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

What Now?

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

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