Skip to content

Commit 1f5e1b4

Browse files
emthinkemthink
committed
add react noting
1 parent 90ebfa9 commit 1f5e1b4

23 files changed

+26263
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ reactjs resource and demos
44
- [react入门与进阶（首篇）](https://github.com/codingplayboy/reactjs/blob/master/react_learn.md)
55
- [react入门与进阶之组件的复合与通信](https://github.com/codingplayboy/reactjs/blob/master/react_learn02.md)
66
- [react入门与进阶之Flux](https://github.com/codingplayboy/reactjs/blob/master/react_learn03.md)
7+
- [react入门与进阶之路由](https://github.com/codingplayboy/reactjs/blob/master/react_router.md)

‎react-noting/.gitignore

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

‎react-noting/README.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
# React Notes
3+
4+
## To use
5+
6+
```sh
7+
npm install
8+
npm start
9+
npm run node-server
10+
or
11+
node server
12+
```
13+
14+
And visit <http://localhost:3000/>. Try opening multiple tabs!
15+
16+
## Changing the port
17+
18+
You can change the port number by setting the `$PORT` environment variable before invoking any of the scripts above, e.g.,
19+
20+
```sh
21+
PORT=3001 node server.js
22+
```

‎react-noting/index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<title>React Noting</title>
7+
</head>
8+
<body>
9+
<div class="noting-wrap">
10+
</div>
11+
12+
<!-- 需使用绝对路径引用js文件，否则js文件获取不到* -->
13+
<script src="/scripts/bundle.js"></script>
14+
</body>
15+
</html>

‎react-noting/package.json

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "react_notes",
3+
"version": "0.1.0",
4+
"description": "Example React&Flux application",
5+
"main": "scripts/app.js",
6+
"dependencies": {
7+
"flux": "^2.0.1",
8+
"react": "^0.12.0"
9+
},
10+
"devDependencies": {
11+
"browserify": "^6.2.0",
12+
"envify": "^3.0.0",
13+
"reactify": "^0.15.2",
14+
"uglify-js": "~2.4.15",
15+
"watchify": "^2.1.1",
16+
"body-parser": "^1.15.2",
17+
"react-router": "^2.8.2"
18+
},
19+
"scripts": {
20+
"start": "npm run build-less && npm run build-js",
21+
"build-js": "watchify -o scripts/bundle.js -v -d scripts/app.js",
22+
"build": "browserify . -t [envify --NODE_ENV production] | uglifyjs -cm > js/bundle.min.js",
23+
"build-less": "lessc styles/less/app.less styles/app.css",
24+
"node-server": "node server.js"
25+
},
26+
"browserify": {
27+
"transform": [
28+
"reactify",
29+
"envify"
30+
]
31+
},
32+
"repository": {
33+
"type": "git",
34+
"url": "https://"
35+
},
36+
"keywords": [
37+
"React",
38+
"Flux",
39+
"example",
40+
"noting"
41+
],
42+
"author": "惊鸿",
43+
"license": "ISC"
44+
}

‎react-noting/scripts/actions/NotingActions.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* NotingActions.js
3+
* @description [Noting Action]
4+
* @author [惊鸿]
5+
* @link [symbol]
6+
* @date 2016/09/24
7+
*/
8+
9+
10+
var NotingDispatcher = require('../dispatcher/NotingDispatcher');
11+
var _CONSTANT = require('../commons/variables');
12+
13+
var NotingActions = {
14+
create: function(title, content) {
15+
NotingDispatcher.dispatch({
16+
type: _CONSTANT.CREATE,
17+
title: title,
18+
content: content
19+
});
20+
}
21+
};
22+
23+
module.exports = NotingActions;

‎react-noting/scripts/app.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* [app.js 程序入口js]
3+
* @Date 2016.09.13
4+
*/
5+
6+
var React = require('react');
7+
var NotingRouter = require('./router/NotingRouter.js');
8+
9+
React.render(
10+
NotingRouter,
11+
document.querySelector('.noting-wrap')
12+
);

‎react-noting/scripts/bundle.js

+24,961
Large diffs are not rendered by default.

‎react-noting/scripts/commons/NotingData.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* NotingData.js
3+
* @description [数据]
4+
* @Date 2016/09/25
5+
*/
6+
7+
var Utils = require('./utils.js');
8+
9+
var notings = {};
10+
11+
var uid = Utils.makeUID();
12+
notings[uid] = {
13+
id: uid,
14+
title: 'React Router Test',
15+
content: 'React Router Test'
16+
};
17+
notings['10001FEAngular'] = {
18+
id: '10001FEAngular',
19+
title: 'Angular',
20+
content: 'Angular Router'
21+
};
22+
notings['10001FEBackbone'] = {
23+
id: '10001FEBackbone',
24+
title: 'Backbone',
25+
content: 'Backbone Router'
26+
};
27+
notings['10001FEAngular2'] = {
28+
id: '10001FEAngular2',
29+
title: 'Angular 2',
30+
content: 'Angular 2.x'
31+
};
32+
33+
module.exports = notings;

‎react-noting/scripts/commons/utils.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/**
2+
* utils.js
3+
* @description [工具函数模块]
4+
* @Date 2016/09/24
5+
*/
6+
7+
var Utils = {
8+
isPlainObject: function(obj) {
9+
return Object.prototype.toString.call(obj) === '[object Object]';
10+
},
11+
12+
isBoolean: function(tag) {
13+
return Object.prototype.toString.call(tag) === '[object Boolean]';
14+
},
15+
16+
extend: function(obj) {
17+
var len = arguments.length;
18+
var isUpdate = arguments[len - 1];
19+
var obj = arguments[0];
20+
var target;
21+
22+
isUpdate = this.isBoolean(isUpdate) ? isUpdate : true;
23+
for (var i = 1; i < arguments.length; i++) {
24+
target = arguments[i];
25+
if (!this.isPlainObject(target) || !this.isPlainObject(obj)){
26+
return i > 1 ? obj : {};
27+
}
28+
29+
for (var key in target) {
30+
if (obj.hasOwnProperty(key) && !isUpdate) {
31+
continue;
32+
}
33+
obj[key] = target[key];
34+
}
35+
}
36+
37+
return obj;
38+
},
39+
makeUID: function() {
40+
return (+new Date() + Math.floor(Math.random() * 999999)).toString(36);
41+
},
42+
sliceObj: function(obj, length) {
43+
var _len = 0;
44+
var _obj = {};
45+
46+
if (Object.prototype.toString.call(obj) !== '[object Object]') {
47+
return;
48+
}
49+
50+
if (!length) {
51+
return obj;
52+
}
53+
54+
for (var key in obj) {
55+
if (length && _len >= length) {
56+
break;
57+
}
58+
if (!_obj[key]) {
59+
_obj[key] = obj[key];
60+
_len++;
61+
}
62+
}
63+
64+
return _obj;
65+
}
66+
};
67+
68+
module.exports = Utils;

‎react-noting/scripts/commons/variables.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
*
3+
*/
4+
var NOTINGCONSTANT = {
5+
CREATE: 'creat',
6+
UPDATE: 'update',
7+
CHANGEEVENT: 'change'
8+
};
9+
10+
module.exports = NOTINGCONSTANT;

‎react-noting/scripts/components/NotingApp.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* NotingApp.js
3+
* @author [惊鸿]
4+
* @description [应用入口js]
5+
* @Date 2016/09/23
6+
*/
7+
8+
var React = require('react');
9+
var Link = require('react-router').Link;
10+
var NotingDate = require('./NotingDate');
11+
12+
var NotingApp = React.createClass({
13+
14+
getInitialState: function() {
15+
return {}
16+
},
17+
render: function() {
18+
var date = new Date();
19+
20+
return (
21+
<div>
22+
<Link to="/index"><h2>React Noting</h2></Link>
23+
<NotingDate date={date} />
24+
{this.props.children}
25+
</div>
26+
);
27+
}
28+
});
29+
30+
module.exports = NotingApp;

‎react-noting/scripts/components/NotingDate.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/**
2+
* NotingDate.js
3+
* @description [日期组件]
4+
* @author [惊鸿]
5+
* @link []
6+
* @Date 2016/10/8
7+
*/
8+
9+
var React = require('react');
10+
var Utils = require('../commons/utils.js');
11+
var ReactPropTypes = React.PropTypes;
12+
13+
var NotingDate = React.createClass({
14+
getInitialState: function() {
15+
return {
16+
date: this.props.date || new Date()
17+
};
18+
},
19+
_processDate: function() {
20+
var _date = this.state.date;
21+
var dates = [];
22+
23+
dates.push(_date.getFullYear());
24+
dates.push(_date.getMonth() + 1);
25+
dates.push(_date.getDate());
26+
dates.push(this._getWeekDay(_date.getDay()));
27+
28+
return dates.join('/');
29+
},
30+
_getWeekDay: function(day) {
31+
var dayStr = ['日', '一', '二', '三', '四', '五', '六'];
32+
return '星期' + dayStr[day];
33+
},
34+
render: function() {
35+
var date = this._processDate();
36+
37+
return (
38+
<div className="noting-date">
39+
<h3>{date}</h3>
40+
</div>
41+
);
42+
}
43+
});
44+
45+
module.exports = NotingDate;

‎react-noting/scripts/components/NotingInput.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/**
2+
*
3+
*/
4+
5+
var React = require('react');
6+
var ReactPropTypes = React.PropTypes;
7+
8+
var ENTER_KEY_CODE = 13;
9+
10+
var NotingInput = React.createClass({
11+
12+
propTypes: {
13+
autoFocus: ReactPropTypes.bool,
14+
placeholder: ReactPropTypes.string,
15+
onSave: ReactPropTypes.func.isRequired,
16+
value: ReactPropTypes.string
17+
},
18+
19+
getInitialState: function() {
20+
return {
21+
value: this.props.value || ''
22+
};
23+
},
24+
25+
render: function() {
26+
return (
27+
<input
28+
className="noting-input"
29+
placeholder={this.props.placeholder}
30+
onBlur={this._save}
31+
onChange={this._onChange}
32+
onKeyDown={this._onKeyDown}
33+
value={this.state.value}
34+
autoFocus={this.props.autoFocus || true}
35+
/>
36+
);
37+
},
38+
39+
_save: function() {
40+
this.props.onSave(this.state.value);
41+
this.setState({
42+
value: ''
43+
});
44+
},
45+
46+
_onChange: function(/*object*/ event) {
47+
this.setState({
48+
value: event.target.value
49+
});
50+
},
51+
52+
_onKeyDown: function(event) {
53+
if (event.keyCode === ENTER_KEY_CODE) {
54+
this._save();
55+
}
56+
}
57+
58+
});
59+
60+
module.exports = NotingInput;

0 commit comments

Comments
 (0)