learncodeacademy · RashmiRanganathan · Aug 16, 2016 · Aug 16, 2016 · Aug 17, 2016 · Sep 26, 2016
diff --git a/6-mobx-react/.babelrc b/6-mobx-react/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ['react', 'es2015'],
+  "plugins": ['transform-decorators-legacy', 'transform-class-properties']
+}
diff --git a/6-mobx-react/.gitignore b/6-mobx-react/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.DS_Store
diff --git a/6-mobx-react/.nvmrc b/6-mobx-react/.nvmrc
@@ -0,0 +1 @@
+v6.3.0
diff --git a/6-mobx-react/package.json b/6-mobx-react/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "react-mobx-todos",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --content-base src --inline --hot"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^15.2.1",
+    "react-dom": "^15.3.0"
+  },
+  "devDependencies": {
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-class-properties": "^6.10.2",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.11.1",
+    "css-loader": "^0.23.1",
+    "react-addons-test-utils": "^15.3.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1"
+  }
+}
diff --git a/6-mobx-react/src/css/main.css b/6-mobx-react/src/css/main.css
@@ -0,0 +1,50 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Slabo 27px', serif;
+  background: #f5f5f5;
+  color: #4d4d4d;
+  min-width: 230px;
+  max-width: 550px;
+  margin: 0 auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  font-weight: 300;
+}
+
+input {
+  border-radius: 5px;
+  padding: 5px;
+  border: 1px solid rgba(0,0,0,0.3);
+  margin-right: 10px
+}
+
+input::-webkit-input-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: rgba(0,0,0,0.3);
+}
+
+input::-moz-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: rgba(0,0,0,0.3);
+}
+
+input::input-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: rgba(0,0,0,0.3);
+}
+
+h1 {
+  font-weight: 100;
+  font-size: 100px;
+  padding:0;
+  margin: 0;
+}
diff --git a/6-mobx-react/src/index.html b/6-mobx-react/src/index.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="main.min.js"></script>
+  </body>
+</html>
diff --git a/6-mobx-react/src/js/TodoList.js b/6-mobx-react/src/js/TodoList.js
@@ -0,0 +1,8 @@
+import React from "react"
+
+
+export default class TodoList extends React.Component {
+  render() {
+    return <h1>MobX</h1>
+  }
+}
diff --git a/6-mobx-react/src/js/TodoStore.js b/6-mobx-react/src/js/TodoStore.js
diff --git a/6-mobx-react/src/js/main.js b/6-mobx-react/src/js/main.js
@@ -0,0 +1,10 @@
+import "../css/main.css"
+import React from "react"
+import ReactDOM from "react-dom"
+
+import TodoList from "./TodoList"
+
+const app = document.getElementById("app")
+
+ReactDOM.render(<TodoList />, app)
+
diff --git a/6-mobx-react/webpack.config.js b/6-mobx-react/webpack.config.js
@@ -0,0 +1,28 @@
+var debug = process.env.NODE_ENV !== "production";
+var webpack = require('webpack');
+var path = require('path');
+
+module.exports = {
+  context: path.join(__dirname, "src"),
+  devtool: debug ? "inline-sourcemap" : null,
+  entry: "./js/main.js",
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules|bower_components)/,
+        loader: 'babel-loader',
+      },
+      { test: /\.css$/, loader: "style-loader!css-loader" },
+    ]
+  },
+  output: {
+    path: path.join(__dirname, "src"),
+    filename: "main.min.js"
+  },
+  plugins: debug ? [] : [
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
+  ],
+};