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/03_Day_Setting_Up/03_day_setting_up.md b/03_Day_Setting_Up/03_day_setting_up.md
index d65a0ac..b2100a3 100644
--- a/03_Day_Setting_Up/03_day_setting_up.md
+++ b/03_Day_Setting_Up/03_day_setting_up.md
@@ -41,7 +41,7 @@ In the previous section, we learned about JSX and we accessed the React and Reac
## Node
-Node is a JavaScript runtime environment which allows JavaScript to run on the server. Node was created in 2019. Node has played a great role for the growth of JavaScript. The React application starts by default at localhost 3000. The create-react-app has configured a node server for the React Application. That is why we need node and node modules. We will see create-react-app soon.
+Node is a JavaScript runtime environment which allows JavaScript to run on the server. Node was created in 2009. Node has played a great role for the growth of JavaScript. The React application starts by default at localhost 3000. The create-react-app has configured a node server for the React Application. That is why we need node and node modules. We will see create-react-app soon.
If you do have node, install node. Install [node.js](https://nodejs.org/en/).
diff --git a/03_Day_Setting_Up/30-days-of-react_boilerplate/public/index.html b/03_Day_Setting_Up/30-days-of-react_boilerplate/public/index.html
index 3aafbc8..730e078 100644
--- a/03_Day_Setting_Up/30-days-of-react_boilerplate/public/index.html
+++ b/03_Day_Setting_Up/30-days-of-react_boilerplate/public/index.html
@@ -60,12 +60,12 @@
header {
background-color: #61dbfb;
- padding: 10px;
+ padding: 10px;
}
main {
- padding: 10px 10px 60px;
- /* Height of the footer */
+ padding: 10px 10px 60px;
+ /* Height of the footer */
}
ul {
diff --git a/04_Day_Component/04_components.md b/04_Day_Component/04_components.md
index a97d135..44f4276 100644
--- a/04_Day_Component/04_components.md
+++ b/04_Day_Component/04_components.md
@@ -14,8 +14,7 @@
-
-[<< 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)
@@ -491,9 +490,9 @@ ReactDOM.render(, rootElement)
- 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
๐ 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/04_Day_Component/30-days-of-react_boilerplate-components/src/index.js b/04_Day_Component/30-days-of-react_boilerplate-components/src/index.js
index 33099fe..defe4d2 100644
--- a/04_Day_Component/30-days-of-react_boilerplate-components/src/index.js
+++ b/04_Day_Component/30-days-of-react_boilerplate-components/src/index.js
@@ -1,108 +1,110 @@
// index.js
-import React from 'react';
-import ReactDOM from 'react-dom';
-import asabenehImage from './images/asabeneh.jpg';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import asabenehImage from './images/asabeneh.jpg'
const hexaColor = () => {
- let str = '0123456789abcdef'
- let color = ''
- for (let i = 0; i < 6; i++) {
- let index = Math.floor(Math.random() * str.length)
- color += str[index]
- }
- return '#' + color
+ let str = '0123456789abcdef'
+ let color = ''
+ for (let i = 0; i < 6; i++) {
+ let index = Math.floor(Math.random() * str.length)
+ color += str[index]
+ }
+ return '#' + color
}
const HexaColor = () => {
- let bgColor = hexaColor()
- const styles = {
- height: '100px',
- display: 'flex',
- 'justify-content': 'center',
- 'align-items': 'center',
- fontFamily: 'Montserrat',
- margin: '2px auto',
- borderRadius: '5px',
- width: '75%',
- border: '2px solid black',
- }
- return (
-
+ {/* Generate two different hexa colors every time */}
+
+
+
+
+
)
// Footer Component
const Footer = () => (
-
+
)
// The App, or the parent or the container component
const App = () => (
-
-
-
-
-
+
+
+
+
+
)
const rootElement = document.getElementById('root')
// we render the JSX element using the ReactDOM package
-ReactDOM.render(, rootElement)
+ReactDOM.render(, rootElement)
diff --git a/readMe.md b/readMe.md
index c0df21a..83bff53 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
@@ -71,7 +72,7 @@ In this step by step 30 Days React challenge, you will learn React which is one
React can do everything that JavaScript can do. React can be used **_to add interactivity to websites, to develop mobile apps, desktop applications, games_**.
I believe you will learn quite a lot in the next 30 days and your programming and problem solving skills will also be improved significantly.
-I will use converstational English and less jargons to write this challenge. The content will be continousely updated. If you find a typo or grammar mistakes don't suprised because I don't do any proof read before I publish it. I would recommond you to focus on the main message of the challenge instead of the English and some minor mistakes. I really appreciate if you send me pull requests for improvement and remember to pull first from master before you send pull requests. Most of the images I have used in this challenge came from 30DaysOfJavaScript challenge therefore you may need to rename file names and folders 30DaysOfReact.
+I will use conversational English and less jargons to write this challenge. The content will be continuously updated. If you find a typo or grammar mistakes don't surprised because I don't do any proof read before I publish it. I would recommend you to focus on the main message of the challenge instead of the English and some minor mistakes. I really appreciate if you send me pull requests for improvement and remember to pull first from master before you send pull requests. Most of the images I have used in this challenge came from 30DaysOfJavaScript challenge therefore you may need to rename file names and folders 30DaysOfReact.
If you are good at arrays, loops, functions, objects, functional programming, destructuring and spreading and class then you will be able to follow the challenge properly. Otherwise, I strongly recommend you to check [30DaysOfJavaScript](https://github.com/Asabeneh/30-Days-Of-React).
## Requirements
@@ -158,7 +159,7 @@ git push origin exercise-solutions
## Setup
-I believe you have the motivation and a strong desire to be a developer, a computer and Internet.In addition to that basic to intermidate lelev HTML, CSS and JS. If you have those, then you have everything to get started.
+I believe you have the motivation and a strong desire to be a developer, a computer and Internet. In addition to that basic to intermediate level HTML, CSS and JS. If you have those, then you have everything to get started.
### Install Node.js
@@ -333,7 +334,7 @@ Open the Visual Studio Code by double-clicking its icon. When you open it, you w
-Congratulations! You have completed the setup you need to get started with React, but before we dive into React let's do JavaScript refresher. If you are very comfortable with JavaScript you may skip day 1 JavaScript refresher. The JavaScript refresher section is vast and it may take more than one day. From my experience people usually get stuck in React because their JavaScript knowledge is very shallow therefore to fill that gap all the necessary JavaScript feature which can be used in React are covered in the JavaScript refresher section. There are many exercise but you are not required to solve them. Click [here](../30-Days-Of-React/02_Day_Introduction_to_React/02_introduction_to_react.md) if you want skip JavaScript and jump directly into React.
+Congratulations! You have completed the setup you need to get started with React, but before we dive into React let's do a JavaScript refresher. If you are very comfortable with JavaScript you may skip day 1 JavaScript refresher. The JavaScript refresher section is vast and it may take more than one day. From my experience people usually get stuck in React because their JavaScript knowledge is very shallow therefore to fill that gap all the necessary JavaScript features which can be used in React are covered in the JavaScript refresher section. There are many exercises but you are not required to solve them. Click [here](../30-Days-Of-React/02_Day_Introduction_to_React/02_introduction_to_react.md) if you want skip JavaScript and jump directly into React.
๐ CONGRATULATIONS ! ๐