polishing

mcu0054 · Oct 13, 2020 · 52fa244 · 52fa244
1 parent 41d102e
commit 52fa244
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 26 deletions.
diff --git a/03_Day_Setting_Up/03_setting_up.md b/03_Day_Setting_Up/03_setting_up.md
@@ -762,7 +762,7 @@ The boilerplate code can be found [here](../03/../03_Day_Setting_Up/30-days-of-r
 
 ## Exercises: Level 3
 
-2. Design the following user card.
+1. Design the following user card.
 
 ![User Card](../images/user_card_design_jsx.png)
 

diff --git a/04_Day_Components/04_components.md b/04_Day_Components/04_components.md
@@ -483,14 +483,15 @@ ReactDOM.render(<HexaColor />, rootElement)
 
 # Exercises: Components
 
-1. What is a React Component?
-2. How do you make a React functional component?
-3. What is the difference between a pure JavaScript function and a functional component?
-4. How small is a React component?
-5. Can we make a button or input field component?
-6. Make a reusable Button component.
-7. Make a reusable InputField component.
-8. Make a reusable alert box component with one div parent element and one p child element of the div(warning alert box, success alert box).
+1. What is the difference between a regular function and an arrow function? 
+2. What is a React Component?
+3. How do you make a React functional component?
+4. What is the difference between a pure JavaScript function and a functional component?
+5. How small is a React component?
+6. Can we make a button or input field component?
+7. Make a reusable Button component.
+8. Make a reusable InputField component.
+9. Make a reusable alert box component with one div parent element and one p child element of the div(warning alert box, success alert box).
 
 ## Exercises: Level 2
 
@@ -503,11 +504,13 @@ ReactDOM.render(<HexaColor />, rootElement)
 
 ## Exercises: Level 3
 
-2.Use functional component to design the following user card.
+1.  Use the given hexadecimal color generator in the example to create these random colors
 
 ![Hexadecimal colors](../images/hexadecimal_color_exercise.png)
 
-![User Card](../images/user_card_design_jsx.png) 4. Use the given hexadecimal color generator in the example to create these random colors
+2. Use functional component to design the following user card.
+
+   ![User Card](../images/user_card_design_jsx.png)
 
 🎉 CONGRATULATIONS ! 🎉
 

diff --git a/05_Day_Props/05_props.md b/05_Day_Props/05_props.md
@@ -35,6 +35,7 @@
 - [Exercises: Components and Props](#exercises-components-and-props)
   - [Exercises: Level 1](#exercises-level-1)
   - [Exercises: Level 2](#exercises-level-2)
+  - [Exercises: Level 3](#exercises-level-3)
 
 # Props
 
@@ -667,7 +668,7 @@ ReactDOM.render(<App />, rootElement)
 
 ## Destructuring props
 
-By now, I believe you are a JavaScript ninja and you know about destructing arrays and objects. Destructuring code to some extent makes easy to read. Let us destructure the props in Header component. Everything we passed as  props is stored in props object. Therefore, props is an object and we can destructure the properties. Let's destructure some of the props we wrote in object props example. We can destructure in many ways:
+By now, I believe you are a JavaScript ninja and you know about destructing arrays and objects. Destructuring code to some extent makes easy to read. Let us destructure the props in Header component. Everything we passed as props is stored in props object. Therefore, props is an object and we can destructure the properties. Let's destructure some of the props we wrote in object props example. We can destructure in many ways:
 
 1. Step by step destructuring
 
@@ -1070,7 +1071,7 @@ We will cover propTypes in detail in other sections.
 
 1. What is props in a React component ?
 2. How do you access props in a React component ?
-3. What data types can we pass as props to  components ?
+3. What data types can we pass as props to components ?
 4. What is a propTypes?
 5. What is a default propTypes?
 
@@ -1079,18 +1080,20 @@ We will cover propTypes in detail in other sections.
 1. Create a functional component and display the following images
    ![Front end](../images/frontend_technologies.png)
 
-2.Use functional component to design the following user card.
-
-![User Card](../images/user_card_design_jsx.png)
-
-3. Use functional component to create the following design
+2. Use functional component to create the following design
 
 ![News Letter](../images/news_letter_design.png)
 
-4.  Use the given hexadecimal color generator in the example to create these random colors
+## Exercises: Level 3
+
+1.  Use the given hexadecimal color generator in the example to create these random colors
 
 ![Hexadecimal colors](../images/hexadecimal_color_exercise.png)
 
+2. Use functional component to design the following user card.
+
+![User Card](../images/user_card_design_jsx.png)
+
 🎉 CONGRATULATIONS ! 🎉
 
 [<< Day 4](../04_Day_Component/04_components.md) | [Day 6 >>](../06_Day_Map_List_Keys/06_map_list_keys.md)
diff --git a/06_Day_Map_List_Keys/06_map_list_keys.md b/06_Day_Map_List_Keys/06_map_list_keys.md
@@ -279,7 +279,7 @@ ReactDOM.render(<App />, rootElement)
 
 ## Exercises: Level 3
 
-1.Make the following bar group using given [data](../06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/data/ten_most_highest_populations.js)
+1.Make the following bar group using the given [data](../06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/data/ten_most_highest_populations.js)
 
 ![Ten most highest populations](../images/day_6_ten_highest_populations_exercise.png)
 

diff --git a/07_Day_Class_Components/07_class_components.md b/07_Day_Class_Components/07_class_components.md
@@ -28,7 +28,7 @@
 
 # Class Components
 
-In the previous sections, we have covered JSX, functional component and props. In this section, we will cover class components or statefull component. Only class based components used to have state and life cycle methods. However, after React version 16.8.0 functional components can have state and life cycle using React Hooks. In 30 Days Of React challenge, we will cover React before 16.8.0 and after, that mean both old and newest version. There are lots of codes written in older version and at some point it may need migration. In addition, to understand React very well someone has to understand class based component too.
+In the previous sections, we have covered JSX, functional component and props. In this section, we will cover class components or stateful component. Only class based components used to have state and life cycle methods. However, after React version 16.8.0 functional components can have state and life cycle using React Hooks. In 30 Days Of React challenge, we will cover React before 16.8.0 and after, that mean both old and newest version. There are lots of codes written in older version and at some point it may need migration. In addition, to understand React very well someone has to understand class based component too.
 
 All the previous components are functional components. Let us make also class based component. Class based component is made using JavaScript class and it inherits from react Component. Let us learn how to make a class based component by converting all the functional components we made previously. It is not important to convert all but we are converting them for the sake of learning how to change functional components to class components.
 
@@ -836,6 +836,8 @@ Learn more about class based component by changing previous days exercises to cl
 
 ## Exercises: Level 3
 
+Coming ...
+
 🎉 CONGRATULATIONS ! 🎉
 
 [<< Day 6](../06_Day_Map_List_Keys/06_map_list_keys.md) | [Day 8 >>](../08_Day_States/08_states.md)
diff --git a/08_Day_States/08_states.md b/08_Day_States/08_states.md
@@ -1,5 +1,5 @@
 <div align="center">
-  <h1> 30 Days Of React: State</h1>
+  <h1> 30 Days Of React: States</h1>
   <a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
   <img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
   </a>
@@ -18,7 +18,7 @@
 
 ![30 Days of React banner](../images/30_days_of_react_banner_day_8.jpg)
 
-- [State](#state)
+- [States](#states)
   - [What is State?](#what-is-state)
   - [How to set a state](#how-to-set-a-state)
   - [Resetting a state using a JavaScript method](#resetting-a-state-using-a-javascript-method)
@@ -27,7 +27,7 @@
     - [Exercises: Level 2](#exercises-level-2)
     - [Exercises: Level 3](#exercises-level-3)
 
-# State
+# States
 
 ## What is State?
 

diff --git a/12_Day_Forms/12_forms.md b/12_Day_Forms/12_forms.md
@@ -14,7 +14,7 @@
 
 </div>
 
-[<< Day 11](../11_Day_Events/11_events.md) | [Day 13 >>]()
+[<< Day 11](../11_Day_Events/11_events.md) | [Day 13 >>](../13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md)
 
 ![30 Days of React banner](../images/30_days_of_react_banner_day_12.jpg)
 
@@ -912,4 +912,4 @@ Coming ..
 
 🎉 CONGRATULATIONS ! 🎉
 
-[<< Day 11](../11_Day_Events/11_events.md) | [Day 13 >>]()
+[<< Day 11](../11_Day_Events/11_events.md) | [Day 13 >>](../13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md)