Moved to folder structure instead of branch structure

Author: Ari

README.md

@@ -1,30 +1,16 @@
 ## 30 days of react
 
-This repo contains the entire source and content for the article series of [30 days of React](https://www.fullstackreact.com/30-days-of-react) hosted by the Fullstack.io team. 
+This repo contains the entire source and content for the article series of [30 days of React](https://www.fullstackreact.com/30-days-of-react) hosted by the Fullstack.io team.
 
 ## How to use this repository
 
-The repository contains all the sources for the article series where each day is separated out by branch. For instance, the day-1 branch is contained in the `day-1` branch. 
+The repository contains all the sources for the article series where each day is separated out by branch. For instance, the day-1 branch is contained in the `day-1` branch.
 
-To list all the available branches, you can run the `git branch` command in this directory after cloning it locally. It's also available in the github interface.
-
-To only fetch a particular day, you can clone the branch directly using the `git` tool. For instance, to get day 8 from the repo, use the following:
-
-```bash
-git clone https://github.com/fullstackreact/30-days-of-react --branch day-8
-```
-
-Alternatively, clone the entire repository and check out the `day-8` branch as a tracking branch. 
-
-```bash
-git clone https://github.com/fullstackreact/30-days-of-react
-cd 30-days-of-react
-git checkout --tracking -b origin/day-8 day-8
-```
+Each day is separated by folder and each has their own `project.json`. This makes it incredibly easy to manage different projects from day-to-day.
 
 ## What's in it?
 
-Every day contains a full react application, following the same procedure used to create the article series. Every day can be run using the same basic steps. For the days that require a bit more work, check out the tutorial series on the blog. 
+Every day contains a full react application, following the same procedure used to create the article series. Every day can be run using the same basic steps. For the days that require a bit more work, check out the tutorial series on the blog.
 
 The steps to use a day from the 30 days of React project are:
 

day-1/doc/doc.mkd

@@ -0,0 +1,71 @@
+---
+page_id: 30-days-of-react/day-1
+permalink: day-1
+title: What is React?
+description: Today, we're starting out at the beginning. Let's look at what React is and what makes it tick. We'll discuss why we want to use it.
+day: 1
+hero_image: /assets/images/series/30-days-of-react/headings/1.jpg
+imageUrl: /assets/images/series/30-days-of-react/headings/1.jpg
+dayDir: '01'
+introBannerUrl: '/assets/images/series/30-days-of-react/headings/1_wide.jpg'
+date: Tue Oct 04 2016 21:29:25 GMT-0700 (PDT)
+includeFile: ./../_params.yaml
+---
+
+Over the next 30 days, you'll get a good feel for the various parts of the [React](https://facebook.github.io/react/) web framework and its ecosystem.
+
+Each day in our 30 day adventure will build upon the previous day's materials, so by the end of the series, you'll not only know the terms, concepts, and underpinnings of how the framework works, but be able to use React in your next web application.
+
+Let's get started. We'll start [at the very beginning](https://www.youtube.com/watch?v=1RW3nDRmu6k) as it's a very good place to start.
+
+## What is React?
+
+[React](https://facebook.github.io/react/) is a JavaScript library for building user interfaces. It is the view layer for web applications.
+
+At the heart of all React applications are **components**. A component is a self-contained module that renders some output. We can write interface elements like a button or an input field as a React component. Components are _composable_. A component might include one or more other components in its output.
+
+Broadly speaking, to write React apps we write React components that correspond to various interface elements. We then organize these components inside higher-level components which define the structure of our application.
+
+For example, take a form. A form might consist of many interface elements, like input fields, labels, or buttons. Each element inside the form can be written as a React component. We'd then write a higher-level component, the form component itself. The form component would specify the structure of the form and include each of these interface elements inside of it.
+
+Importantly, each component in a React app abides by strict data management principles. Complex, interactive user interfaces often involve complex data and application state. The surface area of React is limited and aimed at giving us the tools to be able to anticipate how our application will look with a given set of circumstances. We dig into these principles later in the course.
+
+## Okay, so how do we use it?
+
+React is a JavaScript framework. Using the framework is as simple as including a JavaScript file in our HTML and using the `React` exports in our application's JavaScript.
+
+For instance, the _Hello world_ example of a React website can be as simple as:
+
+```html
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Hello world</title>
+  <!-- Script tags including React -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
+  <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="text/babel">
+    ReactDOM.render(
+      <h1>Hello world</h1>,
+      document.querySelector('#app')
+    );
+  </script>
+</body>
+</html>
+```
+
+<div id="demo1"></div>
+
+Although it might look a little scary, the JavaScript code is a single line that dynamically adds _Hello world_ to the page. Note that we only needed to include a handful of JavaScript files to get everything working.
+
+## How does it work?
+
+Unlike many of its predecessors, React operates not directly on the browser's Document Object Model (DOM) immediately, but on a **virtual DOM**. That is, rather than manipulating the `document` in a browser after changes to our data (which can be quite slow) it resolves changes in its virtual DOM. After the virtual DOM has been updated, React intelligently determines what changes to make to the actual DOM.
+
+The [React Virtual DOM](https://facebook.github.io/react/docs/dom-differences.html) exists entirely in-memory and is a representation of the web browser's DOM. Because of this, we when we write a React component, we're not writing directly to the DOM, but we're writing a virtual component that React will turn into the DOM.
+
+In the next article, we'll look at what this means for us as we build our React components and jump into JSX and writing our first real components.

day-1/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "30Days",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "@fullstackio/cqmd": "^5.0.6",
+    "babel-jest": "^19.0.0",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-stage-0": "^6.22.0",
+    "enzyme": "^2.8.0",
+    "git-rev": "^0.2.1",
+    "gray-matter": "^2.1.1",
+    "highlight.js": "^9.10.0",
+    "hljs": "^6.2.3",
+    "jest-cli": "^19.0.2",
+    "map-stream": "^0.0.7",
+    "marked": "^0.3.6",
+    "nodemon": "^1.11.0",
+    "npm-run-all": "^4.0.2",
+    "nunjucks": "^3.0.0",
+    "react-addons-test-utils": "^15.4.2",
+    "react-scripts": "0.9.5",
+    "react-test-renderer": "^15.4.2",
+    "redux-mock-store": "^1.2.2",
+    "simple-git": "^1.69.0",
+    "sinon": "^2.1.0",
+    "vinyl-fs": "^2.4.4"
+  },
+  "dependencies": {
+    "autoprefixer": "^6.7.7",
+    "font-awesome": "^4.7.0",
+    "moment": "^2.18.1",
+    "postcss-cli": "^3.0.0",
+    "postcss-import": "^9.1.0",
+    "precss": "^1.4.0",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-frame-component": "^1.0.2",
+    "react-redux": "^5.0.3",
+    "react-router-dom": "^4.0.0",
+    "redux": "^3.6.0"
+  },
+  "scripts": {
+    "start": "npm-run-all -c --parallel start:*",
+    "build": "npm-run-all build:*",
+    "start:styles": "npm run build:styles -- --watch",
+    "build:styles": "./node_modules/.bin/postcss --config postcss.config.js src/styles/index.css -o src/index.css",
+    "start:react": "react-scripts start",
+    "build:react": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}

day-1/post.md

@@ -0,0 +1,78 @@
+---
+page_id: 30-days-of-react/day-1
+permalink: day-1
+day: 1
+series: 30-days-of-react
+title: What is React?
+description: >-
+  Today, we're starting out at the beginning. Let's look at what React is and
+  what makes it tick. We'll discuss why we want to use it.
+hero_image: /assets/images/series/30-days-of-react/headings/1.jpg
+imageUrl: /assets/images/series/30-days-of-react/headings/1.jpg
+dayDir: '01'
+introBannerUrl: /assets/images/series/30-days-of-react/headings/1_wide.jpg
+date: 'Tue Oct 04 2016 21:29:25 GMT-0700 (PDT)'
+imagesDir: /assets/images/series/30-days-of-react/day-1
+includeFile: ./../_params.yaml
+articleEntry: '__SITE_PATH__/build/static/js/main'
+---
+
+
+Over the next 30 days, you'll get a good feel for the various parts of the [React](https://facebook.github.io/react/) web framework and its ecosystem.
+
+Each day in our 30 day adventure will build upon the previous day's materials, so by the end of the series, you'll not only know the terms, concepts, and underpinnings of how the framework works, but be able to use React in your next web application.
+
+Let's get started. We'll start [at the very beginning](https://www.youtube.com/watch?v=1RW3nDRmu6k) as it's a very good place to start.
+
+## What is React?
+
+[React](https://facebook.github.io/react/) is a JavaScript library for building user interfaces. It is the view layer for web applications.
+
+At the heart of all React applications are **components**. A component is a self-contained module that renders some output. We can write interface elements like a button or an input field as a React component. Components are _composable_. A component might include one or more other components in its output.
+
+Broadly speaking, to write React apps we write React components that correspond to various interface elements. We then organize these components inside higher-level components which define the structure of our application.
+
+For example, take a form. A form might consist of many interface elements, like input fields, labels, or buttons. Each element inside the form can be written as a React component. We'd then write a higher-level component, the form component itself. The form component would specify the structure of the form and include each of these interface elements inside of it.
+
+Importantly, each component in a React app abides by strict data management principles. Complex, interactive user interfaces often involve complex data and application state. The surface area of React is limited and aimed at giving us the tools to be able to anticipate how our application will look with a given set of circumstances. We dig into these principles later in the course.
+
+## Okay, so how do we use it?
+
+React is a JavaScript framework. Using the framework is as simple as including a JavaScript file in our HTML and using the `React` exports in our application's JavaScript.
+
+For instance, the _Hello world_ example of a React website can be as simple as:
+
+```html
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Hello world</title>
+  <!-- Script tags including React -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
+  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="text/babel">
+    ReactDOM.render(
+      <h1>Hello world</h1>,
+      document.querySelector('#app')
+    );
+  </script>
+</body>
+</html>
+```
+
+<div id="demo1"></div>
+
+Although it might look a little scary, the JavaScript code is a single line that dynamically adds _Hello world_ to the page. Note that we only needed to include a handful of JavaScript files to get everything working.
+
+## How does it work?
+
+Unlike many of its predecessors, React operates not directly on the browser's Document Object Model (DOM) immediately, but on a **virtual DOM**. That is, rather than manipulating the `document` in a browser after changes to our data (which can be quite slow) it resolves changes on a DOM built and run entirely in memory. After the virtual DOM has been updated, React intelligently determines what changes to make to the actual browser's DOM.
+
+The [React Virtual DOM](https://facebook.github.io/react/docs/dom-differences.html) exists entirely in-memory and is a representation of the web browser's DOM. Because of this, we when we write a React component, we're not writing directly to the DOM, but we're writing a virtual component that React will turn into the DOM.
+
+In the next article, we'll look at what this means for us as we build our React components and jump into JSX and writing our first real components.
+

day-1/postcss.config.js

@@ -0,0 +1,9 @@
+module.exports = ctx => {
+  return {
+    plugins: [
+      require('postcss-import')(),
+      require('precss')(),
+      require('autoprefixer')()
+    ]
+  }
+}

public/favicon.ico renamed to day-1/public/favicon.ico

@@ -0,0 +1,79 @@
+import React from 'react';
+
+// Don't do it like this. This is for example only
+class Timeline extends React.Component {
+  render() {
+    return (
+      <div className="notificationsFrame">
+        <div className="panel">
+          <div className="header">
+            
+            <div className="menuIcon">
+              <div className="dashTop"></div>
+              <div className="dashBottom"></div>
+              <div className="circle"></div>
+            </div>
+
+            <span className="title">Timeline</span>
+
+            <input
+              type="text"
+              className="searchInput"
+              placeholder="Search ..." />
+
+            <div className="fa fa-search searchIcon"></div>
+          </div>
+          <div className="content">
+            <div className="line"></div>
+            <div className="item">
+
+              <div className="avatar">
+                <img 
+                alt='doug'
+                src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
+              </div>
+
+              <span className="time">
+                An hour ago
+              </span>
+              <p>Ate lunch</p>
+            </div>
+
+            <div className="item">
+              <div className="avatar">
+                <img
+                  alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
+              </div>
+
+              <span className="time">10 am</span>
+              <p>Read Day two article</p>
+            </div>
+
+            <div className="item">
+              <div className="avatar">
+                <img
+                  alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
+              </div>
+
+              <span className="time">10 am</span>
+              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+            </div>
+
+            <div className="item">
+              <div className="avatar">
+                <img
+                  alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
+              </div>
+
+              <span className="time">2:21 pm</span>
+              <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Timeline