The Complete React Developer Course (with Hooks and Redux)

Video description

Learn how to build and launch React web applications using React, Redux, Webpack, React-Router, and more!

About This Video

  • Build and launch React web applications using React, Redux, Webpack, React-Router
  • Learn the latest React libraries and tools

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.

Table of contents

  1. Chapter 1 : Welcome
    1. Welcome Asking Good Questions
    2. "Why should I learn React?"
  2. Chapter 2 : Setting up Your Environment
    1. Section Intro: Setting up Your Environment
    2. Installing Visual Studio Code
    3. Installing Node.js Yarn
  3. Chapter 3 : Hello React
    1. Section Intro: Hello React
    2. Setting up a Web Server
    3. Hello React
    4. Setting up Babel
    5. Exploring JSX
    6. JSX Expressions
    7. Conditional Rendering in JSX
    8. ES6 Aside: const and let
    9. ES6 Aside: Arrow Functions
    10. ES6 Aside: Arrow Functions Part II
    11. Events and Attributes
    12. Manual Data Binding
    13. Forms and Inputs
    14. Arrays in JSX
    15. Picking an Option
    16. Build It: Visibility Toggle
  4. Chapter 4 : React Components
    1. Section Intro: React Components
    2. Thinking in React
    3. ES6 Classes: Part I
    4. ES6 Classes: Part II
    5. Creating a React Component
    6. Nesting Components
    7. Component Props
    8. Events Methods
    9. Method Binding
    10. What Is Component State?
    11. Adding State to Counter App: Part I
    12. Adding State to Counter App: Part II
    13. Alternative setState Syntax
    14. Build It: Adding State to VisibilityToggle
    15. Indecision State: Part I
    16. Indecision State: Part II
    17. Summary: Props vs. State
  5. Chapter 5 : Stateless Functional Components
    1. Section Intro: Stateless Functional Components
    2. The Stateless Functional Component
    3. Default Prop Values
    4. React Dev Tools
    5. Removing Individual Options
    6. Lifecycle Methods
    7. Saving and Loading Options Data
    8. Saving and Loading the Count
  6. Chapter 6 : Webpack
    1. Section Intro: Webpack
    2. What Is Webpack?
    3. Avoid Global Modules
    4. Installing Configuring Webpack
    5. ES6 import/export
    6. Default Exports
    7. Importing npm Modules
    8. Setting up Babel with Webpack
    9. One Component per File
    10. Source Maps with Webpack
    11. Webpack Dev Server
    12. ES6 class properties
  7. Chapter 7 : Using a Third-Party Component
    1. Section Intro: Using a Third-Party Component
    2. Passing Children to Component
    3. Setting up React-Modal
    4. Bonus: Refactoring Other Stateless Functional Components
  8. Chapter 8 : Styling React
    1. Section Intro: Styling React
    2. Setting up Webpack with SCSS
    3. Architecture and Header Styles
    4. Reset That $#!*
    5. Theming with Variables
    6. Big Button Options List
    7. Styling the Options List
    8. Styling Option Item
    9. Styling React-Modal
    10. Mobile Considerations
    11. Bonus: Favicon
  9. Chapter 9 : React-Router
    1. Section Intro: React Router
    2. Server vs. Client Routing
    3. Setting Up Budget App
    4. React-Router 101
    5. Setting up a 404
    6. Linking Between Routes
    7. Organizing Our Routes
    8. Query Strings and URL Parameters
    9. Build It: Router for Portfolio Site
  10. Chapter 10 : Redux
    1. Section Intro: Redux
    2. Why Do We Need Something Like Redux?
    3. Setting up Redux
    4. Dispatching Actions
    5. Subscribing and Dynamic Actions
    6. ES6 Object Destructuring
    7. ES6 Array Destructuring
    8. Refactoring and Organizing
    9. Reducers
    10. Working with Multiple Reducers
    11. ES6 Spread Operator in Reducers
    12. Spreading Objects
    13. Wrapping up Our Reducers
    14. Filtering Redux Data
    15. Sorting Redux Data
  11. Chapter 11 : React with Redux
    1. Section Intro: Connecting React and Redux
    2. Organizing Redux
    3. The Higher Order Component
    4. Connecting Store and Component with React-Redux
    5. Rendering Individual Expenses
    6. Controlled Inputs for Filters
    7. Dropdown for Picking SortBy
    8. Creating Expense Add/Edit Form
    9. Setting up a Date Picker
    10. Wiring up Add Expense
    11. Wiring up Edit Expense
    12. Redux Dev Tools
    13. Filtering by Dates
  12. Chapter 12 : Testing Your Application
    1. Section Intro: Testing React Components
    2. Setting up Jest
    3. Testing Expenses Action Generators
    4. Testing Filters Action Generators
    5. Testing Expenses Selector
    6. Testing Filters Reducer
    7. Testing Expenses Reducer
    8. Snapshot Testing
    9. Enzyme
    10. Snapshot Testing with Dynamic Components
    11. Mocking Libraries with Jest
    12. Testing User Interaction
    13. Test Spies
    14. Testing AddExpensePage
    15. Testing EditExpensePage
    16. Testing ExpenseListFilters
    17. Testing ExpenseListFilters: Part II
  13. Chapter 13 : Deploying Your Apps
    1. Section Intro: Deploying Your Apps
    2. Installing Git
    3. What is Git?
    4. Integrating Git into Our Project
    5. Setting up SSH and Github
    6. Production Webpack
    7. Creating Separate CSS Files
    8. A Production Web Server with Express
    9. Deploying with Heroku
    10. Regular vs Development Dependencies
    11. New Feature Workflow
    12. Build It: Adding Total Selector
    13. Build It: Adding Summary Component
  14. Chapter 14 : Firebase 101
    1. Section Intro: Firebase 101
    2. Getting Firebase
    3. Writing to the Database
    4. ES6 Promises
    5. Promises with Firebase
    6. Removing Data from Firebase
    7. Updating Data
    8. Fetching Data from Firebase
    9. Array Data in Firebase: Part I
    10. Array Data in Firebase: Part II
  15. Chapter 15 : Firebase with Redux
    1. Section Intro: Firebase with Redux
    2. Asynchronous Redux Actions
    3. Testing Async Redux Actions: Part I
    4. Testing Async Redux Actions: Part II
    5. Creating a Separate Test Database
    6. Heroku Environment Variables
    7. Fetching Expenses: Part I
    8. Fetching Expenses: Part II
    9. Remove Expense
    10. Update Expense
  16. Chapter 16 : Firebase Authentication
    1. Section Intro: Firebase Authentication
    2. Login Page and Google Authentication
    3. Logging Out
    4. Redirecting Login or Logout
    5. The Auth Reducer
    6. Private Only Routes
    7. Public Only Routes
    8. Private Firebase Data
    9. Data Validation and Deployment
  17. Chapter 17 : Styling Expensify App
    1. Section Intro: Styling Expensify App
    2. Styling Login Page
    3. Styling Buttons
    4. Styling Summary Area
    5. Styling List Filters
    6. Styling Inputs
    7. Styling Expense Form
    8. Styling Expenses List: Part I
    9. Styling Expenses List: Part II
    10. Adding Loader
    11. Babel Polyfill
    12. Final Deployment
  18. Chapter 18 : What Now?
    1. Section Into: What Now?
    2. Creating the Final Boilerplate
    3. Expensify App Enhancements
    4. Indecision App Enhancements
    5. New App Idea: Blog
    6. Until Next Time
  19. Chapter 19 : [New!] Hooks, Context, Fragments, and More
    1. Section Intro
    2. Using Create React App
    3. The useState Hook
    4. useState vs. setState
    5. Complex State with useState
    6. The useEffect Hook
    7. useEffect Dependencies
    8. Cleaning up Effects
    9. The useReducer Hook
    10. The Context API useContext Hook: Part I
    11. The Context API useContext Hook: Part II
    12. Fragments
    13. Creating Custom Hooks

Product information

  • Title: The Complete React Developer Course (with Hooks and Redux)
  • Author(s): Andrew Mead
  • Release date: October 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781839212123