From c40622443caee97298e55e994caccd8bd1eb232f Mon Sep 17 00:00:00 2001 From: Will Stern Date: Tue, 16 Aug 2016 07:47:53 -0500 Subject: [PATCH 1/4] 5-react-mobx-start --- 5-react-mobx/.babelrc | 4 +++ 5-react-mobx/.gitignore | 2 ++ 5-react-mobx/.nvmrc | 1 + 5-react-mobx/package.json | 30 +++++++++++++++++++ 5-react-mobx/src/css/main.css | 50 ++++++++++++++++++++++++++++++++ 5-react-mobx/src/index.html | 9 ++++++ 5-react-mobx/src/js/TodoList.js | 39 +++++++++++++++++++++++++ 5-react-mobx/src/js/TodoStore.js | 34 ++++++++++++++++++++++ 5-react-mobx/src/js/main.js | 10 +++++++ 5-react-mobx/webpack.config.js | 28 ++++++++++++++++++ 10 files changed, 207 insertions(+) create mode 100644 5-react-mobx/.babelrc create mode 100644 5-react-mobx/.gitignore create mode 100644 5-react-mobx/.nvmrc create mode 100644 5-react-mobx/package.json create mode 100644 5-react-mobx/src/css/main.css create mode 100644 5-react-mobx/src/index.html create mode 100644 5-react-mobx/src/js/TodoList.js create mode 100644 5-react-mobx/src/js/TodoStore.js create mode 100644 5-react-mobx/src/js/main.js create mode 100644 5-react-mobx/webpack.config.js diff --git a/5-react-mobx/.babelrc b/5-react-mobx/.babelrc new file mode 100644 index 00000000..1957865a --- /dev/null +++ b/5-react-mobx/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ['react', 'es2015'], + "plugins": ['transform-decorators-legacy', 'transform-class-properties'] +} diff --git a/5-react-mobx/.gitignore b/5-react-mobx/.gitignore new file mode 100644 index 00000000..fd4f2b06 --- /dev/null +++ b/5-react-mobx/.gitignore @@ -0,0 +1,2 @@ +node_modules +.DS_Store diff --git a/5-react-mobx/.nvmrc b/5-react-mobx/.nvmrc new file mode 100644 index 00000000..dffc266d --- /dev/null +++ b/5-react-mobx/.nvmrc @@ -0,0 +1 @@ +v6.3.0 diff --git a/5-react-mobx/package.json b/5-react-mobx/package.json new file mode 100644 index 00000000..bbb08817 --- /dev/null +++ b/5-react-mobx/package.json @@ -0,0 +1,30 @@ +{ + "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": { + "mobx": "^2.3.7", + "mobx-react": "^3.5.1", + "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/5-react-mobx/src/css/main.css b/5-react-mobx/src/css/main.css new file mode 100644 index 00000000..8d6ed00c --- /dev/null +++ b/5-react-mobx/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/5-react-mobx/src/index.html b/5-react-mobx/src/index.html new file mode 100644 index 00000000..a9e74ecd --- /dev/null +++ b/5-react-mobx/src/index.html @@ -0,0 +1,9 @@ + + + + + +
+ + + diff --git a/5-react-mobx/src/js/TodoList.js b/5-react-mobx/src/js/TodoList.js new file mode 100644 index 00000000..a8f5d064 --- /dev/null +++ b/5-react-mobx/src/js/TodoList.js @@ -0,0 +1,39 @@ +import React from "react" +import { observer } from "mobx-react" + + +@observer +export default class TodoList extends React.Component { + create(e) { + if (e.which === 13) { + this.props.store.createTodo(e.target.value) + e.target.value = "" + } + } + + filter(e) { + this.props.store.filter = e.target.value + } + + toggleComplete(todo) { + todo.complete = !todo.complete + } + + render() { + const todos = this.props.store.filteredTodos.map(todo => ( +
  • + {todo.value} +
    • + )) + + return ( +
    +

    todos

    + + + + Clear Completed +
    + ) + } +} diff --git a/5-react-mobx/src/js/TodoStore.js b/5-react-mobx/src/js/TodoStore.js new file mode 100644 index 00000000..3d8c8ba5 --- /dev/null +++ b/5-react-mobx/src/js/TodoStore.js @@ -0,0 +1,34 @@ +import mobx from "mobx" +import { computed, observable} from "mobx" + +class Todo { + @observable value + @observable id + @observable complete + + constructor(value) { + this.value = value + this.id = Date.now() + this.complete = false + } +} + +export class TodoStore { + @observable todos = [] + @observable filter = "" + + @computed get filteredTodos() { + return this.todos.filter(todo => !this.filter || todo.value.toLowerCase().match(this.filter.toLowerCase())) + } + + clearComplete = () => { + this.todos.replace(this.todos.filter(todo => !todo.complete)) + } + + createTodo(value) { + this.todos.push(new Todo(value)) + } +} + +export default new TodoStore + diff --git a/5-react-mobx/src/js/main.js b/5-react-mobx/src/js/main.js new file mode 100644 index 00000000..6672df8a --- /dev/null +++ b/5-react-mobx/src/js/main.js @@ -0,0 +1,10 @@ +import "../css/main.css" +import React from "react" +import ReactDOM from "react-dom" +import TodoStore from "./TodoStore" +import TodoList from "./TodoList" + +const app = document.getElementById("app") + +ReactDOM.render(, app) + diff --git a/5-react-mobx/webpack.config.js b/5-react-mobx/webpack.config.js new file mode 100644 index 00000000..7c467bef --- /dev/null +++ b/5-react-mobx/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 }), + ], +}; From de5ff84f70607f442f03bba0813e4dce50757e4b Mon Sep 17 00:00:00 2001 From: Will Stern Date: Tue, 16 Aug 2016 07:50:23 -0500 Subject: [PATCH 2/4] revert to mobx beginning --- 5-react-mobx/package.json | 2 -- 5-react-mobx/src/js/TodoList.js | 33 +------------------------------ 5-react-mobx/src/js/TodoStore.js | 34 -------------------------------- 5-react-mobx/src/js/main.js | 4 ++-- 4 files changed, 3 insertions(+), 70 deletions(-) diff --git a/5-react-mobx/package.json b/5-react-mobx/package.json index bbb08817..7d60c0a2 100644 --- a/5-react-mobx/package.json +++ b/5-react-mobx/package.json @@ -10,8 +10,6 @@ "author": "", "license": "ISC", "dependencies": { - "mobx": "^2.3.7", - "mobx-react": "^3.5.1", "react": "^15.2.1", "react-dom": "^15.3.0" }, diff --git a/5-react-mobx/src/js/TodoList.js b/5-react-mobx/src/js/TodoList.js index a8f5d064..6b7c8d37 100644 --- a/5-react-mobx/src/js/TodoList.js +++ b/5-react-mobx/src/js/TodoList.js @@ -1,39 +1,8 @@ import React from "react" -import { observer } from "mobx-react" -@observer export default class TodoList extends React.Component { - create(e) { - if (e.which === 13) { - this.props.store.createTodo(e.target.value) - e.target.value = "" - } - } - - filter(e) { - this.props.store.filter = e.target.value - } - - toggleComplete(todo) { - todo.complete = !todo.complete - } - render() { - const todos = this.props.store.filteredTodos.map(todo => ( -
  • - {todo.value} -
    • - )) - - return ( -
    -

    todos

    - - -
      {todos}
    - Clear Completed -
    - ) + return

    MobX

    } } diff --git a/5-react-mobx/src/js/TodoStore.js b/5-react-mobx/src/js/TodoStore.js index 3d8c8ba5..e69de29b 100644 --- a/5-react-mobx/src/js/TodoStore.js +++ b/5-react-mobx/src/js/TodoStore.js @@ -1,34 +0,0 @@ -import mobx from "mobx" -import { computed, observable} from "mobx" - -class Todo { - @observable value - @observable id - @observable complete - - constructor(value) { - this.value = value - this.id = Date.now() - this.complete = false - } -} - -export class TodoStore { - @observable todos = [] - @observable filter = "" - - @computed get filteredTodos() { - return this.todos.filter(todo => !this.filter || todo.value.toLowerCase().match(this.filter.toLowerCase())) - } - - clearComplete = () => { - this.todos.replace(this.todos.filter(todo => !todo.complete)) - } - - createTodo(value) { - this.todos.push(new Todo(value)) - } -} - -export default new TodoStore - diff --git a/5-react-mobx/src/js/main.js b/5-react-mobx/src/js/main.js index 6672df8a..f5262b34 100644 --- a/5-react-mobx/src/js/main.js +++ b/5-react-mobx/src/js/main.js @@ -1,10 +1,10 @@ import "../css/main.css" import React from "react" import ReactDOM from "react-dom" -import TodoStore from "./TodoStore" + import TodoList from "./TodoList" const app = document.getElementById("app") -ReactDOM.render(, app) +ReactDOM.render(, app) From 41b2eeb598686270cab70c19c456fc895e93f921 Mon Sep 17 00:00:00 2001 From: Will Stern Date: Tue, 16 Aug 2016 21:15:55 -0500 Subject: [PATCH 3/4] rename mobx --- {5-react-mobx => 6-mobx-react}/.babelrc | 0 {5-react-mobx => 6-mobx-react}/.gitignore | 0 {5-react-mobx => 6-mobx-react}/.nvmrc | 0 {5-react-mobx => 6-mobx-react}/package.json | 0 {5-react-mobx => 6-mobx-react}/src/css/main.css | 0 {5-react-mobx => 6-mobx-react}/src/index.html | 0 {5-react-mobx => 6-mobx-react}/src/js/TodoList.js | 0 {5-react-mobx => 6-mobx-react}/src/js/TodoStore.js | 0 {5-react-mobx => 6-mobx-react}/src/js/main.js | 0 {5-react-mobx => 6-mobx-react}/webpack.config.js | 0 10 files changed, 0 insertions(+), 0 deletions(-) rename {5-react-mobx => 6-mobx-react}/.babelrc (100%) rename {5-react-mobx => 6-mobx-react}/.gitignore (100%) rename {5-react-mobx => 6-mobx-react}/.nvmrc (100%) rename {5-react-mobx => 6-mobx-react}/package.json (100%) rename {5-react-mobx => 6-mobx-react}/src/css/main.css (100%) rename {5-react-mobx => 6-mobx-react}/src/index.html (100%) rename {5-react-mobx => 6-mobx-react}/src/js/TodoList.js (100%) rename {5-react-mobx => 6-mobx-react}/src/js/TodoStore.js (100%) rename {5-react-mobx => 6-mobx-react}/src/js/main.js (100%) rename {5-react-mobx => 6-mobx-react}/webpack.config.js (100%) diff --git a/5-react-mobx/.babelrc b/6-mobx-react/.babelrc similarity index 100% rename from 5-react-mobx/.babelrc rename to 6-mobx-react/.babelrc diff --git a/5-react-mobx/.gitignore b/6-mobx-react/.gitignore similarity index 100% rename from 5-react-mobx/.gitignore rename to 6-mobx-react/.gitignore diff --git a/5-react-mobx/.nvmrc b/6-mobx-react/.nvmrc similarity index 100% rename from 5-react-mobx/.nvmrc rename to 6-mobx-react/.nvmrc diff --git a/5-react-mobx/package.json b/6-mobx-react/package.json similarity index 100% rename from 5-react-mobx/package.json rename to 6-mobx-react/package.json diff --git a/5-react-mobx/src/css/main.css b/6-mobx-react/src/css/main.css similarity index 100% rename from 5-react-mobx/src/css/main.css rename to 6-mobx-react/src/css/main.css diff --git a/5-react-mobx/src/index.html b/6-mobx-react/src/index.html similarity index 100% rename from 5-react-mobx/src/index.html rename to 6-mobx-react/src/index.html diff --git a/5-react-mobx/src/js/TodoList.js b/6-mobx-react/src/js/TodoList.js similarity index 100% rename from 5-react-mobx/src/js/TodoList.js rename to 6-mobx-react/src/js/TodoList.js diff --git a/5-react-mobx/src/js/TodoStore.js b/6-mobx-react/src/js/TodoStore.js similarity index 100% rename from 5-react-mobx/src/js/TodoStore.js rename to 6-mobx-react/src/js/TodoStore.js diff --git a/5-react-mobx/src/js/main.js b/6-mobx-react/src/js/main.js similarity index 100% rename from 5-react-mobx/src/js/main.js rename to 6-mobx-react/src/js/main.js diff --git a/5-react-mobx/webpack.config.js b/6-mobx-react/webpack.config.js similarity index 100% rename from 5-react-mobx/webpack.config.js rename to 6-mobx-react/webpack.config.js From 92fb69a6c407574feda3d0e0d6c43956f3ea9b11 Mon Sep 17 00:00:00 2001 From: mhuxain Date: Mon, 26 Sep 2016 13:39:00 +0500 Subject: [PATCH 4/4] Fixed bug in TodoList.js error "Exterminated JSX contents --- 6-mobx-react/src/js/TodoList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/6-mobx-react/src/js/TodoList.js b/6-mobx-react/src/js/TodoList.js index 6b7c8d37..62201267 100644 --- a/6-mobx-react/src/js/TodoList.js +++ b/6-mobx-react/src/js/TodoList.js @@ -3,6 +3,6 @@ import React from "react" export default class TodoList extends React.Component { render() { - return

    MobX

    + return

    MobX

    } }