diff --git a/.gitignore b/.gitignore index 2976cee..2105518 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -draft.md \ No newline at end of file +draft.md +react-for-everyone.md \ No newline at end of file diff --git a/images/30_days_of_react_banner_day_1.jpg b/images/30_days_of_react_banner_day_1.jpg new file mode 100644 index 0000000..1045923 Binary files /dev/null and b/images/30_days_of_react_banner_day_1.jpg differ diff --git a/images/30_days_of_react_banner_day_2.jpg b/images/30_days_of_react_banner_day_2.jpg new file mode 100644 index 0000000..7074014 Binary files /dev/null and b/images/30_days_of_react_banner_day_2.jpg differ diff --git a/images/30_days_of_react_banner_day_3.jpg b/images/30_days_of_react_banner_day_3.jpg new file mode 100644 index 0000000..d6524b5 Binary files /dev/null and b/images/30_days_of_react_banner_day_3.jpg differ diff --git a/images/30_days_of_react_banner_day_4.jpg b/images/30_days_of_react_banner_day_4.jpg new file mode 100644 index 0000000..a1f04f0 Binary files /dev/null and b/images/30_days_of_react_banner_day_4.jpg differ diff --git a/images/30_days_of_react_banner_day_5.jpg b/images/30_days_of_react_banner_day_5.jpg new file mode 100644 index 0000000..e5f1657 Binary files /dev/null and b/images/30_days_of_react_banner_day_5.jpg differ diff --git a/images/className_warning.png b/images/className_warning.png new file mode 100644 index 0000000..00fbf1a Binary files /dev/null and b/images/className_warning.png differ diff --git a/images/cleaned_launched.png b/images/cleaned_launched.png new file mode 100644 index 0000000..5cd9bec Binary files /dev/null and b/images/cleaned_launched.png differ diff --git a/images/components.png b/images/components.png new file mode 100644 index 0000000..50e1487 Binary files /dev/null and b/images/components.png differ diff --git a/images/create_react_app_file_cleaned.png b/images/create_react_app_file_cleaned.png new file mode 100644 index 0000000..7bd0e57 Binary files /dev/null and b/images/create_react_app_file_cleaned.png differ diff --git a/images/create_react_app_files.png b/images/create_react_app_files.png new file mode 100644 index 0000000..111b3ed Binary files /dev/null and b/images/create_react_app_files.png differ diff --git a/images/dynamic_data.png b/images/dynamic_data.png new file mode 100644 index 0000000..9ddb7b8 Binary files /dev/null and b/images/dynamic_data.png differ diff --git a/images/first_react_app.png b/images/first_react_app.png new file mode 100644 index 0000000..e847f2d Binary files /dev/null and b/images/first_react_app.png differ diff --git a/images/internal_style.png b/images/internal_style.png new file mode 100644 index 0000000..043ec74 Binary files /dev/null and b/images/internal_style.png differ diff --git a/images/map_list_id.png b/images/map_list_id.png new file mode 100644 index 0000000..3700675 Binary files /dev/null and b/images/map_list_id.png differ diff --git a/images/react_for_everyone.png b/images/react_for_everyone.png new file mode 100644 index 0000000..137b51f Binary files /dev/null and b/images/react_for_everyone.png differ diff --git a/images/react_logo.gif b/images/react_logo.gif new file mode 100644 index 0000000..07afee4 Binary files /dev/null and b/images/react_logo.gif differ diff --git a/images/react_popularity.png b/images/react_popularity.png new file mode 100644 index 0000000..31f745a Binary files /dev/null and b/images/react_popularity.png differ diff --git a/images/react_repo_1_oct_2020.PNG b/images/react_repo_1_oct_2020.PNG new file mode 100644 index 0000000..93436aa Binary files /dev/null and b/images/react_repo_1_oct_2020.PNG differ diff --git a/images/removing_unique_id_warning.png b/images/removing_unique_id_warning.png new file mode 100644 index 0000000..4b72643 Binary files /dev/null and b/images/removing_unique_id_warning.png differ diff --git a/images/rendering_componnets.png b/images/rendering_componnets.png new file mode 100644 index 0000000..5623f0c Binary files /dev/null and b/images/rendering_componnets.png differ diff --git a/images/rendering_jsx.png b/images/rendering_jsx.png new file mode 100644 index 0000000..670b69d Binary files /dev/null and b/images/rendering_jsx.png differ diff --git a/images/rendering_list.png b/images/rendering_list.png new file mode 100644 index 0000000..0cc0442 Binary files /dev/null and b/images/rendering_list.png differ diff --git a/images/rendering_more_content.png b/images/rendering_more_content.png new file mode 100644 index 0000000..5719021 Binary files /dev/null and b/images/rendering_more_content.png differ diff --git a/images/rendering_multiple_js_elements.png b/images/rendering_multiple_js_elements.png new file mode 100644 index 0000000..0dd4687 Binary files /dev/null and b/images/rendering_multiple_js_elements.png differ diff --git a/images/styling_all_jsx_elements.png b/images/styling_all_jsx_elements.png new file mode 100644 index 0000000..418bd24 Binary files /dev/null and b/images/styling_all_jsx_elements.png differ diff --git a/images/styling_jsx_element.png b/images/styling_jsx_element.png new file mode 100644 index 0000000..c459ee9 Binary files /dev/null and b/images/styling_jsx_element.png differ diff --git a/images/vue_popularity.png b/images/vue_popularity.png new file mode 100644 index 0000000..10e9217 Binary files /dev/null and b/images/vue_popularity.png differ diff --git a/images/vue_repo_1_oct_2020.PNG b/images/vue_repo_1_oct_2020.PNG new file mode 100644 index 0000000..116f981 Binary files /dev/null and b/images/vue_repo_1_oct_2020.PNG differ diff --git a/readMe.md b/readMe.md index 3abecd0..5db63ed 100644 --- a/readMe.md +++ b/readMe.md @@ -166,6 +166,7 @@ - [Exercises Level 1](#exercises-level-1-3) - [Exercises Level 2](#exercises-level-2-3) - [Exercises Level 3](#exercises-level-3-3) +- [13 Document Object Model(DOM)](#13-document-object-modeldom)

30 Days Of React

@@ -201,7 +202,7 @@ React can do everything that JavaJavaScript can do. React can be used **_to add 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. -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). +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 @@ -4712,3 +4713,31 @@ Variance: 17.5 Standard Deviation: 4.2 Frequency Distribution: [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)] ``` + +## 13 Document Object Model(DOM) + +HTML document is structured as a JavaScript Object. Every HTML element has a different properties which can help us to manipulate it. It is possible to get, create, append or remove HTML elements using JavaScript. + +When it comes to React we do not directly manipulate the DOM instead React Virtual DOM will take care of update all necessary changes. + +So do not directly manipuate the DOM if you are using react. The only place we directly touch the DOM is here at the index.html. React is a single page application because all the components will be rendered on the index.html page and there will not be any other HTML in the entire React Application. You don't have to know DOM very well to use react but recommended to know. + +```html + + + + + + React App + + + +
+ + + + +```