English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 88 Lessons (14h 56m) | 6.32 GB
Learn React by applying test driven development ( incl. react router, redux, jest, testing-library/react )
React is one of the most popular library for the client application development.
In this course we will be learning react by creating a web application with it. Also we will apply test driven development (TDD) methodology from beginning to the end.
while building this application, we will learn
client-side routing. we will apply our custom implementation then we will use react-router library
internationalization
global state management by using react’s context api and then replacing it with redux
and we will see
- how test driven development works.
- how it’s affecting our code quality, reusability
- how it’s giving us the confidence about refactoring our implementation
- how to avoid implementation details while creating tests
This course is purely built on practice. Each code piece we write, will be for our actual application implementation.
In each section we will gradually build our application. We will not jump ahead and add functionality not needed for that moment. We will implement one requirement at a time. Each implementation will bring the next requirement to us.
And following this practice, will help you to get a solid foundation about overall web application requirements and how to implement one of them with react by following test driven development methodology.
After completing the course, you will be able to use React in your next project and you will experience the benefits of test driven development.
What you’ll learn
- Build an application with React
- Build an application with multiple language (i18n) support
- Build an application with client side routing, by using react router
- Implement global state management with Context API and Redux
- Practice Test Driven Development in a complete project from beginning to the end
- How to mock external dependencies in testing
- Feel how the test driven development is giving confidence when refactoring your application
Table of Contents
Introduction
1 Introduction
2 Methodology
3 Development Tools
4 Create Project
5 Project Source Code
6 Resources
Sign Up
7 First Component
8 Layout – Sign Up Form
9 Form Interactions
10 Api Request – Sign Up
11 Mocking & Mock Service Worker (MSW)
12 Proxy
13 Styling
14 Progress Indicator
15 Layout – Sign Up Success
16 Refactor – Test Lifecycle & Async Await
Validation
17 Displaying Validation Errors
18 Enable Button After Validation Error
19 Mock Service Worker – Override Handler
20 Component – Input
21 Styling Input
22 Displaying Errors for Remaining Inputs
23 Client-side Validation
24 Hiding Errors
Internationalization – i18n
25 Internationalization – i18n
26 Language Selection
27 Component – LanguageSelector
28 Validation Translation
29 Accept Language Header in Api Request
30 Refactor – Api Request Module
Routing
31 Client-side Routing
32 Layout – NavBar
33 Styling NavBar
34 React Router Version Warning
35 React Router
36 Component Lifecycle
37 Route for AccountActivationPage
38 Api Request – Account Activation
39 Dependency List of useEffect
40 Progress Indicator – Account Activation
41 Component – Alert & Spinner
42 AsyncAwait in useEffect
43 Higher Order Component – HoC
44 Hooks
User List and User Page
45 Component – UserList
46 Pagination in Test Module
47 Next & Previous Page
48 Link to UserPage
49 Component – UserListItem
50 Key in Loop
51 Translation
52 Progress Indicator – Load User List
53 Layout & Api Request for UserPage
54 Progress Indicator – Load User
55 Layout – User Not Found
Login
56 Layout – LoginPage
57 Form Interactions
58 Api Request – Login
59 Authentication Error
60 Translation
61 Routing After Successful Authentication
62 Component – ButtonWithProgress
Client State Management
63 Layout – NavBar After Login – Lifting State Up
64 Component – NavBar
65 Prop Drilling
66 Context
67 Refactor – Context & Test Setup
68 Redux
69 Use Redux in NavBar
70 Use Redux in LoginPage
71 Refactor – Redux
72 Storing State in LocalStorage
73 LocalStorage Abstraction
74 LocalStorage Encryption
75 Storing Credentials
Authenticated Requests
76 Layout – User Update
77 Api Request – User Update
78 Update Success
79 Cancel Update
80 Fix – Reload User After Navigation
81 Authentication Aware UserList
82 Logout
83 Layout – User Delete Button
84 Component – Modal
85 User Delete Cancel
86 User Delete Confirm
87 Global State After Deleting User
88 Redux – Action Creator
Resolve the captcha to access the links!