The Complete React Developer Course (w/ Hooks and Redux)

Udemy

Focus on developing and deploying React web applications with React, Redux, Webpack, React-Router, and other development tools.

Online

₹ 3999

particular

details

                                    Medium of instructions
                                    English

                                    Mode of learning
                                    Self study

                                    Mode of Delivery
                                    Video and Text Based

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 Budget App

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

What Now?

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

[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

Popular Courses

Popular Platforms

Popular Searches

The Complete React Developer Course (w/ Hooks and Redux)

Online

₹ 3999

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

Fees information

certificate availability

certificate providing authority

Who it is for

What you will learn

The syllabus