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
2.Use functional component to design the following user card.
3. Use functional component to create the following design
2. Use functional component to create the following design
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
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)
asabeneh
4 years ago