├── favicon.ico
├── static
    └── images
    │   └── logo.png
├── less
    ├── components
    │   ├── loadNext.less
    │   ├── userPanel.less
    │   ├── item.less
    │   ├── footer.less
    │   └── header.less
    ├── main.less
    ├── index.less
    └── global.less
├── .gitignore
├── api
    └── dao.js
├── index.js
├── containers
    ├── Admin.js
    └── App.js
├── index.html
├── components
    ├── Item.js
    ├── LoadNext.js
    ├── UserLink.js
    ├── Header.js
    ├── UserPanel.js
    ├── Footer.js
    └── List.js
├── README.md
├── utils
    └── fetch.js
├── LICENSE
├── package.json
├── webpack.config.js
├── gulpfile.js
└── modal.html


/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shaqihe/reactDemo/HEAD/favicon.ico


--------------------------------------------------------------------------------
/static/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shaqihe/reactDemo/HEAD/static/images/logo.png


--------------------------------------------------------------------------------
/less/components/loadNext.less:
--------------------------------------------------------------------------------
1 | .load-next {
2 |     padding: 10px;
3 |     text-align: center;
4 |     cursor: pointer;
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /build
2 | /node_modules
3 | ### Node ###
4 | node_modules
5 | npm-debug.log*
6 | /node_modules
7 | ### build ###
8 | build
9 | 


--------------------------------------------------------------------------------
/api/dao.js:
--------------------------------------------------------------------------------
 1 | import { fetch } from '../utils/fetch'
 2 | 
 3 | var dao = {
 4 |     hotData: (query)=>{
 5 |         return fetch('/agent/sun/hotList', query);
 6 |     }
 7 | }
 8 | 
 9 | export default dao
10 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import 'babel-core/polyfill'
 2 | import React from 'react'
 3 | import { render } from 'react-dom'
 4 | import App from './containers/App'
 5 | 
 6 | render(
 7 |   <App/>,
 8 |   document.getElementById('modal')
 9 | )
10 | 


--------------------------------------------------------------------------------
/containers/Admin.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | class Admin extends Component {
 4 |     render() {
 5 |         return (
 6 |         <div>
 7 |         </div>
 8 |         )
 9 |     }
10 | }
11 | 
12 | export default Admin
13 | 
14 | 


--------------------------------------------------------------------------------
/less/main.less:
--------------------------------------------------------------------------------
 1 | 
 2 | //setting
 3 | @import "./global";
 4 | 
 5 | //components
 6 | @import "./components/header";
 7 | @import "components/userPanel";
 8 | @import "components/item";
 9 | @import "components/loadNext";
10 | // @import "components/Main";
11 |  @import "components/footer";
12 | //page
13 | 
14 | @import "./index";
15 | 


--------------------------------------------------------------------------------
/less/components/userPanel.less:
--------------------------------------------------------------------------------
 1 | .user-panel {
 2 |     background: @color-box-bg;
 3 |     border-radius: 4px;
 4 |     color: #000;
 5 |     strong {
 6 |         display: block;
 7 |         margin-bottom: 5px;
 8 |     }
 9 |     .inner {
10 |         text-align: center;
11 |     }
12 |     .button {
13 |         margin-bottom: 8px;
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>React 糗百</title>
 5 |     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 6 |     <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />
 7 |   </head>
 8 |   <body>
 9 |     <div id="modal" class="qiubai">
10 |     </div>
11 |     <script src="build/common.js"></script>
12 |     <script src="build/all.js"></script>
13 |   </body>
14 | </html>
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/less/components/item.less:
--------------------------------------------------------------------------------
 1 | .item {
 2 |     padding: 20px;
 3 |     width: 640px;
 4 |     .content-text {
 5 |         font-size: @font-size-big;
 6 |         line-height: 30px;
 7 |         margin-bottom: 30px;
 8 |     }
 9 | 
10 |     .content-img {
11 |         max-width: 400px;
12 |     }
13 | 
14 |     .item-link {
15 |         color: blue;
16 |         font-size: 18px;
17 |         cursor: pointer;
18 |         text-decoration: none;
19 |     }
20 | }
21 | 
22 | .mainList {
23 |     margin-bottom: 40px;
24 | }
25 | 
26 | 


--------------------------------------------------------------------------------
/less/index.less:
--------------------------------------------------------------------------------
 1 | .qiubai {
 2 |     .header {
 3 |         margin-bottom: 20px;
 4 |     }
 5 |     .main-body {
 6 |         width: 980px;
 7 |         min-height: 400px;
 8 | 
 9 |         margin: 0 auto 20px;
10 |         .main {
11 |             width: 680px;
12 |             float: left;
13 |             margin-bottom: 40px;
14 |         }
15 |         .right-bar {
16 |             width: 270px;
17 |             float: right;
18 |             .box {
19 |                 margin-bottom: 20px;
20 |             }
21 |         }
22 |     }
23 | }
24 | 


--------------------------------------------------------------------------------
/components/Item.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Item.js
 3 |  * @author shaiqihe
 4 |  * Created 2015-1-07
 5 |  */
 6 | import React, { PropTypes, Component } from 'react'
 7 | 
 8 | class Item extends Component {
 9 |   constructor(props) {
10 |     super(props);
11 |   }
12 | 
13 |   render() {
14 |     return (
15 |         <div className="box item">
16 |             <p className="content-text">{this.props.text}</p>
17 |             <a className="item-link" target="_blank" href={this.props.link}>{this.props.link}</a>
18 |             <img src={this.props.src}/>
19 |         </div>
20 |     )
21 |   }
22 | }
23 | 
24 | 
25 | export default Item
26 | 


--------------------------------------------------------------------------------
/less/components/footer.less:
--------------------------------------------------------------------------------
 1 | .footer {
 2 |     width: 100%;
 3 |     height: 150px;
 4 |     border-top: 1px solid rgba(0, 0, 0, 0.22);
 5 |     background-color: #fff;
 6 |     text-align: center;
 7 |     color: #999;
 8 |     .content {
 9 |         width: 980px;
10 |         height: 100%;
11 |         margin: 0 auto;
12 |         .top-link {
13 |             margin: 5px auto 10px;
14 |             text-align: center;
15 |             .dark {
16 |                 color: #999;
17 |                 padding: 5px 10px;
18 |                 &:hover {
19 |                     color: #333;
20 |                 }
21 |             }
22 |         }
23 |     }
24 | }
25 | 


--------------------------------------------------------------------------------
/components/LoadNext.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * LoadNext.js
 3 |  * @author shaqihe
 4 |  * Created 2016-1-7
 5 |  */
 6 | 
 7 | import React, { PropTypes, Component } from 'react'
 8 | 
 9 | class LoadNext extends Component {
10 | 
11 |     constructor(props) {
12 |         super(props);
13 |         this.state = {
14 |             load: this.props.load || 1   //0 已无更多 1查看更多
15 |         }
16 |     }
17 | 
18 |     handleClick (e) {
19 |         this.props.callBack();
20 |     }
21 | 
22 |     render() {
23 |         return (
24 |             <div className="box load-next" onClick={this.handleClick.bind(this)}>点击加载更多····</div>
25 |         )
26 |     }
27 | }
28 | 
29 | export default LoadNext
30 | 


--------------------------------------------------------------------------------
/containers/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | 
 3 | import Header from '../components/Header'
 4 | import List from '../components/List'
 5 | import UserPanel from '../components/UserPanel'
 6 | import Footer from '../components/Footer'
 7 | import '../less/main.less';
 8 | 
 9 | class App extends Component {
10 |     render() {
11 |         return (
12 |         <div>
13 |             <Header />
14 |             <div className="main-body clearfix">
15 |                 <List/>
16 |                 <aside className="right-bar">
17 |                     <UserPanel isLogin="0"/>
18 |                 </aside>
19 |             </div>
20 |             <Footer />
21 |         </div>
22 |         )
23 |     }
24 | }
25 | 
26 | export default App
27 | 
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ### 是基于React 开发的一个小demo， 结构比较简单，趁个周末写的
 2 | #### [在线的dome地址是](http://118.192.156.85:8000/)http://118.192.156.85:8000/
 3 | ---------------------
 4 | ### 构建工具是 gulp + webpack
 5 | 
 6 | 
 7 | #### 启动(在这之前要安装node、git、gulp)
 8 | 
 9 | ```
10 | 1.git clone https://github.com/shaqihe/sunweb.git
11 | 2.cd sunweb
12 | 3.npm install
13 | 4.gulp //启动gulp 服务器
14 | 5.因为数据是基于后端的爬虫系统，单独启动 前端 是无法获取数据，方便大家调试，提供一下我开发机的地址，
15 |   配置如下： 在根目录的 gulpfile 文件中 var options = url.parse('XXXXX')；中的XX替换成
16 |   'http://118.192.156.85:3000'。  用着方便，给个star，嘎嘎~
17 |   
18 |   
19 | 6. ！！ 项目的后台代码是： https://github.com/shaqihe/sunshine  也自己启动后台服务，然后设置var options = url.parse('XXXXX') XX为自己后台服务的ip 
20 | 
21 | ```
22 | ```
23 | 说明：
24 | 1.前后端是完全分离了，前端单要起单独的服务器。
25 | 2.后端是node 提供数据，数据是爬虫抓取的，为加快爬虫数据读写，数据存储用的是redis
26 | 3.样式是less
27 | 4.代码采用es6 jsx   用babel编译
28 | 5.文件结构比较简单
29 | ```
30 | 


--------------------------------------------------------------------------------
/components/UserLink.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * UserLink.js
 3 |  * @author shaqihe
 4 |  * Created 2016-1-7
 5 |  */
 6 | 
 7 | import React, {PropTypes, Component} from 'react'
 8 | 
 9 | class UserLink extends Component {
10 |     constructor(props) {
11 |         super(props);
12 |     }
13 | 
14 |     render() {
15 |         if (this.props.userName) {
16 |             return (
17 |                 <div className = "user-link">欢迎{this.props.userName}</div>
18 |             )
19 |         } else {
20 |             return ( < div className = "user-link" >
21 |                     <a href = "#"> 首页 </a>
22 |                     <a href = "#"> 注册 </a>
23 |                     <a href = "#"> 登录 </a>
24 |                 < /div>
25 |             );
26 |         }
27 |     }
28 | }
29 | 
30 | UserLink.propTypes = {
31 |     userName: PropTypes.string
32 | };
33 | 
34 | export default UserLink
35 | 


--------------------------------------------------------------------------------
/components/Header.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Header.js
 3 |  * @author shaqihe
 4 |  * Created 2016-1-7
 5 |  */
 6 | 
 7 | import React, { PropTypes, Component } from 'react'
 8 | import UserLink from './UserLink'
 9 | import { getQueryString } from '../utils/fetch'
10 | 
11 | class Header extends Component {
12 | 
13 |     constructor() {
14 |         super();
15 |         this.state = {
16 |             dataType: getQueryString('dataType') || 'hot'
17 |         }
18 | }
19 |   render() {
20 |     return (
21 |       <header className="header">
22 |         <div className="content">
23 |           <div className="nav">
24 |             <a className={this.state.dataType === 'hot'? 'active nav-a': 'nav-a' } href='?dataType=hot'>热门</a>
25 |             <a className={this.state.dataType === 'image'? 'active nav-a': 'nav-a' } href='?dataType=image'>图片</a>
26 |           </div>
27 |           <UserLink userName=""/>
28 |         </div>
29 |       </header>
30 |     )
31 |   }
32 | }
33 | 
34 | export default Header
35 | 


--------------------------------------------------------------------------------
/utils/fetch.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * fetch.js
 3 |  * @author shaqihe
 4 |  * Created 2015-01-08
 5 |  */
 6 | 
 7 | import AjaxPromise from 'ajax-promise'
 8 | 
 9 | /**
10 |  * 获取远程数据
11 |  *
12 |  * @method fetch
13 |  * @memberof common
14 |  * @type {Function}
15 |  *
16 |  * @param {string} url 远程URL
17 |  * @param {Object} data 发送的数据
18 |  * @param {Object} options 相关配置，参考`上面的ajax`方法
19 |  * @return {Promise} 成功后会自动获取`data`数据
20 |  */
21 | function fetch(url, data) {
22 |     return AjaxPromise.post(url, data);
23 | }
24 | 
25 | /**
26 |  * 获取url里的参数
27 |  *
28 |  * @method getQueryString
29 |  * @memberof common
30 |  * @type {Function}
31 |  *
32 |  * @param {string} 获取参数的名
33 |  * @return {string} 成功后会自动获取`data`数据
34 |  */
35 | function getQueryString(name) {
36 |     let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
37 |     let r = window.location.search.substr(1).match(reg);
38 |     if (r != null) {
39 |         return unescape(r[2]);
40 |     }
41 |     else {
42 |         return null;
43 |     }
44 | }
45 | 
46 | export { fetch , getQueryString }
47 | 


--------------------------------------------------------------------------------
/components/UserPanel.js:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes, Component } from 'react';
 2 | 
 3 | class UserPanel extends Component {
 4 | 
 5 |   render() {
 6 |     if (+this.props.isLogin) {
 7 |       return (
 8 |         <div>
 9 |           你不可能登录
10 |         </div>
11 |       )
12 |     } else {
13 |       return (
14 |         <div className="user-panel box">
15 |           <div className="cell title">
16 |             <strong>此处可以加广告</strong>
17 |           </div>
18 |           <div className="cell">
19 |             <a href="http://mall.baidu.com/">
20 |               <strong>XX产品线</strong>
21 |             </a>
22 |           </div>
23 |           <div className="cell">
24 |             <a href="http://hui.baidu.com/">
25 |               <strong>XX产品线</strong>
26 |             </a>
27 |           </div>
28 |           <div className="cell">
29 |             <a href="/agent/sun/admin/getHot" target="_blank">
30 |               <strong>更新最新数据※快捷操作</strong>
31 |             </a>
32 |           </div>
33 |         </div>
34 |       )
35 |     }
36 |   }
37 | }
38 | 
39 | UserPanel.propTypes = {
40 |   isLogin: PropTypes.string
41 | };
42 | 
43 | export default UserPanel
44 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 xingyesh
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "React-Modal",
 3 |   "version": "1.0.0",
 4 |   "description": "modal component",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "react",
11 |     "drag drop modal",
12 |     "es6",
13 |     "gulp",
14 |     "webpack"
15 |   ],
16 |   "author": "xxxshao",
17 |   "license": "ISC",
18 |   "dependencies": {
19 |     "babel": "^5.8.23",
20 |     "babel-core": "^5.8.25",
21 |     "babel-loader": "^5.3.2",
22 |     "bootstrap": "^3.3.6",
23 |     "gulp": "^3.9.0",
24 |     "gulp-clean": "^0.3.1",
25 |     "gulp-connect": "^2.2.0",
26 |     "gulp-livereload": "^3.8.1",
27 |     "gulp-notify": "^2.2.0",
28 |     "gulp-rename": "^1.2.2",
29 |     "gulp-util": "^3.0.7",
30 |     "react": "^0.14.3",
31 |     "react-dom": "^0.14.3",
32 |     "webpack": "^1.12.9"
33 |   },
34 |   "devDependencies": {
35 |     "ajax-promise": "^0.8.1",
36 |     "connect-modrewrite": "^0.8.2",
37 |     "css-loader": "^0.23.1",
38 |     "file-loader": "^0.8.5",
39 |     "gulp-md5-plus": "^0.1.9",
40 |     "gulp-uglify": "^1.5.1",
41 |     "less": "^2.5.3",
42 |     "less-loader": "^2.2.2",
43 |     "proxy-middleware": "^0.15.0",
44 |     "style-loader": "^0.13.0",
45 |     "url-loader": "^0.5.7"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/less/components/header.less:
--------------------------------------------------------------------------------
 1 | .header {
 2 |     width: 100%;
 3 |     height: 82px;
 4 |     color: @color-hd-text;
 5 |     background-color: @color-hd;
 6 |     .content {
 7 |         width: 980px;
 8 |         margin: 0 auto;
 9 |         height: 100%;
10 |         line-height: 82px;
11 |         img {
12 |             display: inline-block;
13 |         }
14 | 
15 |         .nav {
16 |             font-family: "Microsoft YaHei",Arial,"Hiragino Sans GB";
17 |             float: left;
18 |             margin: 0 60px;
19 |         }
20 | 
21 |         .nav-a {
22 |             display: inline-block;
23 |             margin-right: 1px;
24 |             padding: 0 14px;
25 |             text-align: center;
26 |             line-height: 82px;
27 |             font-size: 16px;
28 |             color: #7a4624;
29 |             height: 78px;
30 |             border-bottom: 4px solid #ffd52b;
31 |             text-decoration: none;
32 |             &:hover {
33 |                 background: #ffe36f;
34 |                 border-bottom-color: #7a4624;
35 |             }
36 |         }
37 |         .active {
38 |             background: #ffe36f;
39 |             border-bottom-color: #7a4624;
40 |         }
41 |     }
42 | 
43 |     .user-link {
44 |         display: inline-block;
45 |         float: right;
46 |     }
47 | }
48 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require("path");
 2 | var webpack = require('webpack');
 3 | var node_modules_dir = path.resolve(__dirname, 'node_modules');
 4 | 
 5 | // process.env.NODE_ENV  product or dev
 6 | 
 7 | var config = {
 8 |     devtool:false,
 9 |     entry: {
10 |         admin : path.resolve(__dirname, 'containers/Admin'),
11 |         all: './index',
12 |     },
13 |     output: {
14 |         path: path.resolve(__dirname, 'build/'),
15 |         filename: "[name].js"
16 |         ,publicPath: "/build/"
17 |     },
18 | 
19 |     module: {
20 |         loaders: [
21 |             {
22 |                 test: /\.js?$/,
23 |                 loader: 'babel-loader',
24 |                 exclude: [node_modules_dir]
25 |             },{
26 |                   test: /\.json$/,
27 |                   loaders: ['json'],
28 |                   exclude: /node_modules/
29 |             },{
30 |                   test: /\.(png|jpg)$/,
31 |                   loader: 'url?limit=25000'
32 |             }, {
33 |                   test: /\.less/,
34 |                   loader: 'style-loader!css-loader!less-loader'
35 |             },
36 |         ]
37 |     },
38 |     resolve: {
39 |         extensions: ['', '.js', '.json', '.jsx', 'less']
40 |     },
41 |     //压缩 提前common文件
42 |     plugins: [
43 |         new webpack.optimize.UglifyJsPlugin({
44 |             mangle: {
45 |                 except: ['import', '$', 'export']
46 |             },
47 |             compress: {
48 |                 warnings: false
49 |             }
50 |         }),
51 |         new webpack.optimize.CommonsChunkPlugin('common.js'),
52 |     ]
53 | };
54 | module.exports = config;
55 | 


--------------------------------------------------------------------------------
/components/Footer.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Footer.js
 3 |  * @author shaqihe
 4 |  * Created 2016-1-7
 5 |  */
 6 | 
 7 | import React, { Component, PropTypes } from 'react'
 8 | 
 9 | export default class Footer extends Component {
10 |   render() {
11 |     return (
12 |       <div className="footer">
13 |         <div className="content">
14 |           <div className="inner">
15 |             <div>
16 |               <a href="https://www.digitalocean.com/?refcode=1b51f1a7651d" target="_blank">
17 |                 <img src="http://v2ex.com/static/img/do.png" width="64" border="0" alt="DigitalOcean"/>
18 |               </a>
19 |             </div>
20 |             <div className="top-link">
21 |               <strong>
22 |                 <a href="/about" className="dark" target="_self">关于</a>
23 |                 <a href="/faq" className="dark" target="_self">FAQ</a>
24 |                 <a href="/p/7v9TEc53" className="dark" target="_self">API</a>
25 |                 <a href="/mission" className="dark" target="_self">我们的愿景</a>
26 |                 <a href="/ip" className="dark" target="_self">IP 查询</a>
27 |                 <a href="https://workspace.v2ex.com/" className="dark" target="_blank">工作空间</a>
28 |                 <a href="/advertise" className="dark" target="_self">广告投放</a>
29 |                 <a href="/advertise/2015.html" className="dark" target="_self">鸣谢</a>
30 |                 <a href="/start" className="dark" target="_blank">上网首页</a>
31 |               </strong>
32 |               <a className="select-language" href="/select/language">
33 |                 <img src="http://v2ex.com/static/img/lang_zhcn_32.png" width="20"/></a>
34 |             </div>
35 |             <span className="f12 gray"><a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">沪ICP备XXXX号-1</a></span>
36 |           </div>
37 |         </div>
38 |       </div>
39 |     )
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/components/List.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Main.js.js
 3 |  * @author shaqihe
 4 |  * Created 2015-1-7
 5 |  */
 6 | 
 7 | import React, { PropTypes, Component } from 'react'
 8 | import dao from '../api/dao'
 9 | import Item from './Item'
10 | import LoadNext from './LoadNext'
11 | import { getQueryString } from '../utils/fetch'
12 | 
13 | 
14 | class List extends Component {
15 |   constructor() {
16 |         super();
17 |         this.state = {
18 |             data: [{
19 |                 text: '本项目是个简单的React的Demo，代码已放在github上，欢迎点赞。',
20 |                 link: 'https://github.com/shaqihe/sunweb.git'
21 |             }],
22 |             count: -1,
23 |             allPage: 0,
24 |             dataType: getQueryString('dataType') || 'hot'
25 |         }
26 |     }
27 | 
28 |     getHotData (dataType) {
29 |         dao.hotData({pageNo: this.state.count + 1, dataType: dataType})
30 |         .then((res)=>{
31 |             let lastGist = res.result;
32 |             if (lastGist.length > 0) {
33 |                 let listData = this.state.data.concat(lastGist);
34 |                 this.setState({
35 |                     data: listData,
36 |                     count: res.page.pageNo,
37 |                     allPage: res.page.allPage
38 |                 });
39 |             }
40 |         }).catch((err)=>{
41 |             console.log(err);
42 |         });
43 |     }
44 | 
45 |     componentDidMount() {
46 |         this.getHotData(this.state.dataType);
47 |     }
48 | 
49 |     nextLoadClick () {
50 |         this.getHotData(this.state.dataType);
51 |     }
52 | 
53 |     render() {
54 |         return (
55 |         <div className="main">
56 |             {this.state.data.map((topic, index) =>
57 |                <Item {...topic} key={index}/>
58 |             )}
59 |             <LoadNext load='1' callBack={this.nextLoadClick.bind(this)}/>
60 |         </div>
61 |         )
62 |     }
63 | }
64 | 
65 | export default List
66 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require("gulp");
 2 | var webpack = require("webpack");
 3 | var gutil = require('gulp-util');
 4 | var clean = require('gulp-clean');
 5 | var connect = require('gulp-connect');
 6 | var webpackConfig = require('./webpack.config.js');
 7 | var livereload = require('gulp-livereload');
 8 | var md5 = require('gulp-md5-plus');
 9 | var modRewrite = require('connect-modrewrite');
10 | 
11 | // process.env.NODE_ENV  product or dev
12 | // 打包之前清除文件里的旧文件
13 | gulp.task('clean', function() {
14 |     return gulp.src('build/', {
15 |             read: false
16 |         })
17 |         .pipe(clean());
18 | });
19 | 
20 | //执行webpack
21 | gulp.task('webpack', function() {
22 |     webpack(webpackConfig, function(err, stats) {
23 |         if (err) throw new gutil.PluginError("webpack", err);
24 |         gutil.log("[webpack]", 'webpack is  OK!');
25 |         //gulp.start(['addmd5']);   //开发环境不加MD5，因为watch 监控，MD5实时打包就出错误！
26 |     })
27 | });
28 | 
29 | //启动服务器
30 | gulp.task("connect", function() {
31 |     connect.server({
32 |         port: 8000,
33 |         livereload: true,
34 |          middleware: function (connect, o) {
35 |             return [
36 |                 (function () {
37 |                     var url = require('url');
38 |                     var proxy = require('proxy-middleware');
39 |                     var options = url.parse('http://127.0.0.1:3000');
40 |                     options.route = '/agent';  //已agent开头的请求，转发到数据端
41 |                     return proxy(options);
42 |                 })(),
43 |                 modRewrite([
44 |                     '!\\.html|\\.js|\\.css|\\.swf|\\.jp(e?)g|\\.png|\\.gif|\\.eot|\\.woff|\\.ttf|\\.svg$ /index.html'
45 |                 ])
46 |             ];
47 |         }
48 |     });
49 | });
50 | 
51 | //压缩、增加MD5
52 | gulp.task('addmd5', function(done) {
53 |     gulp.src('build/*.js')
54 |         .pipe(md5(10, './*.html'))
55 |         .pipe(gulp.dest('build'))
56 |         .on('end', done);
57 | });
58 | 
59 | //监控文件
60 | gulp.task("watch", function() {
61 |     livereload.listen();
62 |     gulp.watch('components/**/*.js', ['webpack']).on('change', livereload.changed);
63 |     gulp.watch('containers/**/*.js', ['webpack']).on('change', livereload.changed);
64 |     gulp.watch('less/**/*.less', ['webpack']).on('change', livereload.changed);
65 | });
66 | 
67 | gulp.task('default', ['clean', 'webpack'], function() {
68 |     gulp.start(['connect', 'watch']);
69 | });
70 | 


--------------------------------------------------------------------------------
/modal.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html>
 4 |    <link rel="stylesheet" type="text/css" href="../css/slider.css">
 5 |   <body>
 6 |   <style type="text/css">
 7 |     .overlay {
 8 |       left: 0;
 9 |       top: 0;
10 |       width: 100%;
11 |       height: 100%;
12 |       opacity: 0.3;
13 |       z-index: 9;
14 |       position: fixed;
15 |       background-color: black;
16 |     }
17 | 
18 |     .modal {
19 |       z-index: 10;
20 |       position: fixed;
21 |       left:25%;
22 |       top:25%;
23 |       background: white;
24 |       height: 300px;
25 |       width: 400px;
26 |       border: 1px solid #ddd;
27 |     }
28 | 
29 |     .hide {
30 |       display: none;
31 |     }
32 |     .show {
33 |       display: block;
34 |     }
35 |   </style>
36 | 	<div>
37 | 		<button id='open'>open modal</button>
38 | 	</div>
39 | 	<div id='isDisplay' class='hide'>
40 | 			<div class='overlay'>overlay</div>
41 | 			<div class='modal'>
42 | 				<div>title <button id='close'>close</button> </div>
43 | 				<div>body</div>
44 | 			</div>
45 | 		</div> 
46 |   </body>
47 | 
48 |   <script>
49 |   	var open = document.getElementById('open');
50 |   	open.onclick = function(event) {
51 |   		document.getElementById('isDisplay').className='show'
52 |   	}
53 |   	var close = document.getElementById('close');
54 |   	close.onclick = function(event) {
55 |   		document.getElementById('isDisplay').className='hide'
56 |   	}
57 |   	var modal = document.getElementsByClassName('modal')[0];
58 |   	var x = 0;
59 |   	var y = 0;
60 |   	function mouseMove(event) {
61 |   		var diffX = event.pageX - x;
62 |   		var diffY = event.pageY - y;
63 |   		x = event.pageX;
64 |   		y = event.pageY;
65 |   		var dropLeft = modal.offsetLeft + diffX;
66 |   		var dropTop = modal.offsetTop + diffY
67 |   		if ( modal.offsetLeft + modal.offsetWidth + diffX >= document.documentElement.clientWidth || dropLeft <= 0) {
68 |   			unbind(modal, 'mousemove', mouseMove, false);
69 |   			return;
70 |   		}
71 |   		if (modal.offsetTop + modal.offsetHeight + diffY >= document.documentElement.clientHeight || dropTop <= 0) {
72 |   			unbind(modal, 'mousemove', mouseMove, false);
73 |   			return;
74 |   		}
75 |   		modal.style.left = dropLeft + 'px';
76 |   		modal.style.top = dropTop + 'px';
77 |   	}
78 |   	function unbind(object, method, func, bool) {
79 |   		object.removeEventListener(method, func, bool);
80 |   	}
81 |   	modal.onmousedown = function(event) {
82 |   		console.log(event.type);
83 |   		x = event.pageX;
84 |   		y = event.pageY;
85 |   		modal.addEventListener('mousemove', mouseMove, false);
86 |   	}
87 | 
88 |   	modal.onmouseup = function(event) {
89 |   		console.log(event.type);
90 |   		// modal.removeEventListener('mousemove', mouseMove(event), false)
91 |   		unbind(modal, 'mousemove', mouseMove, false);
92 |   	}
93 |   	
94 |   </script>
95 | </html>
96 | 
97 | 
98 | 


--------------------------------------------------------------------------------
/less/global.less:
--------------------------------------------------------------------------------
  1 | body,
  2 | div,
  3 | dl,
  4 | dt,
  5 | dd,
  6 | ul,
  7 | ol,
  8 | li,
  9 | h1,
 10 | h2,
 11 | h3,
 12 | h4,
 13 | h5,
 14 | h6,
 15 | pre,
 16 | code,
 17 | form,
 18 | fieldset,
 19 | legend,
 20 | input,
 21 | button,
 22 | textarea,
 23 | p,
 24 | blockquote,
 25 | th,
 26 | td {
 27 |     margin: 0;
 28 |     padding: 0;
 29 | }
 30 | 
 31 | td,
 32 | th,
 33 | caption {
 34 |     font-size: 14px;
 35 | }
 36 | 
 37 | h1,
 38 | h2,
 39 | h3,
 40 | h4,
 41 | h5,
 42 | h6 {
 43 |     font-weight: normal;
 44 |     font-size: 100%;
 45 | }
 46 | 
 47 | address,
 48 | caption,
 49 | cite,
 50 | code,
 51 | dfn,
 52 | em,
 53 | strong,
 54 | th,
 55 | var {
 56 |     font-style: normal;
 57 |     font-weight: normal;
 58 | }
 59 | 
 60 | a {
 61 |     color: #555;
 62 |     text-decoration: none;
 63 | }
 64 | 
 65 | a:hover {
 66 |     text-decoration: underline;
 67 | }
 68 | 
 69 | img {
 70 |     border: none;
 71 | }
 72 | 
 73 | ol,
 74 | ul,
 75 | li {
 76 |     list-style: none;
 77 | }
 78 | 
 79 | input,
 80 | textarea,
 81 | select,
 82 | button {
 83 |     font: 14px Verdana, Helvetica, Arial, sans-serif;
 84 | }
 85 | 
 86 | table {
 87 |     border-collapse: collapse;
 88 | }
 89 | 
 90 | html {
 91 |     overflow-y: scroll;
 92 | }
 93 | 
 94 | .clearfix:after {
 95 |     content: ".";
 96 |     display: block;
 97 |     height: 0;
 98 |     clear: both;
 99 |     visibility: hidden;
100 | }
101 | 
102 | .clearfix {
103 |     *zoom: 1;
104 | }
105 | 
106 | //font
107 | @font-size-small: 12px;
108 | @font-size-normal: 14px;
109 | @font-size-big: 16px;
110 | //color
111 | @color-text: #333;
112 | @color-sm-text: #999;
113 | @color-hd-text: #7a4624;
114 | @color-bg: #f3f1ec;
115 | @color-hd: #ffd600;
116 | @color-box-bg: #fff;
117 | body {
118 |     font-size: @font-size-normal;
119 |     color: @color-text;
120 |     background: @color-bg;
121 |     min-height: 600px;
122 | }
123 | 
124 | a {
125 |     color: @color-text;
126 |     text-decoration: none;
127 |     &:hover {
128 |         color: #4d5256;
129 |         text-decoration: underline;
130 |     }
131 |     &:link,
132 |     &:active,
133 |     &:visited {
134 |         color: @color-text;
135 |     }
136 | }
137 | 
138 | .box {
139 |     margin: 10px 0;
140 |     background-color: @color-box-bg;
141 |     border-radius: 3px;
142 |     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
143 |     border-bottom: 1px solid @color-bg;
144 | }
145 | 
146 | .cell {
147 |     padding: 10px;
148 |     font-size: 14px;
149 |     line-height: 120%;
150 |     text-align: center;
151 |     border-bottom: 1px solid @color-bg;
152 | }
153 | 
154 | .title {
155 |     color: blue;
156 |     font-size: 16px;
157 |     font-family: 'LiSu';
158 | }
159 | 
160 | .clearfix {
161 |     &:after {
162 |         content: "";
163 |         display: table;
164 |         clear: both;
165 |     }
166 |     *zoom: 1;
167 | }
168 | 


--------------------------------------------------------------------------------