msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

polishing

Browse Source
pull/64/head
asabeneh 4 years ago
parent 41d102e45d
commit 52fa2446a9
7 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File

2
03_Day_Setting_Up/03_setting_up.md
Unescape View File

@ -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)

23
04_Day_Components/04_components.md
Unescape View File

@ -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 ! 🎉

15
05_Day_Props/05_props.md
Unescape View File

@ -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
@ -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)

2
06_Day_Map_List_Keys/06_map_list_keys.md
Unescape View File

@ -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)

4
07_Day_Class_Components/07_class_components.md
Unescape View File

@ -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)

6
08_Day_States/08_states.md
Unescape View File

@ -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?

4
12_Day_Forms/12_forms.md
Unescape View File

@ -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)

Write Preview
Loading…
Cancel
Save