Day_1 has been modified, DOM section has been added

5 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
+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>
@ -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>
+```