diff --git a/.gitignore b/.gitignore index c99fe19..e67f544 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ draft.md react-for-everyone.md -component.md \ No newline at end of file +component.md +05_Day_Props \ No newline at end of file diff --git a/04_Day_Component/04_components.md b/04_Day_Component/04_components.md index 4c138a1..f533a89 100644 --- a/04_Day_Component/04_components.md +++ b/04_Day_Component/04_components.md @@ -15,11 +15,11 @@ -[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_day_setting_up.md) | [Day 5 >>]() +[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_day_setting_up.md) | [Day 5 >>](./05_Day_Props/05_props.md) ![30 Days of React banner](../images/30_days_of_react_banner_day_4.jpg) -- [Components](#components) +- [Props](#props) - [Big picture of components](#big-picture-of-components) - [JavaScript function](#javascript-function) - [JavaScript Class](#javascript-class) @@ -30,7 +30,7 @@ - [Further on Functional components](#further-on-functional-components) - [Exercises: Components](#exercises-components) -# Components +# Props A React component is small reusable code which is responsible for one part of the application UI. A React application is an aggregation of components. React can help us to build reusable components. The following diagram shows different components. All the components have different border colors. In react we assemble different components together to create an application. We use a JavaScript function or class to make components. If we use a function the component will be a functional component but if we use class the function will be a class based component. @@ -491,9 +491,9 @@ ReactDOM.render(, rootElement) ![News Letter](../images/news_letter_design.png) - 4. Use the given hexadecimal color generator in the example to create these random colors +4. Use the given hexadecimal color generator in the example to create these random colors ![Hexadecimal colors](../images/hexadecimal_color_exercise.png) 🎉 CONGRATULATIONS ! 🎉 -[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_day_setting_up.md) | [Day 5 >>]() +[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_day_setting_up.md) | [Day 5 >>](./05_Day_Props/05_props.md) diff --git a/readMe.md b/readMe.md index c0df21a..e354cbd 100644 --- a/readMe.md +++ b/readMe.md @@ -27,6 +27,7 @@ | 02 | [Getting Started React](./02_Day_Introduction_to_React/02_introduction_to_react.md) | | 03 | [Setting Up](./03_Day_Setting_Up/03_day_setting_up.md) | | 04 | [Components](./04_Day_Component/04_components.md) | +| 05 | [Props](./05_Day_Props/05_props.md) | 🧡🧡🧡 HAPPY CODING 🧡🧡🧡
Support [**Asabeneh**](https://www.patreon.com/asabeneh?fan_landing=true) to create more educational materials