From 52fa2446a94ee01e848569ee8ab967b443a4ef40 Mon Sep 17 00:00:00 2001 From: asabeneh Date: Tue, 13 Oct 2020 07:05:06 +0300 Subject: [PATCH] polishing --- 03_Day_Setting_Up/03_setting_up.md | 2 +- 04_Day_Components/04_components.md | 23 +++++++++++-------- 05_Day_Props/05_props.md | 19 ++++++++------- 06_Day_Map_List_Keys/06_map_list_keys.md | 2 +- .../07_class_components.md | 4 +++- 08_Day_States/08_states.md | 6 ++--- 12_Day_Forms/12_forms.md | 4 ++-- 7 files changed, 34 insertions(+), 26 deletions(-) diff --git a/03_Day_Setting_Up/03_setting_up.md b/03_Day_Setting_Up/03_setting_up.md index 2df9a17..249de63 100644 --- 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 index 9f32097..c9d0529 100644 --- a/04_Day_Components/04_components.md +++ b/04_Day_Components/04_components.md @@ -483,14 +483,15 @@ ReactDOM.render(, 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(, 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 index a663b05..7e5a61f 100644 --- 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(, 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 index d486515..956846d 100644 --- 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(, 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 index 4fa8c22..4b5398b 100644 --- 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 index 4d04a69..1e8330c 100644 --- a/08_Day_States/08_states.md +++ b/08_Day_States/08_states.md @@ -1,5 +1,5 @@
-

30 Days Of React: State

+

30 Days Of React: States

@@ -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 index 8c6bb00..ffa2280 100644 --- a/12_Day_Forms/12_forms.md +++ b/12_Day_Forms/12_forms.md @@ -14,7 +14,7 @@
-[<< 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)