init

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,jsx,html,sass}]
+charset = utf-8
+indent_style = tab
+indent_size = 2
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# Ignore build files
+node_modules

README.md

@@ -0,0 +1,68 @@
+# React-Demo
+
+### 基于Reactjs && Node 通讯的简单演示
+
+* Reactjs && ES6 && webpack构建移动端京东首页
+* 基于文件系统的Node.js服务端
+
+![Mou icon](./jd.png)
+
+## 安装与运行程序
+
+克隆项目
+
+```
+> $ git clone https://github.com/CanFoo/react.git
+```
+
+分别进入react目录和server目录下安装依赖包
+
+```
+> $ npm install
+```
+
+在server目录下启动后台服务
+
+```
+> $ npm run start
+```
+
+在react目录下启动webpack服务
+
+```
+> $ npm run dev
+```
+
+发布项目文件命令
+
+```
+> $ npm run build
+```
+
+执行完`npm run dev`命令后，打开浏览器 `http://localhost:8080/`运行项目，后台服务端口为 `3000`
+
+## 后台接口（jsonp请求）
+轮播图模块
+```
+http://localhost:3000/data/swiper
+```
+
+更多服务功能
+```
+http://localhost:3000/data/otherapp
+```
+
+秒杀折扣
+```
+http://localhost:3000/data/spike
+```
+
+更多种类选择
+```
+http://localhost:3000/data/more
+```
+
+猜你喜欢
+```
+http://localhost:3000/data/like
+```

app/components/header.css

@@ -0,0 +1,16 @@
+
+#header .swiper-pagination-bullet {
+	width: 6px;
+	height: 6px;
+	border: 1px solid #fff;
+	background-color: transparent;
+	opacity: 1;
+}
+
+#header .swiper-pagination-bullet-active {
+	background-color: #fff;
+}
+
+.img {
+	width: 100%
+}

app/components/header.jsx

@@ -0,0 +1,61 @@
+
+require("./header.css");
+require('../lib/swiper.min.css');
+let Swiper = require('../lib/swiper.min.js');
+let jsonp = require('../util/jsonp.js');
+
+import React from 'react';     
+
+let Header = React.createClass({
+	getInitialState: function() {
+        return {
+        	imgUrls: [],
+        };
+ 	},
+	componentDidMount: function() {
+		jsonp(this.props.source, "", "callback", (data) => {
+			if(data.status) {
+				//如果组件渲染到了 DOM 中，isMounted() 返回 true。
+				//可以使用该方法保证 setState() 和 forceUpdate() 
+				//在异步场景下的调用不会出错。
+				if(this.isMounted()) {
+					this.setState({
+						imgUrls: data.data,
+					})
+				    new Swiper ('#header .swiper-container', {
+					    loop: true,
+					    pagination: '.swiper-pagination',
+					    paginationClickable: true,
+					    autoplay : 3000,
+						autoplayDisableOnInteraction : false,		    
+					}) 
+				}	
+			}else {
+				alert(data.msg);
+			}
+		}); 
+	},
+
+	render: function () {
+		let countId = 0;
+	    return (
+	      <div id="header">
+    		<div className="swiper-container">
+			    <div className="swiper-wrapper">
+			    	{
+			    		this.state.imgUrls.map((url) => {
+			    			return <div className="swiper-slide" key={"header" + countId++} >
+			    						<img className="img" src={url} />
+			    				   </div>
+			    		})
+			    	}
+			    </div>
+				<div className="swiper-pagination"></div>
+			</div>
+	      </div>
+	    );
+	  }
+})
+
+module.exports = Header;
+

app/components/like.css

@@ -0,0 +1,71 @@
+
+#like {
+	background-color: #fff;
+	font-size: 0;
+	-webkit-text-size-adjust:none;
+	padding-top: 3px;
+}
+
+#like p {
+	font-size: 14px;
+    color: #7f7f7f;
+    padding-left: 5px;
+}
+
+.like_content {
+	display: inline-block;
+	width: 50%;
+	text-align: center;
+}
+
+.like_link, .like_desc, .like_price{
+	width: 95%;
+	display: inline-block;
+
+}
+
+.like_desc {
+	overflow: hidden;
+	font-size: 12px;
+	text-align: left;
+	line-height: 14px;
+	color: #333;
+	padding-bottom: 5px;
+	border-bottom: 1px solid #E5E6E6;
+}
+
+.like_desc span {
+	display: -webkit-box;
+	height: 28px;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+}
+
+.like_price {
+	margin: 4px 0 16px 0;
+}
+
+.like_price span {
+	font-size: 14px;
+	color: #f15353;
+	display: table-cell;
+	vertical-align: middle;
+	float: left;
+}
+
+.like_price a {
+	color: #999;
+}
+
+.like_price div {
+	border: 1px solid #999;
+	border-radius: 3px;
+	display: inline-block;
+	font-size: 12px;
+	color: #999;
+	padding: 2px 6px;
+	float: right;
+}
+
+

app/components/like.jsx

@@ -0,0 +1,58 @@
+
+require('./like.css');
+let jsonp = require('../util/jsonp.js');
+import React from 'react'; 
+
+let Like = React.createClass({
+	getInitialState: function() {
+		return {
+			stores: [],
+		}
+	},
+
+	componentDidMount: function() {
+		jsonp(this.props.source, "", "callback", (data) => {
+			if(data.status) {
+				if(this.isMounted()) {
+					this.setState({
+						stores: data.data,
+					});
+				}
+			}else {
+				alert(data.msg);
+				reject("get data error!")
+			}
+		})
+	},
+
+	render: function() {
+		let countId = 0;
+		return (
+			<div id="like">
+				<p>猜你喜欢</p>
+				{
+					this.state.stores.map((item) => {
+						return <div className="like_content" key={"like" + countId++}>
+									<div className="like_link">
+										<a href={ item.url }>
+											<img src={ item.icon } alt=""/>
+										</a>
+									</div>
+									<div className="like_desc">
+										<span>
+											{ item.desc }		
+										</span>
+									</div>
+									<div className="like_price">
+										<span>¥{ item.price }</span>
+										<div><a href={ item.more }>看相似</a></div>
+									</div>
+								</div>
+					})
+				}
+			</div>
+		);
+	}
+})
+
+module.exports = Like;

app/components/more.css

@@ -0,0 +1,52 @@
+
+img {
+	width: 100%;
+}
+
+#more {
+	background-color: #fff;
+}
+
+.more_link {
+	width: 33%;
+	border-width: 1px 1px 1px 0;
+	border-style: solid;
+	border-color: #f3f5f7;
+	float: left;
+}
+
+.more_link:last-child {
+	border-right: 0px;
+}
+
+.more_top:after, .more_middle:after, .more_bottom:after{
+	content: "";
+	display: block;
+	clear: both;
+}
+
+.more_style {
+	width: 49.8%;
+	float: left;
+}
+
+.more_middle div:first-child {
+	border-right: 1px solid #f3f5f7;
+}
+
+#more .swiper-pagination-bullet {
+	width: 6px;
+	height: 6px;
+	border: 1px solid #fff;
+	background-color: transparent;
+	opacity: 1;
+}
+
+#more .swiper-pagination-bullet-active {
+	background-color: #fff;
+}
+
+.more_bottom {
+	padding: 8px;
+	background-color: #f3f5f7;
+}