Skip to content

Commit c187bd0

Browse files
willrsternwillrstern
committedAug 17, 2016
add mobx
1 parent f71d41c commit c187bd0

10 files changed

+205
-0
lines changed
 

‎6-mobx-react/.babelrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ['react', 'es2015'],
3+
"plugins": ['transform-decorators-legacy', 'transform-class-properties']
4+
}

‎6-mobx-react/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
.DS_Store

‎6-mobx-react/.nvmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v6.3.0

‎6-mobx-react/package.json

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "react-mobx-todos",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack-dev-server --content-base src --inline --hot"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"dependencies": {
13+
"mobx": "^2.3.7",
14+
"mobx-react": "^3.5.1",
15+
"react": "^15.2.1",
16+
"react-dom": "^15.3.0"
17+
},
18+
"devDependencies": {
19+
"babel-loader": "^6.2.4",
20+
"babel-plugin-transform-class-properties": "^6.10.2",
21+
"babel-plugin-transform-decorators-legacy": "^1.3.4",
22+
"babel-preset-es2015": "^6.9.0",
23+
"babel-preset-react": "^6.11.1",
24+
"css-loader": "^0.23.1",
25+
"react-addons-test-utils": "^15.3.0",
26+
"style-loader": "^0.13.1",
27+
"webpack": "^1.13.1",
28+
"webpack-dev-server": "^1.14.1"
29+
}
30+
}

‎6-mobx-react/src/css/main.css

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
html,
2+
body {
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
body {
8+
font-family: 'Slabo 27px', serif;
9+
background: #f5f5f5;
10+
color: #4d4d4d;
11+
min-width: 230px;
12+
max-width: 550px;
13+
margin: 0 auto;
14+
-webkit-font-smoothing: antialiased;
15+
-moz-font-smoothing: antialiased;
16+
font-smoothing: antialiased;
17+
font-weight: 300;
18+
}
19+
20+
input {
21+
border-radius: 5px;
22+
padding: 5px;
23+
border: 1px solid rgba(0,0,0,0.3);
24+
margin-right: 10px
25+
}
26+
27+
input::-webkit-input-placeholder {
28+
font-style: italic;
29+
font-weight: 300;
30+
color: rgba(0,0,0,0.3);
31+
}
32+
33+
input::-moz-placeholder {
34+
font-style: italic;
35+
font-weight: 300;
36+
color: rgba(0,0,0,0.3);
37+
}
38+
39+
input::input-placeholder {
40+
font-style: italic;
41+
font-weight: 300;
42+
color: rgba(0,0,0,0.3);
43+
}
44+
45+
h1 {
46+
font-weight: 100;
47+
font-size: 100px;
48+
padding:0;
49+
margin: 0;
50+
}

‎6-mobx-react/src/index.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<html>
2+
<head>
3+
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
4+
</head>
5+
<body>
6+
<div id="app"></div>
7+
<script src="main.min.js"></script>
8+
</body>
9+
</html>

‎6-mobx-react/src/js/TodoList.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from "react"
2+
import { observer } from "mobx-react"
3+
4+
5+
@observer
6+
export default class TodoList extends React.Component {
7+
createNew(e) {
8+
if (e.which === 13) {
9+
this.props.store.createTodo(e.target.value)
10+
e.target.value = ""
11+
}
12+
}
13+
14+
filter(e) {
15+
this.props.store.filter = e.target.value
16+
}
17+
18+
toggleComplete(todo) {
19+
todo.complete = !todo.complete
20+
}
21+
22+
render() {
23+
const { clearComplete, filter, filteredTodos, todos } = this.props.store
24+
25+
const todoLis = filteredTodos.map(todo => (
26+
<li key={todo.id}>
27+
<input type="checkbox" onChange={this.toggleComplete.bind(this, todo)} value={todo.complete} checked={todo.complete} />{todo.value}</li>
28+
))
29+
return <div>
30+
<h1>todos</h1>
31+
<input className="create" onKeyPress={this.createNew.bind(this)} />
32+
<input className="filter" value={filter} onChange={this.filter.bind(this)} />
33+
<ul>{todoLis}</ul>
34+
<a href="#" onClick={clearComplete}>Clear Complete</a>
35+
</div>
36+
}
37+
}

‎6-mobx-react/src/js/TodoStore.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { computed, observable } from "mobx"
2+
3+
class Todo {
4+
@observable value
5+
@observable id
6+
@observable complete
7+
8+
constructor(value) {
9+
this.value = value
10+
this.id = Date.now()
11+
this.complete = false
12+
}
13+
}
14+
15+
export class TodoStore {
16+
@observable todos = []
17+
@observable filter = ""
18+
@computed get filteredTodos() {
19+
var matchesFilter = new RegExp(this.filter, "i")
20+
return this.todos.filter(todo => !this.filter || matchesFilter.test(todo.value))
21+
}
22+
23+
createTodo(value) {
24+
this.todos.push(new Todo(value))
25+
}
26+
27+
clearComplete = () => {
28+
const incompleteTodos = this.todos.filter(todo => !todo.complete)
29+
this.todos.replace(incompleteTodos)
30+
}
31+
}
32+
33+
export default new TodoStore
34+

‎6-mobx-react/src/js/main.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import "../css/main.css"
2+
import React from "react"
3+
import ReactDOM from "react-dom"
4+
import TodoStore from "./TodoStore"
5+
import TodoList from "./TodoList"
6+
7+
const app = document.getElementById("app")
8+
9+
ReactDOM.render(<TodoList store={TodoStore} />, app)
10+

‎6-mobx-react/webpack.config.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
var debug = process.env.NODE_ENV !== "production";
2+
var webpack = require('webpack');
3+
var path = require('path');
4+
5+
module.exports = {
6+
context: path.join(__dirname, "src"),
7+
devtool: debug ? "inline-sourcemap" : null,
8+
entry: "./js/main.js",
9+
module: {
10+
loaders: [
11+
{
12+
test: /\.js$/,
13+
exclude: /(node_modules|bower_components)/,
14+
loader: 'babel-loader',
15+
},
16+
{ test: /\.css$/, loader: "style-loader!css-loader" },
17+
]
18+
},
19+
output: {
20+
path: path.join(__dirname, "src"),
21+
filename: "main.min.js"
22+
},
23+
plugins: debug ? [] : [
24+
new webpack.optimize.DedupePlugin(),
25+
new webpack.optimize.OccurenceOrderPlugin(),
26+
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
27+
],
28+
};

0 commit comments

Comments
 (0)
Failed to load comments.