Learn and Understand React

Learn and Understand React

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 16.5 Hours | 1.91 GB

React & ES6 covered in course. In-depth explanations on foundational concepts of React and helps understand Redux better

First time you open this course, you might think to yourself, Oh!! no. Not another React.js course. There are already so many courses of React and Redux that it’s hard to count. Then why another course?

The motivation for this course is not to just to teach you how to use React, Redux and other libraries. There are already plenty of courses out there that are doing this job very well. My problem is that I feel that in most of the books and courses out there, concentration is given mostly on just how to use libraries and sometimes they explain things from a very high level view. Most fundamental problem that I have with existing courses is that they try to explain the solution before explaining the problem. Solutions have absolutely no meaning until you actually understand the problems they solve.

Other thing that I hate about most of the tutorials is that they start with developing simple apps which is a very good thing but they end up with same silly applications. At beginning, you feel pretty comfortable and starts to think that you have a grip on the subject but when you go out in real world and start solving real world problems that requires understanding and knowledge and thought, at that point you start to falter because of very little understanding and practice of real world problems.

This course will be based on project based approach, meaning we are going to learn and truly understand React and Redux while developing applications and covering each and every concepts gradually and incrementally in a 3 part series (in 3 different courses).

We are going to start with very simple applications at the start and then build fairly complex and medium size applications as we progress through the course.

Table of Contents

Course Introduction
1 Course Introduction
2 Topics covered in this course.html
3 Course Layout.html
4 How to take this course.html
5 Important Instructions
6 Very Important note.html

React Introduction and Environment Setup
7 Single Page Applications with React
8 Mac Setup – Atom Node.js.html
9 Windows Setup – Atom Node.js Git Bash.html

React Basics and Shows App
10 Thinking in Components
11 Project setup with create-react-app
12 react and react-dom
13 Render Target
14 JSX
15 JSX Continued
16 Functional Components
17 props
18 Class Components
19 Class Components continued
20 Shows App
21 Shows App with props
22 Shows App with props and state
23 Imperative vs Declarative Programming
24 Composition
25 React Element Component Component Instance
26 React Element Component Component Instance
27 React Basics Review

ES6 Class and Refactor Shows
28 Function Constructor
29 ES6 Class
30 ES5 Prototypal Inheritance
31 ES6 Class Inheritance
32 constructor super and static
33 Refactor Shows App
34 Refactor Shows App continued
35 ES6 Class Review

React concepts with Pet Game App
36 Initial Setup and Pet Game App Introduction
37 Iniline Styling
38 Nested Components
39 Adding react element img and button
40 Add Event Listener
41 Reusable Components with props
42 Bind Callbacks
43 state And setState
44 setState may be asynchronous
45 Using setState correctly
46 Access children state using Ref
47 Lifting State up
48 Why props are immutable in React and Ref vs Lifting State Up
49 Class Components vs Functional Components
50 Display game winner on UI
51 Conditional JSX
52 setState shallow merge
53 render method is a pure function
54 Lifecycle methods
55 Find right place for sending network request
56 API Setup and Axios
57 Network Request with axios
58 Single Responsibility Principle
59 Refactoring – Keeping state minimal
60 Refactoring – Remove duplicate code
61 React Concepts Review

React Internals with Todo App
62 Introduction
63 App Setup and Bootstrap
64 Uncontrolled input
65 Uncontrolled input continued
66 Add Todos using setState correctly
67 Rendering Todos List and Styling with Bootstrap
68 Separating out components TodoItemList and TodoItem
69 Delete Todos
70 Delete Todos continued
71 Render Todos count
72 Goal – Component Tree to DOM Tree
73 Initial Render Process
74 Initial Render Process continued
75 Render Tree or Virtual DOMold term
76 Why Keys
77 Refactor TodoItem Component to add priority
78 List and Keys
79 List Items and Keys continued
80 List Items and Keys Review
81 Using key correctly with List items
82 Focus input using ref
83 Controlled Component
84 Controlled Component continued
85 Add Controlled Checkbox Input
86 FilterTodos
87 FilterTodos continued
88 FilterTodos Final
89 props.children
90 Search Todos

ES6 Features and Refactor Apps to ES6
91 ES6 Introduction
92 Pet Game App and Todo App ES5 Source Code.html
93 forEach
94 map
95 map – Refactor Todo App
96 filter
97 filter – Refactor Todo App
98 find and findIndex
99 findIndex – Refactor Todo App
100 Block scoping – let and const
101 let and const – Refactor Todo App
102 Exercise – let and const – Refactor PetGame App.html
103 Destructuring
104 Destructuring – Refactor Todo App
105 Multiple levels of Destructuring
106 Multiple levels of Destructuring – Refactor Todo App
107 Exercise – Destructuring – Refactor PetGame App.html
108 ES6 Modules
109 ES6 Modules – Refactor Todo App
110 Exercise – ES6 Modules – Refactor PetGame App.html
111 Rest and Spread
112 Spread and Rest – Refactor Todo App
113 Exercise – Spread and Rest – Refactor PetGame App.html
114 Object Literal Shorthand and Concise Object Method
115 Object Literal Shorthand – Refactor Todo App
116 Exercise – Object Literal Shorthand – Refactor PetGame App.html
117 Arrow Function
118 Arrow Function continued
119 Arrow Functions – Refactor Todo App
120 Exercise – Arrow Functions – Refactor PetGame App.html
121 ES.next class features
122 Exercise – ES.next Arrow Function Class Feature – Refactor PetGame App.html

Next Steps
123 Next Steps.html