react library (feat): added explanation of react in a simple html file

Author: kimberrypi

docs/_sidebar.md

@@ -11,6 +11,7 @@
 - Contents
 
   - [Overview](contents/overview.md)
+  - [Understanding the React magic](contents/react_library.md)
   - [Create your portfolio website with CRA](contents/create_react_app.md)
   - Basic Topics
 

docs/contents/create_react_app.md

@@ -1,6 +1,8 @@
 # Create-React-App
 
-The [create-react-app](https://github.com/facebook/create-react-app) allows you to build a React website with just one line of code.
+Setting up a react app can be overwhelming when doing it the first time. There's tons of setup to do before actually coding in React. The good thing about the maintainers of React, **Facebook**, is that they developed a boilerplate app that can get us to start with React without the painful setup.
+
+>The [create-react-app](https://github.com/facebook/create-react-app) allows you to build a React website with just one line of code.
 
 ## Build your portfolio with create-react-app
 
@@ -43,22 +45,22 @@ We now have our React website! Run it on your localhost:
 ![React Default Page](../_media/react_default_page.gif)
 
 ## What does each generated file do?
-| File         | Description                                 |
-| ------------ | ------------------------------------------- |
-| node_modules | where dependencies are installed            |
-| package.json | where dependencies and scripts are declared |
-| public       | where the `index.html` is placed            |
-| src          | where the development files are             |
+| File         | Description                                                          |
+| ------------ | -------------------------------------------------------------------- |
+| node_modules | where dependencies are installed                                     |
+| package.json | where dependencies and scripts are declared                          |
+| public       | where the `index.html` is placed                                     |
+| src          | where the development files are, contains the components of your app |
 
 ## Going through the flow of the project files
 The browser starts with the index.html file and reads the root div. The root div is the starting component. All component are rendered within the root div.
 
-`index.html` at about line 30
+`public/index.html` at about line 30
 ```html
 <div id="root"></div>
 ```
 
-`index.js` at about line 7 states that the component **_App_** should be rendered within the root component.
+`src/index.js` at about line 7 states that the component **_App_** should be rendered within the root component.
 ```javascript
 ReactDOM.render(<App />, document.getElementById("root"));
 ```
@@ -93,7 +95,7 @@ ReactDOM.render(<App />, document.getElementById("root"));
 
    export default App
    ```
-Preview your changes in the browser. Run `yarn start`.
+Preview your changes in the browser. Run `yarn start`. React reloads the browser when you make edits, you don't have to restart the service everytime. 
 
 The browser should display the header, `Hello Women Who Code Manila!`.
-Play around the App and Profile components and design the landing page for your portfolio.
+> Activity: Play around the App and Profile components and design the landing page for your portfolio.

docs/contents/overview.md

@@ -82,4 +82,4 @@ Components imported from another component looks very similar to an HTML tag. In
 
 Now that we know components and jsx, we can start building our first React-powered website. However, building React websites from scratch can be too tedious. It requires a lot of setup. Facebook has developed **_create-react-app_** that allows you to build your React website in just a few minutes.
 
-[Let's start building!](contents/create_react_app.md)
+[Understanding the React library](contents/react_library.md)

docs/contents/react_library.md

@@ -0,0 +1,34 @@
+# React is a Javascript library
+
+To fully understand React, let's see how it works in an HTML file. Like many other Javascript libraries, react can be loaded from a script tag.
+
+
+index.html
+```html
+<!DOCTYPE html>
+<html>
+ <head>
+   <meta charset="UTF-8" />
+   <title>Hello World</title>
+   <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+   <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+   <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+ </head>
+ <body>
+   <div id="myDiv"></div>
+   <script type="text/babel">
+
+   <!-- React Code Goes Here -->
+
+   </script>
+ </body>
+</html>
+```
+In the HTML example above, three react scripts are imported:
+1. `react`: the core react library
+2. `react-dom`: provides DOM-specific methods that can be used at the top level of your app
+3. `babel`: the transpiler
+
+React manipulates the root component, div with the id `myDiv`, depending on what's declared in the `render()` method. The root component "reacts" to the updates or renders thrown to it.
+
+[Let's start building!](contents/create_react_app.md)