Learn how to build and launch React web applications using React, Redux, Webpack, React-Router, and more!
About This Video
In Detail
The Complete React Developer Course (with Hooks and Redux) starts with the fundamentals and covers everything you'll need to build, and launch React web apps.
You'll …
Learn how to build and launch React web applications using React, Redux, Webpack, React-Router, and more!
About This Video
In Detail
The Complete React Developer Course (with Hooks and Redux) starts with the fundamentals and covers everything you'll need to build, and launch React web apps.
You'll see what it takes to build and launch a React app, from the first line of code to the final production deployment.
This course was designed with one goal: to turn you into a professional React developer capable of developing, testing, and deploying real-world production applications.
You'll learn React by doing, not watching.
From the first videos, you'll build each project and resolve programming challenges designed to test and reinforce what you've learned.
Throughout the course you'll build two React web apps:
The first app, a decision-making app called Indecision, is our starter application. You'll learn React fundamentals while learning exactly what it takes to get a React app up-and-running.
The second app, an expense manager called Budget, has all the features you'd expect from a real application. You'll set up authentication, user accounts, routing, testing, form validation, database storage, and more.
Who this book is for
This course is designed for anyone looking to launch their own React applications, switch careers, or freelance as a React developer.
Chapter 1 : Welcome
Welcome Asking Good Questions
“Why should I learn React?”
Chapter 2 : Setting up Your Environment
Section Intro: Setting up Your Environment
Installing Visual Studio Code
Installing Node.js Yarn
Chapter 3 : 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
Chapter 4 : 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
Chapter 5 : 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
Chapter 6 : 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
Chapter 7 : 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
Chapter 8 : 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
Chapter 9 : 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 18 : What Now?
Section Into: What Now?
Creating the Final Boilerplate
Expensify App Enhancements
Indecision App Enhancements
New App Idea: Blog
Until Next Time
Chapter 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