Day_1 has been modified, DOM section has been added

4 years ago · 84834f971d
parent af018df3c3
commit 84834f971d
30 changed files with 32 additions and 2 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,2 @@
-draft.md
+draft.md
+react-for-everyone.md
--- a/images/30_days_of_react_banner_day_1.jpg
+++ b/images/30_days_of_react_banner_day_1.jpg
--- a/images/30_days_of_react_banner_day_2.jpg
+++ b/images/30_days_of_react_banner_day_2.jpg
--- a/images/30_days_of_react_banner_day_3.jpg
+++ b/images/30_days_of_react_banner_day_3.jpg
--- a/images/30_days_of_react_banner_day_4.jpg
+++ b/images/30_days_of_react_banner_day_4.jpg
--- a/images/30_days_of_react_banner_day_5.jpg
+++ b/images/30_days_of_react_banner_day_5.jpg
--- a/images/className_warning.png
+++ b/images/className_warning.png
--- a/images/cleaned_launched.png
+++ b/images/cleaned_launched.png
--- a/images/components.png
+++ b/images/components.png
--- a/images/create_react_app_file_cleaned.png
+++ b/images/create_react_app_file_cleaned.png
--- a/images/create_react_app_files.png
+++ b/images/create_react_app_files.png
--- a/images/dynamic_data.png
+++ b/images/dynamic_data.png
--- a/images/first_react_app.png
+++ b/images/first_react_app.png
--- a/images/internal_style.png
+++ b/images/internal_style.png
--- a/images/map_list_id.png
+++ b/images/map_list_id.png
--- a/images/react_for_everyone.png
+++ b/images/react_for_everyone.png
--- a/images/react_logo.gif
+++ b/images/react_logo.gif
--- a/images/react_popularity.png
+++ b/images/react_popularity.png
--- a/images/react_repo_1_oct_2020.PNG
+++ b/images/react_repo_1_oct_2020.PNG
--- a/images/removing_unique_id_warning.png
+++ b/images/removing_unique_id_warning.png
--- a/images/rendering_componnets.png
+++ b/images/rendering_componnets.png
--- a/images/rendering_jsx.png
+++ b/images/rendering_jsx.png
--- a/images/rendering_list.png
+++ b/images/rendering_list.png
--- a/images/rendering_more_content.png
+++ b/images/rendering_more_content.png
--- a/images/rendering_multiple_js_elements.png
+++ b/images/rendering_multiple_js_elements.png
--- a/images/styling_all_jsx_elements.png
+++ b/images/styling_all_jsx_elements.png
--- a/images/styling_jsx_element.png
+++ b/images/styling_jsx_element.png
--- a/images/vue_popularity.png
+++ b/images/vue_popularity.png
--- a/images/vue_repo_1_oct_2020.PNG
+++ b/images/vue_repo_1_oct_2020.PNG
--- 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)

 <div align="center">
  <h1> 30 Days Of React</h1>
@ -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
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React App</title>
+  </head>
+
+  <body>
+    <div class="root"></div>
+
+    <script>
+      const root = document.querySelector('.root')
+      const root = document.getElementById('root')
+    </script>
+  </body>
+</html>
+```