restructured files for docs

Author: kimberrypi

.env

@@ -0,0 +1,49 @@
+# Women Who Code Manila React Study Group
+
+## About this study group
+
+!> Read this [document](wwcodemanila/study_groups.md) first to know what study groups are.
+
+This study group is held once a month and is led by our volunteer leaders. However, everyone is welcome to join, learn, and share their knowledge in the community.
+
+Everyone joining this study group and other Women Who Code events must follow our [code of conduct](https://github.com/WomenWhoCode/guidelines-resources/blob/master/code_of_conduct.md).
+
+### Content
+
+| Topic            | Slides                                                                                                                                               | Resource                                                   |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
+| Create-React-App | [R01: Intro to React](https://docs.google.com/presentation/d/1g5f2pA3n7TLCqkNVHvNtidu13-bWzil97EV6M8bDG2c/edit#slide=id.g3489b4a6e0_0_18)            | [Repository](https://github.com/facebook/create-react-app) |
+| States           | [R02: States](https://docs.google.com/presentation/d/1xqgtoMBnRSHv6Wlj6ISNzk4t0qUp6JZ42oWv5ZOzGcc/edit#slide=id.g3489b4a6e0_0_9)                     |
+| Routes           | [R03: Routes](https://docs.google.com/presentation/u/1/d/1YFGA4WgLU8yikdsIZZPtBg9-0BVTG8EMJToMXDhhFC8/edit?usp=drive_web&ouid=100552747360855322984) |
+| Forms            | [R04: Forms](https://docs.google.com/presentation/u/1/d/1P5FUhbX49g0cCHPC9eYv7vGTWGoA8vtxPSeBqYaD9jE/edit?usp=drive_web&ouid=100552747360855322984)  |
+| Displaying data  | [R05: Displaying Data](https://docs.google.com/presentation/d/1h1hMDc6r3aMJaPws0RQf2vQg3G9G49YXQhXmaoHw7Sw/edit#slide=id.g3b1fd2a9a6_0_16)           |
+
+
+## Relevant links
+
+- [Gitter Chat](https://gitter.im/WWCodeManila/javascript): Interact with the community. You can share something about React, or ask help if you're stuck on a problem.
+- [Github](https://github.com/wwcodemanila/WWCodeManila-ReactJS): View study group code
+- [Meetup](https://meetup.com/Women-Who-Code-Manila): Get updated with the upcoming study group and other event schedules.
+- [Facebook](https://facebook.com/wwcodemanila): Get updated about what's happening with the community.
+- [Twitter](https://twitter.com/wwcodemanila): Get updates about current and future events.
+
+## Helping out
+
+### Volunteer
+
+Attend one of our [events](https://bit.ly/wwcodemanilameetups) and talk to us! :smile:
+
+### Donate
+
+Even a little amount is a big help for us to achieve our mission of inspiring women to excel in tech careers. :heart:
+
+You can donate at our [Open Collective](https://opencollective.com/wwcodemanila).
+
+### Hosting
+
+Do you want to host one of our study groups? Email us at **manila@womenwhocode.com**.
+
+## Contributors
+
+- Kim Morano ([@ksmorano](https://github.com/ksmorano))
+- Kate Bañez ([@katefloresbanez](https://github.com/katefloresbanez))

README.md

@@ -0,0 +1,39 @@
+<p><img src="_media/logo.png" data-origin="_media/logo.png" alt="logo"></p>
+
+<!--
+  UPDATE THIS:
+  Change to your study group's name
+-->
+<h1>React Study Group</h1>
+
+<p>
+  <a class="link-icon" href="https://meetup.com/Women-Who-Code-Manila" target="_blank">
+    <img src="_media/meetup.png">
+  </a>
+  <a class="link-icon" href="https://twitter.com/wwcodemanila" target="_blank">
+    <img src="_media/twitter.png">
+  </a>
+  <a class="link-icon" href="https://facebook.com/wwcodemanila" target="_blank">
+    <img src="_media/facebook.png">
+  </a>
+  <!--
+    UPDATE THIS:
+    Point the URL to your Github repo (change `href` attribute)
+  -->
+  <a class="link-icon" href="https://github.com/wwcodemanila/WWCodeManila-Ruby.RubyOnRails" target="_blank">
+    <img src="_media/github.png">
+  </a>
+  <!--
+    UPDATE THIS:
+    Point the URL to your Gitter Chat (change `href` attribute)
+  -->
+  <a class="link-icon" href="https://gitter.im/WWCodeManila/Ruby-On-Rails" target="_blank">
+    <img src="_media/gitter.png">
+  </a>
+</p>
+
+<p>
+  <a href="#/README">Get Started</a>
+</p>
+
+<p><img src="_media/bg.jpg" data-origin="_media/bg.jpg" alt="background"></p>

_coverpage.html

@@ -0,0 +1,31 @@
+- Getting Started
+
+  - [About the Study Group](README.md)
+  - [Install Tools](getting_started/install_tools.md)
+
+- Women Who Code Manila
+
+  - [About WWCode Manila](wwcodemanila/about.md)
+  - [Study Groups](wwcodemanila/study_groups.md)
+
+- Contents
+
+  - [Overview](contents/overview.md)
+  - [Create your portfolio website with CRA](contents/create_react_app.md)
+  - Basic Topics
+
+    - State management and lifecycle methods: Make a Like Counter
+    - Routes: Create your Navbar
+    - Forms: Contact Page
+    - Displaying Data: Display Weather Data
+
+  - Advanced Topics
+    - Best Practices on Project Structure: Reusable Components, Presentational and Functional Components
+      <!-- - Project Structure: suggested, stateless + stateful -->
+    - Redux: Store, Reducers, Actions
+    - React <> Game Dev
+    - Unit Testing: Jest, Enzyme
+    - Deployment: Heroku, gh-pages
+    - React-flavored library: Gatsby
+
+* [References](resources/references.md)

_sidebar.md

@@ -4,7 +4,7 @@ The [create-react-app](https://github.com/facebook/create-react-app) allows you
 
 ## Build your portfolio with create-react-app
 
-:bangbang: Before running this command, make sure that you have **_node and yarn_** installed.
+!> Before running this command, make sure that you have **_node and yarn_** installed.
 
 Run the following command on your command line.
 
@@ -40,6 +40,8 @@ We now have our React website! Run it on your localhost:
 2. run the website: `yarn start`
 3. visit http://localhost:3000 on your browser to preview your website
 
+![React Default Page](../_media/react_default_page.gif)
+
 ## What does each generated file do?
 | File         | Description                                 |
 | ------------ | ------------------------------------------- |
@@ -67,7 +69,7 @@ ReactDOM.render(<App />, document.getElementById("root"));
 1. Create a `components` folder.
 2. Inside the `components` folder, create a file named `Profile.js`
    `Profile.js`
-   ```es6
+   ```javascript
    import React from 'react'
 
    const Profile = () => (
@@ -78,7 +80,7 @@ ReactDOM.render(<App />, document.getElementById("root"));
    ```
 3. Update `App.js` by importing your new component.
    `App.js`
-   ```es6
+   ```javascript
    import Profile from 'components/Profile'
 
    class App extends Component {
@@ -94,5 +96,4 @@ ReactDOM.render(<App />, document.getElementById("root"));
 Preview your changes in the browser. Run `yarn start`.
 
 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.
-
+Play around the App and Profile components and design the landing page for your portfolio.