Learn React JS

[ImranBinShoukat]

This task is to learn React JS. You can use the following resources for this:

• Books: https://drive.google.com/drive/u/1/folders/0ByXJY8WVZm-NZzRpQUI4d2NxX00
• Udemy Course: https://www.udemy.com/course/react-redux/learn/lecture/12531076?start=0#overview

You can get the udemy credentials from me or @sojharo

Udemy course is a must to watch. You need to comment your progress on a daily basis.

You can use other resources as well but comment the links here if you are using some other resource.

[ZaraRaja]

Alright Sir, Please share how much time we have to spare for it and how much content do we have to cover on daily basis. Please provide Udemy credentials.

[sineha]

Following this tutorial for now: https://www.youtube.com/watch?v=DLX62G4lc44

[ZaraRaja]

I am starting learning react from today from the link provided above.

[ZaraRaja]

Today I have completed 3 videos of section 1 because I performed testing of chatbot with the team.

[SaabaPervez]

I have completed 7 topics (30 minutes) from the above-given youtube tutorial link.

[sineha]

Completed section 1 of the Udemy course.

[ZaraRaja]

Today I have completed Video 4,5,6,7,8,9 (32 Minutes) of Section 1as I was performing testing and opening issues on Github side by side.

[SaabaPervez]

Received the udemy credentials today therefore switched from youtube to udemy and I have completed section 1. Now, moving toward the next task.

[sineha]

Completed Section 2 of the Udemy course.

[SaabaPervez]

Completed section 2 and 4 videos of section 3.

[sineha]

Completed 10 videos of section 3

[ZaraRaja]

Today I have completed Video 10, 11, 12 of the Section 1.

[sineha]

Completed till section 4 today.

[ZaraRaja]

Today I have completed Section 1 & Section 2 of the Provided Course.

[ZaraRaja]

Today I have Started Practicing Section 3 of the Course. The Videos that I have covered today are:

Video 26. Three Tenets of Components

Video 27. Application Overview

Video 28. Semantic UI CDN Link

Video 29. Getting Some Free Styling

Video 30. Naive Component Approach

Video 31. Important Note about Faker Images

Video 32. Specifying Images in JSX

Video 33. Duplicating a Single Component

Video 34. Extracting JSX to New Components

Video 35. Component Nesting

[ZaraRaja]

Continuing Section 3 / Section 37 of the provided Course, I have Covered 10 more Videos of Section 3.

Video 36. React's Props System

Video 37. Passing and Receiving Props

Video 38. Passing Multiple Props

Video 39. Passing Props - Solutions

Video 40. Component Reuse

Video 41. Implementing an Approval Card

Video 42. Showing Custom Children

Video 43. Component Reuse

Video 44. Exercise - Props

Video 45. Props Exercise Solution

[ZaraRaja]

Today I have completed Section 3 & Started Section 4. I have completed 5 Videos.

Video 46. Exercise - Children

Video 47. Children Exercise Solution

Video 48. Class-Based Components

Video 49. Application Overview

Video 50. Scaffolding the App

[ZaraRaja]

Today I have completed Section 4 out of 37 Sections of the provided Course.

Video 51. Getting a Users Physical Location

Video 52. Resetting Geolocation Preferences

Video 53. Handling Async Operations with Functional Components

Video 54. Refactoring from Functional to Class

[ZaraRaja]

Today I have Started Section 5 of this course. The Videos that I covered under this sections are mentioned below:

Section 5: State in React Components

Video 55. The Rules of State

Video 56. Important Note About super(props) Deprecation

Video 57. Initializing State Through Constructors

Video 58. Updating State Properties

[sineha]

I have completed till Section 11 of the udemy course

[ZaraRaja]

Today I have completed Section 5 of this Course. I have covered all the videos under this section

Video 55. The Rules of State

Video 56. Important Note About super(props)

Video 57. Initializing State Through Constructors

Video 58. Updating State Properties

Video 55. The Rules of State

Video 56. Important Note About super(props) Deprecation

Video 57. Initializing State Through Constructors

Video 58. Updating State Properties

Video 59. App Lifecycle Walkthrough

Video 60. Handling Errors Gracefully

Video 61. Conditionally Rendering Content

[ZaraRaja]

Today I have started Section 6 of this course. The Videos I have covered & Practiced under this section are mentioned below:

Video 62. Introducing Lifecycle Methods

Video 63. Why Lifecycle Methods?

Video 64. Refactoring Data Loading to Lifecycle Methods

Video 65. Alternate State Initialization

Video 66. Passing State as Props

Video 67. Determining Season

[ZaraRaja]

Continuing Section 6, I have covered these videos under this section. I have learned & practiced mentioned below videos

Video 68. Ternary Expressions in JSX

Video 69. Icons Not Loading and CORS errors

Video 70. Showing Icons

Video 71. Extracting Options to Config Objects

Video72. Adding Some Styling

Video 73. Showing a Loading Spinner

[ZaraRaja]

Today I have completed Section 6 and have started Section 7 of the provided course. The Videos that I learned & Practiced today are mentioned below

Video 74. Specifying Default Props

Video 75. Avoiding Conditionals in Render

Video 76. Breather and Review

Coding Exercise 4: Class-Based Components

Video 77. Exercise Solution - Class-Based Components

Coding Exercise 5: Updating Components with State

Video 78. Updating Components with State

Video 79. App Overview

Video 80. Component Design

[ZaraRaja]

Today I have completed Section 7 of the course. The Videos that I covered today are mentioned below:

Video 81. Adding Some Project Structure

Video 82. Showing Forms to the User

Video 83. Adding a Touch of Style

Video 84. Creating Event Handlers

Video 85. Alternate Event Handler Syntax

Video 86. Uncontrolled vs Controlled Elements

Video 87. More on Controlled Elements

Video 88. Exercise Overview - Receiving Values

Coding Exercise 6: Receiving Values From Controlled Elements

Video 89. Exercise Solution

Video 90. Handling Form Submittal

Video 91. Understanding 'this' In Javascript

Video 92. Solving Context Issues

Video 93. Communicating Child to Parent

Video 94. Invoking Callbacks in Children

[sineha]

I have completed till video 172 - section 12 of the Udemy course

[ZaraRaja]

Today I have started Section 8 of the Course. The content covered today:

Section 8: Making API Requests with React

Video 95. Fetching Data

Video 96. Axios vs Fetch

Video 97. Viewing Request Results

Video 98. Handling Requests with Async Await

[SaabaPervez]

I have completed this training till 133 videos out of 567.

[ZaraRaja]

Unfortunately, My operating system got crashed today. I couldn't work on this task further (and even lost my previous data till then I practiced). Trying to recover it. I have informed Sir @ImranBinShoukat regarding the issue. He suggested me to reinstall Ubuntu because my machine doesn't let me recover it in any way. So I am now reinstalling it. Done with the USB bootable process, now I am working on the installation process on my machine. Hope it will get recovered today

Sir @jekram.

[sineha]

I have completed till video 180 of the Udemy course

[ZaraRaja]

Today I reinstalled all the development environment for ReactJS. I have completed Section 8 and 9 and started Section 10. The Videos that I covered & practiced today are:

Video 99. Setting State After Async Requests

Video 100. Binding Callbacks

Video 101. Creating Custom Clients

Section 9: Building Lists of Records

Video 102. Rendering Lists

Video 103. Review of Map Statements

Video 104. Rendering Lists of Components

Video 105. The Purpose of Keys in Lists

Video 106. Implementing Keys in Lists

Video 107. Exercise Overview - List Building

Coding Exercise 7: Practicing List Building

Video 108. Exercise Solution

Section 10: Using Ref's for DOM Access

Video 109. Grid CSS (Couldn't Complete it)

[sineha]

I was unable to work on this today due to development environment setup.

[ZaraRaja]

Today I have completed Section 10 of the React JS Tutorial. The Videos that I covered & practiced today are:

Video 109. Grid CSS

Video 110. Issues with Grid CSS

Video 111. Creating an Image Card Component

Video 112. Accessing the DOM with Refs

Video 113. Accessing Image Height

Video 114. Callbacks on Image Load

Video 115. Dynamic Spans

Video 116. App Review

[sineha]

I have completed till video 188 today.

[ZaraRaja]

Today, I have started Section 11 of the provided tutorial. The content covered today under this section is listed below:

Section 11: Let's Test Your React Mastery!

Video 117. App Overview

Video 118. Component Design

Video 119. Scaffolding the App

Video 120. Reminder on Event Handlers

Video 121. Handling Form Submittal

Video 122. Accessing the Youtube API

Video 123. Axios Version Bug & 400 "Required Parameter: part" Error

Video 124. Searching for Videos

Video 125. Adding a Video Type

Video 126. Putting it All Together

Video 127. Updating State with Fetched Data

Video 128. Passing State as Props

Video 129. Rendering a List of Videos

Video 130. Rendering Video Thumbnails

Video 131. Styling a List

[SaabaPervez]

I have completed my training till 143 videos

[ZaraRaja]

Today I have completed Section 11 & Started Section 12. The content covered under Section 12 is:

Video 132. Communicating from Child to Parent

Video 133. Deeply Nested Callbacks

Video 134. Conditional Rendering

Video 135. Styling the VideoDetail

Video 136. Displaying a Video Player

Video 137. Fixing a Few Warnings

Video 138. Defaulting Video Selection

Section 12: Understanding Hooks in React 4hr 17min

Video 139. React Hooks

Video 140. Important Note

Video 141. App Architecture

Video 142. Communicating the Items Prop

Video 143. Building and Styling the

[SaabaPervez]

As I was part of testing team super number V2 therefore not able to work on this task.

[SaabaPervez]

completed till 150 videos.

[sineha]

I have completed till 205 videos

[ZaraRaja]

Today I have completed till Video # 153 of Section 12. The content covered under this section is mentioned below:

Video 144. Helper Functions in Function Components

Video 145. Introducing useState

Video 146. Understanding useState

Video 147. Setter Functions

Video 148. Expanding the Accordion

Video 149. Exercise Overview

Coding Exercise 8: UseState Exercise

Video 150. Exercise Solution

Video 151. Creating Additional Widgets

Video 152. The Search Widget Architecture

Video 153. Scaffolding the Widget

[ZaraRaja]

Today I continued from Video 154 of Section 12. I completed till Video 170 under this section.

The Details of the content covered is mentioned below:

Video 154. Text Inputs with Hooks

Video 155. When do we Search?

Video 156. The useEffect Hook

Video 157. Testing Execution

Video 158. Async Code in useEffect

Video 159. Executing the Request from useEffect

Video 160. Default Search Terms

Video 161. List Building!

Video 162. XSS Attacks in React

Video 163. XSS Server Code

Video 164. Linking to a Wikipedia Page

Video 165. Only Search with a Term

Video 166. Throttling API Requests

Video 167. Reminder on setTimeout

Video 168. useEffect's Cleanup Function

Video 169. Implementing a Delayed Request

Video 170. Searching on Initial Render

[sineha]

I have completed till 211 videos

[SaabaPervez]

i have completed till 160 videos.

[ZaraRaja]

Today I have completed till Video 185 of Section 12. The content covered is listed below:

Video 170. Edge Case When Clearing Out Input Form

Video 171. Optional Video - Fixing a Warning

Video 172. Dropdown Architecture

Video 173. Scaffolding the Dropdown

Video 174. A Lot of JSX

Video 175. Selection State

Video 176. Filtering the Option List

Video 177. Hiding and Showing the Option List

Video 178. Err... Why is this Hard?

Video 179. Reminder on Event Bubbling

Video 180. Applying What We've Learned

Video 181. Binding an Event Handler

Video 182. Why Stay Open!?

Video 183. Which Element Was Clicked?

Video 184. Important Update for React v17

Video 185. Making use of useRef

[SaabaPervez]

I have completed till 168 videos.

[sineha]

I have completed till 213 videos.

[sineha]

I have completed till 216 videos.

[SaabaPervez]

i have completed 176 videos from section 11/36

[sineha]

I have completed till 219 videos from section 15/36