Skip to content

Commit c406224

Browse files
willrsternwillrstern
committed
5-react-mobx-start
1 parent f71d41c commit c406224

File tree

10 files changed

+207
-0
lines changed

10 files changed

+207
-0
lines changed

‎5-react-mobx/.babelrc

Lines changed: 4 additions & 0 deletions
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+
}

‎5-react-mobx/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
.DS_Store

‎5-react-mobx/.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v6.3.0

‎5-react-mobx/package.json

Lines changed: 30 additions & 0 deletions
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+
}

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

Lines changed: 50 additions & 0 deletions
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+
}

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

Lines changed: 9 additions & 0 deletions
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>

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from "react"
2+
import { observer } from "mobx-react"
3+
4+
5+
@observer
6+
export default class TodoList extends React.Component {
7+
create(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 todos = this.props.store.filteredTodos.map(todo => (
24+
<li key={todo.id}>
25+
<input type="checkbox" value={todo.complete} onChange={this.toggleComplete.bind(this, todo)} /> <span>{todo.value}</span>
26+
</li>
27+
))
28+
29+
return (
30+
<div >
31+
<h1>todos</h1>
32+
<input placeholder="create new" onKeyPress={this.create.bind(this)} />
33+
<input placeholder="filter todos" value={this.props.store.filter} onChange={this.filter.bind(this)} />
34+
<ul>{todos}</ul>
35+
<a href="#" onClick={this.props.store.clearComplete}>Clear Completed</a>
36+
</div>
37+
)
38+
}
39+
}

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

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

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

Lines changed: 10 additions & 0 deletions
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+

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

Lines changed: 28 additions & 0 deletions
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)