IIRF Online > Development > Web Development > React JS > The Complete React Developer Course (w/ Hooks and Redux)
The Complete React Developer Course (w/ Hooks and Redux) by Udemy
Learn how to build and launch React web applications using React, Redux, Webpack, React-Router, and more!
Course Highlights
- Build, test, and launch React apps
- Use cutting-edge ES6/ES7 JavaScript
- Setup authentication and user accounts
- Deploy your React apps live to the web
- Learn the latest React libraries and tools
- Master React, Redux, React-Router, and more
Skills you will learn!
Curriculum
2 Topics
Welcome & Asking Good Questions
"Why should I learn React?"
3 Topics
Section Intro: Setting up Your Environment
Installing Visual Studio Code
Installing Node.js & Yarn
16 Topics
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
17 Topics
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
8 Topics
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
12 Topics
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
4 Topics
Section Intro: Using a Third-Party Component
Passing Children to Component
Setting up React-Modal
Bonus: Refactoring Other Stateless Functional Components
11 Topics
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
9 Topics
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
15 Topics
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
13 Topics
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
17 Topics
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
13 Topics
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
10 Topics
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
10 Topics
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
9 Topics
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
12 Topics
Section Intro: Styling Budget 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
6 Topics
Section Into: What Now?
Creating the Final Boilerplate
Budget App Enhancements
Indecision App Enhancements
New App Idea: Blog
Until Next Time
13 Topics
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
The Complete React Developer Course (w/ Hooks and Redux)
Related React JS Courses
Thank You!
Your review has been submitted successfully.