You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -37,34 +37,29 @@ You can **download code** in 2 ways :
37
37
## Chapter 1 - Introduction to React & Setup
38
38
39
39
40
+
-**Assignment 1** : If we delete `node_modules`. How to run our app again successfully ?
40
41
41
-
-**Assignment 1** : Create a Page with multiple React Apps. Both React Apps should be independent of each other.
42
42
43
-
-**Assignment 2** : If we delete `node_modules`. How to run our app again successfully ?
43
+
-**Assignment 2** : How to remove double `console.logs` from React ? [ it is not needed in real life to remove them, its just an assignment problem ]. [*Hint: Some special Component at top level is of App is causing it*]. We explore more about - why this is needed in later videos.
44
44
45
-
-**Assignment 3** : How to remove double `console.logs` from React ? [ it is not needed in real life to remove them, its just an assignment problem ]
45
+
### Special Assignments ==============
46
46
47
+
-**Assignment 3** : Create a Page with multiple React Apps. Both React Apps should be independent of each other.
47
48
48
-
### Related Videos :
49
-
1. De-structuring Assignment : [Long Video](https://youtu.be/sNhqFofQhFs) | [Object De-structure Short Video](https://youtube.com/shorts/H3MKXE69_c8) | [Array De-structure Short Video](https://youtube.com/shorts/ONGyMq49kZY)
-**Assignment 1** : Create a Parent Component called **Border** which can provide some CSS border to any component nested into it. [Hint : You will need to use `children` props here
63
-
< Border>
64
-
< Component >
65
-
< Border />
66
-
67
-
-**Assignment 2** : Create a simple React app for **RESUME Builder**. It will be static website. You have to make components like **Resume** as top level and under it - **Skills**, **Education**, **Experience** etc as components. All resume data will be under 1 big JavaScript object like which you can us in components via props. You can fix the number of items in **Skills**, **Education**, **Experience** or any section. Example you can say that only 3 experience items is allowed.
62
+
-**Assignment 1** : Create a simple React app for **RESUME Builder**. It will be static website. You have to make components like **Resume** as top level and under it - **Skills**, **Education**, **Experience** etc as components. All resume data will be under 1 big JavaScript object like which you can us in components via props. You can fix the number of items in **Skills**, **Education**, **Experience** or any section. Example you can say that only 3 experience items is allowed.
68
63
69
64
```
70
65
resume = {
@@ -80,7 +75,12 @@ You can **download code** in 2 ways :
80
75
81
76
Example Link : [ Resume HTML ](https://codepen.io/emzarts/pen/OXzmym)
82
77
78
+
### Special Assignments ==============
83
79
80
+
-**Assignment 2** : Create a Parent Component called **Border** which can provide some CSS border to any component nested into it. [Hint : You will need to use `children` props here
81
+
< Border>
82
+
< Component >
83
+
< Border />
84
84
85
85
86
86
### Related Videos :
@@ -138,63 +138,138 @@ You can **download code** in 2 ways :
138
138
- Input Textbox : **onFocus**, **onBlur** are 2 events which occur when you enter or exit an input text box by click of mouse etc. Use it to display some console.log, which print "focused on the textbox", "out of textbox".
139
139
- **onCopy, onCut, onPaste** are 3 events which you can use on any text value etc. try to use it on a paragraph and just alert the user that something is copied, cut or pasted.
140
140
141
-
-**Assignment 2** : Make a custom event called **onClose**. this event should close the current browser tab. you can apply it to a button on click or anywhere.
142
141
143
-
-**Assignment 3** : Using **event bubbling** concept print the name of Parents to Child of any clicked element. It should be order in "GrandParent >Parent > Child" this kind of order. Where "Child" represents the current clicked element.
144
142
145
-
-**Assignment 4** : Make a form using `` < Form> `` tag and put an textbox and button inside this form. try to click the button after entering into textbox. Does form reloads ? Can you try to stop is using `e.preventDefault`. Try it.
143
+
-**Assignment 2** : Make a form using `` < Form> `` tag and put an textbox and button inside this form. try to click the button after entering into textbox. Does form reloads ? Can you try to stop is using `e.preventDefault`. Try it.
146
144
147
-
-**Assignment 5** : use an Input Textbox : after you enter some text. try to press **ENTER** button and show the an alert or console.log. You can capture the **onKeyPress** event, button how you will you make it work only for "Enter" ? It should not work on pressing of other keys. [*Hint: Explore the synthetic event object*]
145
+
-**Assignment 3** : use an Input Textbox : after you enter some text. try to press **ENTER** button and show the an alert or console.log. You can capture the **onKeyPress** event, button how you will you make it work only for "Enter" ? It should not work on pressing of other keys. [*Hint: Explore the synthetic event object*]
148
146
149
147
150
-
-**Assignment 6** : This is continuation of previous assignment **RESUME Builder**.
151
-
1. Add a **print** button to print the current resume. You can use a DOM method ``window.print`` to print the PDF.
148
+
-**Assignment 4** : This is continuation of previous assignment **RESUME Builder**.
149
+
- Add a **print** button to print the current resume. You can use a DOM method ``window.print`` to print the PDF.
152
150
153
151
154
-
-**Assignment 7** : Can you try the challenge of passing the function in one Prop like `onPlay` and the message inside that function to be accessed from other prop `message`[ As shown in Chapter Video ]
152
+
-**Assignment 5** : Can you try the challenge of passing the function in one Prop like `onPlay` and the message inside that function to be accessed from other prop `message`[ As shown in Chapter Video ]
153
+
154
+
### Special Assignments ==============
155
+
156
+
-**Assignment 6** : Using **event bubbling** concept print the name of Parents to Child of any clicked element. It should be order in "**GrandParent >Parent > Child**" this kind of order. Where "Child" represents the current clicked element.
157
+
158
+
-**Assignment 7** : Make a custom event called **onClose**. this event should close the current browser tab. you can apply it to a button on click or anywhere.
159
+
160
+
### Related Videos :
161
+
162
+
1. HTML DOM Elements and manipulation [Video](https://youtu.be/kwfbaHNZ_aU)
163
+
2. HTML DOM Events and manipulation : [Video](https://youtu.be/5kpe_tg_Cis)
155
164
156
165
157
-
### Related Videos :
158
166
159
167
160
168
## Chapter 5 - State, useState Hooks
161
169
170
+
**Assignment 1** : Make a digital **CLOCK** Component using useEffect Hook. We need to only update the time Upto seconds in it. HH:MM:SS format can be used. Can you make it send a Console.log at end of every minute ?
171
+
172
+
**Assignment 2** : Implement a simple **TIMER** that displays the elapsed time since the start button was pressed, and it can be stopped and reset. Like a stopwatch.
162
173
163
174
164
175
165
176
166
177
## Chapter 6 - Form , Synthetic Event Object & Lifting State up
167
178
168
-
**Assignment 1** : Try this challenge : https://beta.reactjs.org/learn/state-a-components-memory#challenges
179
+
180
+
**Assignment 1** : Create a Dropdown (< Select >) menu which is formed by a `nations` array. You can push to this array new items using a 2 **input textbox** (for country name and code) and **button**.
181
+
On selection of the any option from dropdown, its value should be displayed on console.log
182
+
```
183
+
const nations = [
184
+
{ name: 'India', value: 'IN' },
185
+
{ name: 'Pak', value: 'PK' },
186
+
{ name: 'Bangladesh', value: 'BG' },
187
+
]
188
+
```
169
189
170
190
171
191
-**Assignment 2** : **FILTERED LIST** : Make a **List** of something using an Array (a list can of cricket player /countries/ movie name etc). Now make this list it searchable, you have to put a **input textbox** at top of list. When you type in **textbox** it should only show you items matching from text typed. For example -
172
192
If you type only "in" it should show things like "India" / "China" as both have `in` in it.
173
193
-**Assignment 2.1** : **FILTERED LIST** : Make above **List** as separate components for List, Input form and pass the states from each other using concepts learnt till now.
174
194
175
-
-**Assignment 3** : **KEYBOARD BASED LIST** : Make a simple **List** from an input textbox.
176
-
177
-
- There should be no buttons, we will use only keyboard actions
178
-
- use **ENTER** to add a new item.
179
-
- when you click on an item, it should be selected (you can change style to show it is selected)
180
-
- If you press the **DELETE** key on the keyboard after selecting the list item it should delete that list item. If you have not selected any item the last item should be deleted.
181
-
- You can select list item and press **UP** arrow key to Move It Up. And you can press the **DOWN** key to move it down.
182
195
183
-
**Assignment 4** :
196
+
**Assignment 3** :
184
197
185
-
This is continuation of previous assignment **RESUME Builder**. Now you have to make a separate component which has a **FORM**. This form will have many **input boxes**. Each one related to one section. For example you can have one input box or **experience** section. Another input box for **skill** section and like this. Every input box should have an **Add** button in front of it. Once you press this add button that information is stored in the state , which you can update at top of the App level. Now this state should update the **Resume** you have built.
198
+
This is continuation of previous assignment **RESUME Builder**. Now you have to make a separate component **ResumeEditor**which has a **FORM**. This form will have many **input boxes**. Each one related to one section. For example you can have one input box or **experience** section. Another input box for **skill** section and like this. Every input box should have an **Add** button in front of it. Once you press this add button that information is stored in the state , which you can update at top of the App level. Now this state should update the **Resume** Component and its child you have built.
186
199
- first component will be your **RESUME** document which is only for reading purpose.
187
200
- second component will be this **FORM**
188
201
- you have to manage the state in between
189
202
- only Add functionality is required in this assignment
190
203
- you can change input boxes according to your need depending on your format of Resume. You can have multiple textboxes also for same section. Like for date + experience item etc.
191
204
205
+
**Assignment 4** : Try this challenge : https://beta.reactjs.org/learn/state-a-components-memory#challenges
206
+
207
+
### Related Videos :
208
+
209
+
1. HTML Forms-1 [Video](https://youtu.be/DUJEpSkzrVA)
210
+
2. HTML Forms-2 : [Video](https://youtu.be/Nj6Omw6zOok)
211
+
212
+
213
+
214
+
## MINI PROJECT
215
+
216
+
217
+
# Project 1 - TODO App
218
+
219
+
Todo app can be used to maintain a list of your pending daily items. A Simple todo list must have these features
220
+
221
+
222
+
* You can add any new item to TODO list
223
+
* You can click on any item to mark it as done, if you have done that by mistake - you can click again to undo.
224
+
* You can delete any item (completed or pending)
225
+
* You get a total of completed items and overall items on the list.
226
+
* You can move list items "Up" or "Down" using buttons.
- use **ENTER** key on keyboard to add a new item.
237
+
- when you click on an item, it should be selected (you can change style to show it is selected)
238
+
- If you press the **DELETE** key on the keyboard after selecting the list item it should delete that list item. If you have not selected any item the last item should be deleted.
239
+
- You can select list item and press **UP** arrow key to Move It Up. And you can press the **DOWN** key to move it down.
240
+
241
+
242
+
**Other Features** :
243
+
244
+
***Pin element to Top of List** : On double click make element reach top of list. You can show a different color also to show that element is pinned.
245
+
***Show the date & time** at which list item was added.
246
+
***Order** by : Todo Item names, Date added, Completed.
247
+
***Due date feature** : Add a due date of task of any todo item. You will need to add another input box for this at top. Whenever you are in 24 hour limit of due date - Task outline will be shown in ORANGE color. e.g if a task is due on 23 May - from 22nd May it should show in ORANGE outline color. If a due date is passed task should show RED Outline.
248
+
* Use some component like `https://github.com/react-component/progress` to show a **progress bar** at top of list. This progress bar will show how much of total percent of tasks are completed.
249
+
***Delete item via swipe gesture** - like swipe to right on mobile phone. [*Hint: You have to find an event type for this*]
250
+
251
+
**Advanced Features** :
252
+
253
+
***Use localStorage** in browser using libraries like `https://github.com/localForage/localForage` to make your todo list permanent in browser. This will have your list stored in browser database and will not delete it on refresh or closing of browser.
**Assignment 1** : The method shown in this video was just to introduce **useEffect** hook. However that was not the correct use of useEffect hook. Can you change the code to remove useEffect and still have the editVideo functionality. [*Hint : use the concept that Component is rendered every time prop changes*]
271
+
272
+
**Assignment 2** :
198
273
199
274
This is continuation of previous assignment **RESUME Builder**.
200
275
- Add functionality to **delete** the items from resume.
@@ -208,18 +283,31 @@ If you type only "in" it should show things like "India" / "China" as both have
208
283
209
284
**Assignment 1** : Try this challenge : https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer#challenges
210
285
286
+
**Assignment 2** : Convert your **RESUME BUILDER** Application from `useState` to `useReducer` by converting states logic to a common reducer. Your reducer can have as many switch cases as you want. You can also divide them based on sections. `ADD_SKILL`, `ADD_EXPERIENCE` etc. to make logic even simpler for developer.
287
+
288
+
### Related Videos :
289
+
290
+
1. REDUX - Understand it in Simple way [Video](https://youtu.be/WdEQNzUMP_M)
**Assignment 2** : Add a Context to your **RESUME BUILDER** to change font-size, font-color and some other font-properties. Also add a form to changed these property at top of App.
218
300
301
+
**Assignment 3** : Add a Context to your **RESUME BUILDER** to change Dark Mode and Light Mode. You can also use a `React Switch` kind of library to make it more user friendly to switch.
219
302
220
303
221
304
## Chapter 10 - Context API with useReducer [Redux architecture]
222
305
306
+
### Special Assignments
307
+
308
+
**Assignment 1** : Make a **useCounter** Hook: To keep track of a number that can be incremented or decremented.
**Assignment 4** Use **JSON Placeholder API** (link given below).
345
+
- You have to create a button which can get some posts and show them in a List.
346
+
- You have to a **show comments** button on each list item. On click of show comments, Post's comments should be fetched below that list item. [ Comments are available for each post in API]
347
+
- When you click on a particular list item's show comments, it should expand and **show** comments, otherwise it should collapse and **hide** the comments.
348
+
- Try to optimize by :
349
+
350
+
- Only getting comments of required Post items (not all at a time)
351
+
- Storing somehow the old comments of closed list items. So you will not fetch them again, when your show comments again.
**Assignment 1** : Implement a component that displays a list of items. The component should memoize the list of items to prevent unnecessary re-rendering.
365
+
366
+
**Assignment 2**: How to use memoization in the **JSON Placeholder API** assignment in previous problem. Can you try to **optimize** it using **useMemo/useCallback** ?
367
+
368
+
247
369
## Chapter 14 - Advanced React - Part 1
248
370
249
-
## Chapter 14 - Advanced React - Part 2
371
+
372
+
**Assignment 1** :
373
+
Try to apply `useDeferredValue` and `useTransistion` hooks on API based components. Either make a new one or use any existing code you have from other assignments. You can use `Chrome Network throttling` from **Devtools** > **Performance** Tabs and use **Slow 3G** option to see the effects
374
+
375
+
376
+
377
+
## Chapter 15 - Advanced React - Part 2
378
+
379
+
**Assignment 1** :
380
+
Try to use `window.print` functionality as show in code without flushSync and see if really make a difference. Also, try the same on `alert` functionality, can it also work ?
0 commit comments