diff --git a/.gitignore b/.gitignore index fbeebc0..e759cd2 100644 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,4 @@ build/Release node_modules # Ignore build files +node_modules diff --git a/README.md b/README.md index 415d564..049aa94 100644 --- a/README.md +++ b/README.md @@ -1,46 +1,22 @@ -# React-Demo +# React构建京东首页 -### 基于reactjs && Node 通讯的简单演示 +### 基于Reactjs && Node 通讯的简单演示 * Reactjs && ES6 && webpack构建移动端京东首页 * 基于文件系统的Node.js服务端 - - -### 安装与运行程序 - -克隆项目 - -``` -> $ git clone https://github.com/CanFoo/react.git -``` - -分别进入react目录和server目录下安装依赖包 - -``` -> $ npm install -``` - -在server目录下启动后台服务 - -``` -> $ npm run start -``` - -在工程目录下启动webpack服务 - -``` -> $ npm run dev -``` - -发布项目文件命令 - -``` -> $ npm run build -``` - -执行完`npm run dev`命令后,打开浏览器 `http://localhost:8080/`运行项目,后台服务端口为 `3000` - +### 阅读对象 +* 初学react童鞋 +* 想要入门nodejs的童鞋 +## 如何使用 +1. 下载项目 +2. 打开一个终端窗口A,进入到react目录执行`npm install`,安装依赖包。 +3. 打开另一个终端窗口B,进入到server目录只想`npm install`,安装依赖包。 +4. 在server目录里(即B终端窗口)执行`npm run start`,启动后台服务。 +5. 在react目录里(即A终端口)执行`npm run dev`,启动webpakc开发服务。 +6. 执行完`npm run dev`命令后,打开浏览器 `http://localhost:8080/`运行项目,后台服务端口为 `3000` +## 效果预览 + diff --git a/app/components/header.jsx b/app/components/header.js similarity index 78% rename from app/components/header.jsx rename to app/components/header.js index 33989fc..228643b 100644 --- a/app/components/header.jsx +++ b/app/components/header.js @@ -1,11 +1,9 @@ - -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'; - +import './header.css'; +import '../lib/swiper.min.css'; +import React from 'react'; +import Swiper from '../lib/swiper.min.js' +import fetchJsonp from 'fetch-jsonp'; + let Header = React.createClass({ getInitialState: function() { return { @@ -13,7 +11,9 @@ let Header = React.createClass({ }; }, componentDidMount: function() { - jsonp(this.props.source, "", "callback", (data) => { + fetchJsonp(this.props.source).then((response) => { + return response.json(); + }).then((data) => { if(data.status) { //如果组件渲染到了 DOM 中,isMounted() 返回 true。 //可以使用该方法保证 setState() 和 forceUpdate() @@ -33,7 +33,7 @@ let Header = React.createClass({ }else { alert(data.msg); } - }); + }) }, render: function () { @@ -57,5 +57,8 @@ let Header = React.createClass({ } }) +Header.propTypes = { + source: React.PropTypes.string.isRequired, +} module.exports = Header; diff --git a/app/components/like.jsx b/app/components/like.js similarity index 80% rename from app/components/like.jsx rename to app/components/like.js index d20c172..9555349 100644 --- a/app/components/like.jsx +++ b/app/components/like.js @@ -1,7 +1,6 @@ - -require('./like.css'); -let jsonp = require('../util/jsonp.js'); +import './like.css'; import React from 'react'; +import fetchJsonp from 'fetch-jsonp'; let Like = React.createClass({ getInitialState: function() { @@ -11,7 +10,9 @@ let Like = React.createClass({ }, componentDidMount: function() { - jsonp(this.props.source, "", "callback", (data) => { + fetchJsonp(this.props.source).then((response) => { + return response.json(); + }).then((data) => { if(data.status) { if(this.isMounted()) { this.setState({ @@ -55,4 +56,7 @@ let Like = React.createClass({ } }) -module.exports = Like; \ No newline at end of file +Like.propTypes = { + source: React.PropTypes.string.isRequired, +} +module.exports = Like; diff --git a/app/components/more.jsx b/app/components/more.js similarity index 55% rename from app/components/more.jsx rename to app/components/more.js index ed75f5a..374ef1f 100644 --- a/app/components/more.jsx +++ b/app/components/more.js @@ -1,44 +1,43 @@ +import './more.css'; +import '../lib/swiper.min.css'; +import Swiper from '../lib/swiper.min.js'; +import fetchJsonp from 'fetch-jsonp'; +import React, { Component } from 'react' -require('./more.css'); -require('../lib/swiper.min.css'); -let Swiper = require('../lib/swiper.min.js'); -let jsonp = require('../util/jsonp.js'); -import React from 'react'; - -var More = React.createClass({ - getInitialState: function() { - return { - more1: [], - more2: [], - more3: [], - }; - }, +class More extends Component { + constructor(props) { + super(props); + this.state = { + more1: [], + more2: [], + more3: [] + } + } - componentDidMount: function() { - jsonp(this.props.source, "", "callback", (data) => { + componentDidMount() { + fetchJsonp(this.props.source).then((response) => { + return response.json(); + }).then((data) => { if(data.status) { - - if(this.isMounted()) { - this.setState({ - more1: data.data.slice(0,3), - more2: data.data.slice(3,5), - more3: data.data.slice(5,7), - }) - new Swiper ('.more_bottom .swiper-container', { - loop: true, - pagination: '.swiper-pagination', - paginationClickable: true, - autoplay : 2000, - autoplayDisableOnInteraction : false, - }) - } + this.setState({ + more1: data.data.slice(0,3), + more2: data.data.slice(3,5), + more3: data.data.slice(5,7), + }) + new Swiper ('.more_bottom .swiper-container', { + loop: true, + pagination: '.swiper-pagination', + paginationClickable: true, + autoplay : 2000, + autoplayDisableOnInteraction : false, + }) }else { alert(data.msg); } - }); - }, + }) + } - render: function() { + render() { let countId = 0; return ( @@ -84,6 +83,9 @@ var More = React.createClass({ ); } -}) +} -module.exports = More; \ No newline at end of file +More.propTypes = { + source: React.PropTypes.string.isRequired, +} +module.exports = More; diff --git a/app/components/otherapp.jsx b/app/components/otherapp.js similarity index 74% rename from app/components/otherapp.jsx rename to app/components/otherapp.js index 26e5052..0e345f4 100644 --- a/app/components/otherapp.jsx +++ b/app/components/otherapp.js @@ -1,8 +1,6 @@ - -require('./otherapp.css'); -let jsonp = require('../util/jsonp.js'); - +import './otherapp.css'; import React from 'react'; +import fetchJsonp from 'fetch-jsonp'; let Otherapp = React.createClass({ getInitialState: function() { @@ -12,7 +10,9 @@ let Otherapp = React.createClass({ }, componentDidMount: function() { - jsonp(this.props.source, "", "callback", (data) => { + fetchJsonp(this.props.source).then((response) => { + return response.json(); + }).then((data) => { if(data.status) { if(this.isMounted()) { this.setState({ @@ -48,4 +48,7 @@ let Otherapp = React.createClass({ } }) -module.exports = Otherapp; \ No newline at end of file +Otherapp.propTypes = { + source: React.PropTypes.string.isRequired, +} +module.exports = Otherapp; diff --git a/app/components/search.jsx b/app/components/search.js similarity index 93% rename from app/components/search.jsx rename to app/components/search.js index 65b29d4..10650f9 100644 --- a/app/components/search.jsx +++ b/app/components/search.js @@ -1,5 +1,5 @@ -require('./search.css'); +import './search.css'; import React from 'react'; let Search = React.createClass({ @@ -9,12 +9,12 @@ let Search = React.createClass({ } }, componentDidMount: function() { - let _this = this; + window.onscroll = (event) => { let realHeight = document.documentElement.scrollTop || document.body.scrollTop; let optatic = 0.8 * (realHeight/142); if(optatic <= 0.8 ) { - _this.setState({ + this.setState({ bg: `rgba(234, 44, 44, ${optatic})`, }) } diff --git a/app/components/spike.jsx b/app/components/spike.js similarity index 91% rename from app/components/spike.jsx rename to app/components/spike.js index ed52856..3e47ffc 100644 --- a/app/components/spike.jsx +++ b/app/components/spike.js @@ -1,6 +1,5 @@ - -require('./spike.css'); -let jsonp = require('../util/jsonp.js'); +import './spike.css'; +import fetchJsonp from 'fetch-jsonp'; import React from 'react'; let Spike = React.createClass({ @@ -45,7 +44,9 @@ let Spike = React.createClass({ componentDidMount: function() { let getData = () => { let promise = new Promise((resolve, reject) => { - jsonp(this.props.source, "", "callback", (data) => { + fetchJsonp(this.props.source).then((response) => { + return response.json(); + }).then((data) => { if(data.status) { if(this.isMounted()) { this.setState({ @@ -58,7 +59,7 @@ let Spike = React.createClass({ alert(data.msg); reject("get data error!") } - }) + }); }) return promise; } @@ -120,7 +121,6 @@ let Spike = React.createClass({
¥{item.sprice}
¥{item.price}
- }) } @@ -130,4 +130,7 @@ let Spike = React.createClass({ } }) -module.exports = Spike; \ No newline at end of file +Spike.propTypes = { + source: React.PropTypes.string.isRequired, +} +module.exports = Spike; diff --git a/app/images/like/like1.jpg b/app/images/like/like1.jpg deleted file mode 100644 index f35ab22..0000000 Binary files a/app/images/like/like1.jpg and /dev/null differ diff --git a/app/images/like/like10.jpg b/app/images/like/like10.jpg deleted file mode 100644 index 8092806..0000000 Binary files a/app/images/like/like10.jpg and /dev/null differ diff --git a/app/images/like/like2.jpg b/app/images/like/like2.jpg deleted file mode 100644 index 5421c6e..0000000 Binary files a/app/images/like/like2.jpg and /dev/null differ diff --git a/app/images/like/like3.jpg b/app/images/like/like3.jpg deleted file mode 100644 index 953acd7..0000000 Binary files a/app/images/like/like3.jpg and /dev/null differ diff --git a/app/images/like/like4.jpg b/app/images/like/like4.jpg deleted file mode 100644 index f5e858f..0000000 Binary files a/app/images/like/like4.jpg and /dev/null differ diff --git a/app/images/like/like5.jpg b/app/images/like/like5.jpg deleted file mode 100644 index d26998c..0000000 Binary files a/app/images/like/like5.jpg and /dev/null differ diff --git a/app/images/like/like6.jpg b/app/images/like/like6.jpg deleted file mode 100644 index 6a5abe6..0000000 Binary files a/app/images/like/like6.jpg and /dev/null differ diff --git a/app/images/like/like7.jpg b/app/images/like/like7.jpg deleted file mode 100644 index 0a3889d..0000000 Binary files a/app/images/like/like7.jpg and /dev/null differ diff --git a/app/images/like/like8.jpg b/app/images/like/like8.jpg deleted file mode 100644 index d28834c..0000000 Binary files a/app/images/like/like8.jpg and /dev/null differ diff --git a/app/images/like/like9.jpg b/app/images/like/like9.jpg deleted file mode 100644 index e7b9e60..0000000 Binary files a/app/images/like/like9.jpg and /dev/null differ diff --git a/app/images/more/more1.jpg b/app/images/more/more1.jpg deleted file mode 100644 index 514c557..0000000 Binary files a/app/images/more/more1.jpg and /dev/null differ diff --git a/app/images/more/more2.jpg b/app/images/more/more2.jpg deleted file mode 100644 index d1eb5de..0000000 Binary files a/app/images/more/more2.jpg and /dev/null differ diff --git a/app/images/more/more3.jpg b/app/images/more/more3.jpg deleted file mode 100644 index 0d6105c..0000000 Binary files a/app/images/more/more3.jpg and /dev/null differ diff --git a/app/images/more/more4.jpg b/app/images/more/more4.jpg deleted file mode 100644 index 472e128..0000000 Binary files a/app/images/more/more4.jpg and /dev/null differ diff --git a/app/images/more/more5.jpg b/app/images/more/more5.jpg deleted file mode 100644 index d0e277a..0000000 Binary files a/app/images/more/more5.jpg and /dev/null differ diff --git a/app/images/more/more6.jpg b/app/images/more/more6.jpg deleted file mode 100644 index affe380..0000000 Binary files a/app/images/more/more6.jpg and /dev/null differ diff --git a/app/images/more/more7.jpg b/app/images/more/more7.jpg deleted file mode 100644 index c2c1606..0000000 Binary files a/app/images/more/more7.jpg and /dev/null differ diff --git a/app/images/spike1.jpg b/app/images/spike1.jpg deleted file mode 100644 index 9b40007..0000000 Binary files a/app/images/spike1.jpg and /dev/null differ diff --git a/app/images/spike2.jpg b/app/images/spike2.jpg deleted file mode 100644 index af61e3a..0000000 Binary files a/app/images/spike2.jpg and /dev/null differ diff --git a/app/images/spike3.jpg b/app/images/spike3.jpg deleted file mode 100644 index 9e32f61..0000000 Binary files a/app/images/spike3.jpg and /dev/null differ diff --git a/app/util/jsonp.js b/app/util/jsonp.js deleted file mode 100644 index 347ba53..0000000 --- a/app/util/jsonp.js +++ /dev/null @@ -1,54 +0,0 @@ - -;(function () { - /** - * JSONP操作 - * @param url : 请求的url - * @param data : 发送数据 - * @param jsonpcallback : 服务器给出的JSONP端口的API名称 - * @param callback : 执行JSONP获取数据的回调函数 - */ - var jsonp = function (url, data, jsonpcallback, callback) { - var cbName = 'cb' + jsonp.count++; - var callbackName = 'window.jsonp.' + cbName; - window.jsonp[cbName] = function (jsonpData) { - try { - callback(jsonpData); - } finally { - script.parentNode.removeChild(script); - delete window.jsonp[cbName]; - } - }; - var script = document.createElement('script'); - if (data) { - data = tool.encodeToURIString(data); - } - if (typeof jsonpcallback === 'string') { - var jsonpData = jsonpcallback + '=' + callbackName; - } - url = tool.hasSearch(url, data); - url = tool.hasSearch(url, jsonpData); - script.src = url; - document.body.appendChild(script); - }; - jsonp.count = 0; - window.jsonp = jsonp; - var tool = { - encodeToURIString: function (data) { - if (!data) return ''; - if (typeof data === 'string') return data; - var arr = []; - for (var n in data) { - if (!data.hasOwnProperty(n)) continue; - arr.push(encodeURIComponent(n) + '=' + encodeURIComponent(data[n])); - } - return arr.join('&'); - }, - hasSearch: function (url, padString) { - if (!padString) return url; - if (typeof padString !== 'string') return url; - return url + (/\?/.test(url) ? '&' : '?') + padString; - } - } -})(); - -module.exports = jsonp; diff --git a/build/2b0fb3c4dd3cac79ad0b87b3f42b441d.jpg b/build/2b0fb3c4dd3cac79ad0b87b3f42b441d.jpg deleted file mode 100644 index 20c418b..0000000 Binary files a/build/2b0fb3c4dd3cac79ad0b87b3f42b441d.jpg and /dev/null differ diff --git a/build/9baa220dc48edb9d28ebdd296df07a7d.jpg b/build/9baa220dc48edb9d28ebdd296df07a7d.jpg deleted file mode 100644 index 5511333..0000000 Binary files a/build/9baa220dc48edb9d28ebdd296df07a7d.jpg and /dev/null differ diff --git a/build/bundle.js b/build/bundle.js index 3a067db..c3dabbe 100644 --- a/build/bundle.js +++ b/build/bundle.js @@ -1,5 +1,5 @@ -!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(119)},function(e,t){function n(){c&&u&&(c=!1,u.length?p=u.concat(p):d=-1,p.length&&r())}function r(){if(!c){var e=i(n);c=!0;for(var t=p.length;t;){for(u=p,p=[];++d