Readme.md

[Udemy] Complete React Developer In 2020 (W/ Redux, Hooks, GraphQL) [2019, ENG]

Project 2: Master Project

Original src:
https://github.com/ZhangMYihua?tab=repositories

Development

4. Master Project Setting Up E-commerce Project

6. E-commerce Homepage + SASS setup

$ cd client
$ npx create-react-app .

$ npm install --save node-sass

Also added ESLint Prettier etc.

10. Homepage and Directory Components

11. Styling Menu Items

5. Master Project React Router and Routing

1. Routing In React

2. Routing In Our Project

$ npm install --save react-router-dom

3. React Router Dom

4. withRouter()

6. Master Project Forms + Components

2. Shop Page

3. Collection Item

4. Header Component

6. Introducing Forms In React

7. Sign In Component

8. Form Input Component

9. Custom Button Component

7. Master Project Firebase + User Authentication

1. Section Overview

2. Firebase Introduction

3. Adding a Project to Firebase

firebase --> create new project

Project Overview --> Web

$ npm install --save firebase

5. Google Sign In Authentication

firebase.google.com --> Authentication --> Set up sign-in method --> Google --> Enable

firebase.google.com --> Authentication --> Set up sign-in method --> Email/Password --> Enable

7. Google Sign In Authentication 2

http://localhost:3000/signin

click --> Sign in with Google

9. Google Sign In Authentication 3

10. Firebase Firestore

firebase.google.com --> Database --> Create Database --> test mode

12. Storing User Data In Firebase

13. Storing User Data In Our App

14. Sign Up Component

15. Sign Up With Email and Password

16. Sign In With Email and Password

8. Master Project Redux 1

1. Section Overview

2. Redux Introduction

3. Redux Concepts

4. Redux In Our Application

5. Redux Actions and Reducers

6. Setting Up Redux 1

$ npm install --save redux react-redux redux-logger

7. Setting Up Redux 2

8. connect() and mapStateToProps

9. mapDispatchToProps

10. User Redirect and User Action Type

11. Cart Component

12. Card Dropdown Component

13. Implementing Redux In Cart

14. Add To Cart Styling

15. Cart Item Reducer

16. Adding Multiple Items To Cart

18. Cart Item Component

20. Selectors in Redux

22. Reselect Library

$ npm install --save reselect

23. User Selectors

24. Checkout Page

25. Checkout Page 2

26. Extensible Code

27. Dispatch Action Shorthand

28. Checkout Item Component

29. Remove Items From Cart

30. Remove Items At Checkout

9. Master Project Session Storage + Persistence

1. Local Storage and Session Storage

2. Redux Persist

$ npm install --save redux-persist

10. Master Project Redux 2

1. Directory State Into Redux

2. Collection State Into Redux

3. Collection Overview Component

11. Master Project Advanced Routing

1. Nested Routing in Shop Page

2. Improving Naming Of Component

3. Collection Routing and Selector

12. Master Project State Normalization

1. Data Normalization + Collection Page

3. Data Flow In Our App

4. Thinking About Data Flow

13. Master Project Stripe Payments Part 1

1. Introduction To Stripes

stripe.com

2. Stripe Integration

$ npm install --save react-stripe-checkout

Card for testing:

4242 4242 4242 4242 
Exp: 01/20
CVV: 123

4. Finishing Touches + Look Ahead

14. Master Project Deploying To Production (Skipped)

1. Deploying To Heroku

5. Optimizing Production Build

15. Master Project CSS in JS - styled-components

1. CSS in JS

2. styled-components

3. styled-components In Our App

$ npm install --save styled-components

4. Thinking About Tradeoffs

5. styled-components In Our App 2

6. styled-components In Our App 3

16. Master Project Advanced Redux + Firebase

1. Section Overview

3. Firebase Refresher

4. Firebase Refresher 2

5. Moving Our Shop Data To Firebase

6. Moving Our Shop Data To Firebase 2

7. Reviewing What We Have Done

8. Bringing Shop Data To Our App

9. Adding Shop Data To Redux

17. Master Project HOC Patterns

1. WithSpinner HOC

2. WithSpinner HOC 2

4. Optional How To Build HOCs

18. Master Project Asynchronous Redux

1. Observables + Observer Pattern

2. Promise Pattern

3. Redux Thunk

$ npm install --save redux-thunk

4. What Does Redux Thunk Do

5. Debugging Our Code

19. Master Project Container Pattern

1. Container Pattern

2. Refactoring Is A Tradeoff

20. Master Project Redux-Saga

1. Introduction to Sagas

2. Generator Functions

4. redux-saga

$ npm install --save redux-saga

5. Redux Thunk Into Saga

6. take(), takeEvery(), takeLatest()

7. Root Saga

8. Planning Ahead With Sagas

9. Google Sign In Into Sagas

10. Email Sign In Into Sagas

11. Reviewing Our Sagas

12. Recreating Persistence

13. Sign Out With Sagas

14. Clear Cart Saga

15. Solution Sign Up Saga

21. Master Project React Hooks

1. React Hooks Introduction (useState)

3. useEffect

4. Hook Rules

5. Converting Class Components With useState

6. useEffect In Our App

7. useEffect as ComponentWillUnmount()

9. Custom Hooks

10. Custom Hooks 2

11. useReducer

22. Master Project Stripe Payments Part 2 - Backend

2. Introduction To Backendr

4. Creating our Server Inside the Project

$ mkdir api
$ cd api
$ npm init -y
$ npm install -g nodemon

5. Building A Basic Server

6. What We Are Building

7. Backend Payment Route

8. Connecting Client To Server

$ cd ../client/
$ npm install --save axios

9. Deploying To Production

23. Master Project Context API

2. Introduction To Context API

3. Context Consumer + useContext Hook

4. Context Provider

5. Cart Context

6. Provider Context Pattern

7. Provider Context Pattern 2

8. Redux vs Context API

24. Master Project GraphQL + Apollo

---

Marley

jsdev.org

Any questions on eng: Telegram or Slack
Любые вопросы на русском: Telegram or Slack