minor changes

juliarnasution · Oct 18, 2020 · b4e2374 · b4e2374
1 parent 29798cb
commit b4e2374
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 34 deletions.
diff --git a/07_Day_Class_Components/07_class_components.md b/07_Day_Class_Components/07_class_components.md
@@ -826,9 +826,11 @@ In next section, we will cover state which is the heart of React. State allows R
 2. What is inheritance and how do you make a child from a parent class?
 3. What is class based React component ?
 4. What is the difference between functional React component and class based React component ?
-5. What is the use cases of class based component ?
-6. What is React life cycle ? (not covered yet) ?
-7. What is state in React ?
+5. When do we need to use class based components instead of functional components
+6. What is the use cases of class based component ?
+7. Which type of component do use most frequently ? functional or class-based component
+8. What is React life cycle ? (not covered yet) ?
+9. What is state in React ? (not covered yet)
 
 ## Exercises: Level 2
 

diff --git a/08_Day_States/08_states.md b/08_Day_States/08_states.md
@@ -500,7 +500,7 @@ I believe that now you have a very good understanding of state. After this, we w
 
 ![Change Background](../images/08_day_changing_background_exercise.gif)
 
-2.  After long time of lock down you may think of travelling and you do not know where to go. Then make use of this random country selector to select your holiday destination.
+2.  After long time of lock down, you may think of travelling and you do not know where to go. You may be interested to develop a random country selector that selects your holiday destination.
 
 ![Change Background](../images/08_day_select_country_exercise.gif)
 

diff --git a/09_Day_Conditional_Rendering/09_conditional_rendering.md b/09_Day_Conditional_Rendering/09_conditional_rendering.md
@@ -764,16 +764,16 @@ ReactDOM.render(<App />, rootElement)
 
 1. What is conditional rendering?
 2. How do you implement conditional rendering?
-3. Which method of conditional rendering do you prefer?
+3. Which method of conditional rendering do you prefer to use?
 
 ### Exercises: Level 2
 
-1. Make a single page application which changes the body of the background based on the time of the day(Autumn, Winter, Spring, Summer)
+1. Make a single page application which changes the body of the background based on the season of the year(Autumn, Winter, Spring, Summer)
 2. Make a single page application which change the body of the background based on the time of the day(Morning, Noon, Evening, Night)
 
 ### Exercises: Level 3
 
-Coming
+1. Fetching data takes some amount of time. A user has to wait until the data get loaded. Implement a loading functionality of a data is not fetched yet. You can simulate the delay using setTimeout.
 
 🎉 CONGRATULATIONS ! 🎉
 

diff --git a/10_React_Project_Folder_Structure/10_react_project_folder_structure.md b/10_React_Project_Folder_Structure/10_react_project_folder_structure.md
@@ -604,8 +604,8 @@ Well done. Time to do some exercises for your brain and muscles.
 ## Exercises:Level 1
 
 1. What is the importance of React Folder Structure and File Naming
-2. How do we export file
-3. How do we import file
+2. How do you export file
+3. How do you  import file
 4. Make a component of module and export it as named or default export
 5. Make a component or module and import it
 6. Change all the components you have to different folder structure

diff --git a/12_Day_Forms/12_forms.md b/12_Day_Forms/12_forms.md
@@ -930,16 +930,15 @@ ReactDOM.render(<App />, rootElement)
 8. What event type do you use to listen changes on an input field?
 9. What is the value of a checked checkbox?
 10. When do you use onChange, onBlur, onSubmit?
-11. What is the purpose of write e.preventDefault() inside the submit handler method?
+11. What is the purpose of writing  e.preventDefault() inside the submit handler method?
 12. How do you bind data in React? The first input field example is data binding in React.
 13. What is validation?
-14. What is the event type we use to listen when an input changes?
-15. What are event types we use to validate an input?
+14. What is the event type you use to listen when an input changes?
+15. What are event types do you use to validate an input?
 
 ## Exercises: Level 2
 
-1. Validate the form given above (a gif image or a video will be provided later). First try to validate without using any library then try it with validator.js.
-2. Coming ..
+1. Validate the form given above (a gif image or a video will be provided later). First try to validate without using any library then try it with [validator.js](https://www.npmjs.com/package/validator).
 
 ## Exercises: Level 3
 

diff --git a/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md b/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md
@@ -23,8 +23,6 @@
   - [Getting multiple input data from form](#getting-multiple-input-data-from-form)
 - [Exercises](#exercises)
   - [Exercises: Level 1](#exercises-level-1)
-  - [Exercises: Level 2](#exercises-level-2)
-  - [Exercises: Level 3](#exercises-level-3)
 
 # Uncotrolled Components
 
@@ -174,14 +172,6 @@ Most of the time we use controlled input instead of uncontrolled input. In case
 9. When do you use controlled input?
 10. Do you use a controlled or uncontrolled input to validate form input fields?
 
-## Exercises: Level 2
-
-coming
-
-## Exercises: Level 3
-
-Coming
-
 🎉 CONGRATULATIONS ! 🎉
 
 [<< Day 12](../12_Day_Forms/12_forms.md) | [Day 14 >>]()
diff --git a/14_Day_Component_Life_Cycles/14_component_life_cycles.md b/14_Day_Component_Life_Cycles/14_component_life_cycles.md
@@ -537,6 +537,7 @@ class App extends Component {
 const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
+
 Let's use the above two life cycle methods together.
 
 ```js
@@ -592,7 +593,6 @@ class App extends Component {
 
 const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
-
 ```
 
 ## Unmounting
@@ -610,13 +610,19 @@ The componentWillUnmount method is the only built-in method that gets called whe
 4. What does mounting means?
 5. What does updating means
 6. What does unmounting means?
-7. What is the most common built-in mounting life cycle method
-8.
+7. What is the most common built-in mounting life cycle method?
+8. What are the mounting life cycle methods?
+9. What are the updating life cycle methods?
+10. What is the unmounting life cycle method?
 
 ## Exercises: Level 2
 
+Coming
+
 ## Exercises: Level 3
 
+Coming
+
 🎉 CONGRATULATIONS ! 🎉
 
 [<< Day 13](../13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md) | [Day 15 >>](../15_Third_Party_Packages/15_third_party_packages.md)
diff --git a/15_Third_Party_Packages/15_third_party_packages.md b/15_Third_Party_Packages/15_third_party_packages.md
@@ -419,20 +419,33 @@ The [reactstrap](https://reactstrap.github.io/) package allows to use a componen
 
 According to the official lodash documentation, 'A modern JavaScript utility library delivering modularity, performance & extras.'
 
+Try to also learn how to use the package _classnames_ and _validator_.
+
 # Exercises
 
 ## Exercises: Level 1
 
-coming
+1. What is a package?
+2. What is a third party package ?
+3. Do you have to use third party packages?
+4. How do you know the popularity and stability of a third party package?
+5. How many JavaScript packages are there on the npm registry?
+6. How do you install a third party package?
+7. What packages do you use most frequently?
+8. What package do you use to fetch data?
+9. What is the purpose of classnames package?
+10. What is the pupose validator package?
 
 ## Exercises: Level 2
 
-coming
+1. Learn how to use Sass
+2. Learn how to use axios
+3. Learn how to use moment and react-icons
+4. Use the validator package to validate the form you had in day 12
+5. Use classnames to change a class based on some logic.
 
 ## Exercises: Level 3
 
-coming
-
 🎉 CONGRATULATIONS ! 🎉
 
 [<< Day 14](../14_Day_Component_Life_Cycles/14_component_life_cycles.md) | [Day 16 >>]()
diff --git a/17_React_Router/17_react_router.md b/17_React_Router/17_react_router.md
@@ -1719,11 +1719,13 @@ ReactDOM.render(<App />, rootElement)
 
 ## Exercises: Level 1
 
-Now,you know about React router. Implement your portfolio with react router
+1. What package do you use to implement routing in react?
+2. What is the default export in react-router-dom?
+3. What is the use of the following Components(Route, NavLink, Switch, Redirect, Prompt)
 
 ## Exercises: Level 2
 
-coming
+Now, you know about React router. Build your portfolio with React and implement React router for navigation.
 
 ## Exercises: Level 3
 

diff --git a/18_projects/18_projects.md b/18_projects/18_projects.md
@@ -26,7 +26,7 @@
 
 # Projects
 
-Congratulations for making it to this far. Now, you have a solid understanding of React. I believe we have cover most of the feature of React and your are ready to work on projects. What we have cover so far is the old version of React. Starting from Day 20 we will learn React Hooks. In the next three days you will work on only projects.
+Congratulations for making it to this far. Now, you have a solid understanding of React. I believe we have cover most of the feature of React and your are ready to work on projects. What we have cover so far is the old version of React. Starting from Day 20 we will learn React Hooks. In the next three days you will work on projects only.
 
 # Exercises