看见一些代码的产物，会觉得非常的漂亮感谢无私开源的程序员们你们是最可爱的人儿~~

  1. //index.jsx
  3. require('./app/lib/common.css');
  4. import React from 'react';
  5. import ReactDOM from 'react-dom';
  7. import Search from './app/components/search.jsx';
  8. import Header from './app/components/header.jsx';
  9. import Otherapp from './app/components/otherapp.jsx';
  10. import Spike from './app/components/spike.jsx';
  11. import More from './app/components/more.jsx';
  12. import Like from './app/components/like.jsx'; 
  14. ReactDOM.render(
  15. 	<div>
  16. 		<Search />
  17. 		<Header source="http://localhost:3000/data/swiper" />
  18. 		<Otherapp source="http://localhost:3000/data/otherapp" />
  19. 		<Spike source="http://localhost:3000/data/spike" />
  20. 		<More source="http://localhost:3000/data/more" />
  21. 		<Like source="http://localhost:3000/data/like" />
  22. 	</div>,
  23. 	document.querySelector("#myApp")
  24. );
  1. //index.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. 	<meta charset="UTF-8">
  6. 	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
  7. 	<title>JD_demo</title>
  8. 	<style>
  9. 		.bg {
  10. 			background: #f3f5f7;
  11. 		}
  12. 	</style>
  13. </head>
  14. <body class="bg">
  15. 	<div class="container">
  16. 		<div id="myApp"></div>
  17. 	</div>
  18. 	<script src="./bundle.js" type="text/javascript"></script>
  19. </body>
  20. </html>
  1. //封装的jsonp.js
  2. //app/util/jsonp.js
  4. ;(function () {
  5.     /**
  6.      * JSONP操作
  7.      * @param url : 请求的url
  8.      * @param data : 发送数据
  9.      * @param jsonpcallback : 服务器给出的JSONP端口的API名称
  10.      * @param callback : 执行JSONP获取数据的回调函数
  11.      */
  12.     var jsonp = function (url, data, jsonpcallback, callback) {
  13.         var cbName = 'cb' + jsonp.count++;
  14.         var callbackName = 'window.jsonp.' + cbName;
  15.         window.jsonp[cbName] = function (jsonpData) {
  16.             try {
  17.                 callback(jsonpData);
  18.             } finally {
  19.                 script.parentNode.removeChild(script);
  20.                 delete window.jsonp[cbName];
  21.             }
  22.         };
  23.         var script = document.createElement('script');
  24.         if (data) {
  25.             data = tool.encodeToURIString(data);
  26.         }
  27.         if (typeof jsonpcallback === 'string') {
  28.             var jsonpData = jsonpcallback + '=' + callbackName;
  29.         }
  30.         url = tool.hasSearch(url, data);
  31.         url = tool.hasSearch(url, jsonpData);
  32.         script.src = url;
  33.         document.body.appendChild(script);
  34.     };
  35.     jsonp.count = 0;
  36.     window.jsonp = jsonp;
  37.     var tool = {
  38.         encodeToURIString: function (data) {
  39.             if (!data) return '';
  40.             if (typeof data === 'string') return data;
  41.             var arr = [];
  42.             for (var n in data) {
  43.                 if (!data.hasOwnProperty(n)) continue;
  44.                 arr.push(encodeURIComponent(n) + '=' + encodeURIComponent(data[n]));
  45.             }
  46.             return arr.join('&');
  47.         },
  48.         hasSearch: function (url, padString) {
  49.             if (!padString) return url;
  50.             if (typeof padString !== 'string') return url;
  51.             return url + (/\?/.test(url) ? '&' : '?') + padString;
  52.         }
  53.     }
  54. })();
  56. module.exports = jsonp;

  1. //app/components/header.jsx
  3. require("./header.css");
  4. require('../lib/swiper.min.css');
  5. let Swiper = require('../lib/swiper.min.js');
  6. let jsonp = require('../util/jsonp.js');
  8. import React from 'react';     
  10. let Header = React.createClass({
  11. 	getInitialState: function() {
  12.         return {
  13.         	imgUrls: [],
  14.         };
  15.  	},
  16. 	componentDidMount: function() {
  17. 		jsonp(this.props.source, "", "callback", (data) => {
  18. 			if(data.status) {
  19. 				//如果组件渲染到了 DOM 中，isMounted() 返回 true。
  20. 				//可以使用该方法保证 setState() 和 forceUpdate()
  21. 				//在异步场景下的调用不会出错。
  22. 				console.log('data.status.....',data.status);
  23. 				if(this.isMounted()) {
  24. 					this.setState({
  25. 						imgUrls: data.data,
  26. 					})
  27. 				    new Swiper ('#header .swiper-container', {
  28. 					    loop: true,
  29. 					    pagination: '.swiper-pagination',
  30. 					    paginationClickable: true,
  31. 					    autoplay : 3000,
  32. 						autoplayDisableOnInteraction : false,
  33. 					})
  34. 				}
  35. 			}else {
  36. 				alert(data.msg);
  37. 			}
  38. 		});
  39. 	},
  41. 	render: function () {
  42. 		let countId = 0;
  43. 	    return (
  44. 	      <div id="header">
  45.     		<div className="swiper-container">
  46. 			    <div className="swiper-wrapper">
  47. 			    	{
  48. 			    		this.state.imgUrls.map((url) => {
  49. 			    			return <div className="swiper-slide" key={"header" + countId++} >
  50. 			    						<img className="img" src={url} />
  51. 			    				   </div>
  52. 			    		})
  53. 			    	}
  54. 			    </div>
  55. 				<div className="swiper-pagination"></div>
  56. 			</div>
  57. 	      </div>
  58. 	    );
  59. 	  }
  60. })
  62. module.exports = Header;

  1. //app/components/search.jsx
  3. require('./search.css');
  4. import React from 'react'; 
  6. let Search = React.createClass({
  7. 	getInitialState: function() {
  8. 		return {
  9. 			bg: "transparent",
  10. 		}
  11. 	},
  12. 	componentDidMount: function() {
  13. 		//向下滑动，搜索框固定不变，滚动一定距离，就改变背景色
  14. 		window.onscroll = (event) => {
  15. 			let realHeight = document.documentElement.scrollTop || document.body.scrollTop;
  16. 			let optatic = 0.8 * (realHeight/142);
  17. 			if(optatic <= 0.8 ) {
  18. 				this.setState({
  19. 					bg: `rgba(234, 44, 44, ${optatic})`,
  20. 				})
  21. 			}
  22. 		}
  23. 	},
  24. 	render: function() {
  25. 		let bColor = this.state.bg ? this.state.bg : 'transprent';
  26. 		return (
  27. 			<div id="search" className="pf"  style={{ background: bColor }}>
  28. 				<div className="search pr">
  29. 					<div className="sl pa">
  30. 						<i></i>
  31. 					</div>
  32. 					<div className="frc pr">
  33. 						<span className="searchicon pa"></span>
  34. 						<form>
  35. 							<input placeholder="全场畅饮，部分低至99减50" type="text"/>
  36. 						</form>
  37. 					</div>
  38. 					<div className="sub pa">
  39. 						<span>登录</span>
  40. 					</div>
  41. 				</div>
  42. 			</div>
  43. 		);
  44. 	}
  45. })
  47. module.exports = Search;

  1. //app/components/like.jsx
  3. require('./like.css');
  4. let jsonp = require('../util/jsonp.js');
  5. import React from 'react'; 
  7. let Like = React.createClass({
  8. 	getInitialState: function() {
  9. 		return {
  10. 			stores: [],
  11. 		}
  12. 	},
  14. 	componentDidMount: function() {
  15. 		jsonp(this.props.source, "", "callback", (data) => {
  16. 			console.log('aaaaa',data);
  17. 			if(data.status) {
  18. 				if(this.isMounted()) {
  19. 					this.setState({
  20. 						stores: data.data,
  21. 					});
  22. 				}
  23. 			}else {
  24. 				alert(data.msg);
  25. 				reject("get data error!")
  26. 			}
  27. 		})
  28. 	},
  30. 	render: function() {
  31. 		let countId = 0;
  32. 		return (
  33. 			<div id="like">
  34. 				<p>猜你喜欢</p>
  35. 				{
  36. 					this.state.stores.map((item) => {
  37. 						return <div className="like_content" key={"like" + countId++}>
  38. 									<div className="like_link">
  39. 										<a href={ item.url }>
  40. 											<img src={ item.icon } alt=""/>
  41. 										</a>
  42. 									</div>
  43. 									<div className="like_desc">
  44. 										<span>
  45. 											{ item.desc }
  46. 										</span>
  47. 									</div>
  48. 									<div className="like_price">
  49. 										<span>¥{ item.price }</span>
  50. 										<div><a href={ item.more }>看相似</a></div>
  51. 									</div>
  52. 								</div>
  53. 					})
  54. 				}
  55. 			</div>
  56. 		);
  57. 	}
  58. })
  60. module.exports = Like;

  1. //app/components/more.jsx
  3. require('./more.css');
  4. require('../lib/swiper.min.css');
  5. let Swiper = require('../lib/swiper.min.js');
  6. let jsonp = require('../util/jsonp.js');
  7. import React from 'react'; 
  9. var More = React.createClass({
  10. 	getInitialState: function() {
  11.         return {
  12.         	more1: [],
  13.         	more2: [],
  14.         	more3: [],
  15.         };
  16.  	},
  18. 	componentDidMount: function() {
  19. 		jsonp(this.props.source, "", "callback", (data) => {
  20. 			console.log('~~~~~~data',data);
  21. 			if(data.status) {
  22. 					// 将值分成了三部分，进行处理
  23. 				if(this.isMounted()) {
  24. 					this.setState({
  25. 						more1: data.data.slice(0,3),
  26. 						more2: data.data.slice(3,5),
  27. 						more3: data.data.slice(5,7),
  28. 					})
  29. 				    new Swiper ('.more_bottom .swiper-container', {
  30. 					    loop: true,
  31. 					    pagination: '.swiper-pagination',
  32. 					    paginationClickable: true,
  33. 					    autoplay : 2000,
  34. 						autoplayDisableOnInteraction : false,
  35. 					})
  36. 				}
  37. 			}else {
  38. 				alert(data.msg);
  39. 			}
  40. 		});
  41. 	},
  43. 	render: function() {
  45. 		let countId = 0;
  46. 		return (
  47. 			<div id="more">
  48. 				<div className="more_top">
  49. 					{
  50. 						this.state.more1.map((item) => {
  51. 							return <div className="more_link" key={"more" + countId++}>
  52. 										<a href={item.url}>
  53. 											<img src={item.icon} alt=""/>
  54. 										</a>
  55. 									</div>
  56. 						})
  57. 					}
  58. 				</div>
  59. 				<div className="more_middle">
  60. 					{
  61. 						this.state.more2.map((item) => {
  62. 							return <div className="more_style" key={"more" + countId++}>
  63. 										<a href={item.url}>
  64. 											<img src={item.icon} alt=""/>
  65. 										</a>
  66. 									</div>
  67. 						})
  68. 					}
  69. 				</div>
  70. 				<div className="more_bottom">
  71. 					<div className="swiper-container">
  72. 						<div className="swiper-wrapper">
  73. 							{
  74. 								this.state.more3.map((item) => {
  75. 									return  <div className="swiper-slide" key={"more" + countId++}>
  76. 												<a href={item.url}>
  77. 													<img src={item.icon} alt=""/>
  78. 												</a>
  79. 											</div>
  80. 								})
  81. 							}
  82. 						</div>
  83. 						<div className="swiper-pagination"></div>
  84. 					</div>
  85. 				</div>
  86. 			</div>
  87. 		);
  88. 	}
  89. })
  91. module.exports = More;

  1. //app/components/otherapp.jsx
  3. require('./otherapp.css');
  4. let jsonp = require('../util/jsonp.js');
  6. import React from 'react'; 
  8. let Otherapp = React.createClass({
  9. 	getInitialState: function() {
  10.         return {
  11.         	apps: [],
  12.         };
  13.  	},
  15.  	componentDidMount: function() {
  16.  		jsonp(this.props.source, "", "callback", (data) => {
  17.  			console.log('otherapp',data);
  18.  			if(data.status) {
  19.  				if(this.isMounted()) {
  20.  					this.setState({
  21.  						apps: data.data,
  22.  					})
  23.  				}
  24.  			}else {
  25.  				alert(data.msg);
  26.  			}
  27.  		});
  28.  	},
  30. 	render: function() {
  31. 		let countId = 0;
  32. 		return (
  33. 			<div className="oapp">
  34. 				<ul>
  35. 					{
  36. 						this.state.apps.map((app) => {
  37. 							return <li key={ "otherapp" + countId++ }>
  38. 										<a href={ app.url }>
  39. 											<div className="app_icon">
  40. 												<img src={ app.icon } alt=""/>
  41. 											</div>
  42. 											<span>{ app.title }</span>
  43. 										</a>
  44. 									</li>
  45. 						})
  46. 					}
  47. 				</ul>
  48. 			</div>
  49. 		);
  50. 	}
  51. })
  53. module.exports = Otherapp;
  1. //app/components/spike.jsx
  3. require('./spike.css');
  4. let jsonp = require('../util/jsonp.js');
  5. import React from 'react'; 
  7. let Spike = React.createClass({
  8. 	getInitialState: function() {
  9. 		return {
  10. 			hour: "00",
  11. 			minutes: "00",
  12. 			second: "00",
  13. 			stores: [],
  14. 			more: ""
  15. 		}
  16. 	},
  18. 	formatTime: function(times=0) {
  19. 		times = +times;
  20. 		let hour = 0,
  21. 			minutes = 0,
  22. 			second = 0,
  23. 			regTwo = /^\d{2}$/,
  24. 			regInteger = /^(\d{1,2})\.?\d*$/;
  25. 		if(times/3600 >= 1) {
  26. 			hour = times/3600;
  27. 			hour = +regInteger.exec(hour.toString())[1]
  28. 			times -= hour*3600;
  29. 			hour = regTwo.test(hour.toString()) ? hour.toString() : `0${hour}`;
  30. 		}
  31. 		if(times/60 >= 1) {
  32. 			minutes = times/60;
  33. 			minutes = +regInteger.exec(minutes.toString())[1]
  34. 			times -= minutes*60;
  35. 			minutes = regTwo.test(minutes.toString()) ? minutes.toString() : `0${minutes}`;
  36. 		}
  37. 		second = times;
  38. 		second = regTwo.test(second.toString()) ? second.toString() : `0${second}`;
  39. 		return {
  40. 			hour: hour,
  41. 			minutes: minutes,
  42. 			second: second,
  43. 		}
  44. 	},
  46. 	componentDidMount: function() {
  47. 		let getData = () => {
  48. 			let promise = new Promise((resolve, reject) => {
  49. 				jsonp(this.props.source, "", "callback", (data) => {
  50. 					console.log('seeedata....',data);
  51. 					if(data.status) {
  52. 						if(this.isMounted()) {
  53. 							this.setState({
  54. 								stores: data.data,
  55. 								more: data.more,
  56. 							});
  57. 							resolve(data.times);
  58. 						}
  59. 					}else {
  60. 						alert(data.msg);
  61. 						reject("get data error!")
  62. 					}
  63. 				})
  64. 			})
  65. 			return promise;
  66. 		}
  68. 		getData().then((times) => {
  69. 			times = +times;
  70. 			let timer = window.setInterval(() => {
  71. 				let {hour, minutes, second} = this.formatTime(times--);
  72. 				if(times == -1) {
  73. 					clearInterval(timer);
  74. 					timer = null;
  75. 				}
  76. 				this.setState({
  77. 					hour: hour,
  78. 					minutes: minutes,
  79. 					second: second,
  80. 				});
  81. 			}, 1000);
  82. 		}, (err) => {
  83. 			alert(err);
  84. 		});
  86. 	},
  88. 	render: function() {
  89. 		let countId = 0;
  90. 		return (
  91. 			<div id="spike">
  92. 				<div className="spike_header">
  93. 					<i></i>
  94. 					<span className="spike_title">掌上时间</span>
  95. 					<div className="spike_time">
  96. 						{
  97. 							(() => {
  98. 								return  <div>
  99. 											<span>{this.state.hour}</span>:<span>{this.state.minutes}</span>:<span>{this.state.second}</span>
  100. 										</div>
  102. 							})()
  103. 						}
  104. 					</div>
  105. 					<div className="spike_more fr">
  106. 						<i className="fr"></i>
  107. 						<a href={this.state.more}>
  108. 							<span>更多秒杀</span>
  109. 						</a>
  111. 					</div>
  112. 					<div style={{clear:"both"}}></div>
  113. 				</div>
  114. 				<ul className="spike_content">
  115. 					{
  116. 						this.state.stores.map((item) => {
  117. 							return <li key={"spike" + countId++}>
  118. 										<a href={item.url}>
  119. 											<div>
  120. 												<img src={item.icon} alt=""/>
  121. 											</div>
  122. 											<p>¥{item.sprice}</p>
  123. 											<p className="real-price">¥{item.price}</p>
  124. 										</a>
  125. 									</li>
  126. 						})
  127. 					}
  128. 				</ul>
  129. 			</div>
  130. 		);
  131. 	}
  132. })
  134. module.exports = Spike;

感谢无私开源的程序员哟，可以点击项目的哟

react-jd-index的更多相关文章

  1. react拷贝index.html很恶心之解决办法

    https://www.npmjs.com/package/html-webpack-plugin

  2. React入门最好的学习实例－TodoList

    前言 React 的核心思想是:封装组件,各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件. 最近前端界闹的沸沸扬扬的技术当属react了,加上项目需要等等原因,自己也决定花些时间来好 ...

  3. 浅谈 原生javaScript&&react 实现全局触摸按钮（附带对addeventlistener的了解）

    1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...

  4. React Native + Nodejs 使用RSA加密登录

    想用rn做个RSA(非对称加密)登录 基本流程就是在服务端生成RSA后,将“公钥”发到客户端,然后客户端用“公钥”加密信息发送到服务端,服务务端用私钥解密. 过程不复杂,问题在于,nodejs和rn都 ...

  5. React 入门最好的实例－TodoList

    React 的核心思想是:封装组件,各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件. 最近前端界闹的沸沸扬扬的技术当属react了,加上项目需要等等原因,自己也决定花些时间来好好认识 ...

  6. React 组件开发初探

    react.js 在线地址:http://slides.com/yueyao/deck/#/ COMPONENT JSX 预编译语言, 一个基于ECMAscript 的xml-link 的语法扩展,最 ...

  7. React－TodoList

    React入门最好的学习实例-TodoList 前言 React 的核心思想是:封装组件,各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件. 最近前端界闹的沸沸扬扬的技术当属react ...

  8. react中文API解读二（教程）

    记下自己的react学习之路 ,官方文档写的很详尽,学起来应该比较简单 官方文档地址:react.http://reactjs.cn/react/docs/getting-started.html 2 ...

  9. React 系列文章(1)： npm 手动搭建React 运行实例 (新手必看)

    摘 要 刚接触React 开发, 在摸索中构建react 运行环境,总会遇到各种坑:本文,将用最短时间解决webpack+react 环境搭建问题. 1.如果你还没有React基础 看这里. 2.如果 ...

  10. React 虚拟 DOM 的差异检测机制

    React 使用虚拟 DOM 将计算好之后的更新发送到真实的 DOM 树上,减少了频繁操作真实 DOM 的时间消耗,但将成本转移到了 JavaScript 中,因为要计算新旧 DOM 树的差异嘛.所以 ...

随机推荐

  1. ArcGIS Data Interoperability 的使用（1）

    今天在用OneMap的时候,发现OneMap中注册过后的WFS服务无法在skyline中加载,于是想知道OneMap注册后的WFS服务与server中的原生态WFS服务有啥区别.首先想到是否能在Arc ...

  2. 关于ie11的浏览器检测

    我的电脑昨天更新的时候把ie11给更新出来了,然后发现我的skylineweb项目提示我的浏览器不是ie,这样显然是浏览器检测出现了问题.查找后找到了下面的解决方法.大家的电脑如果也更新成了ie11的 ...

  3. [C#] double指定有效位数格式化

    C#里面指定小数位数格式化大家都知道 ff.ToString("F3") 可以指定精确到三位小数. 但是如何指定有效位数呢?方法是 ff.ToString("G3&quo ...

  4. 取消 ios 上下滑动

  5. jquery同级遍历

    siblings() 返回被选元素的所有同胞元素. next() 返回被选元素的下一个同胞元素. nextAll() 方法返回被选元素的所有跟随的同胞元素. nextUntil() 方法返回介于两个给 ...

  6. SVN 提交时文件锁定 svn: E155004: '' is already locked

    1.先安装TortoiseSVN TortoiseSVN安装成功后,找到工作路径下的项目右键 TortoiseSVN --> Clean up... --> Break locks 勾选上 ...

  7. Leetcode228. Summary Ranges汇总区间

    给定一个无重复元素的有序整数数组,返回数组区间范围的汇总. 示例 1: 输入: [0,1,2,4,5,7] 输出: ["0->2","4->5",& ...

  8. Web前端开发工程师需要掌握哪些核心技能？

    Web前端开发所涉及的内容主要包括W3C标准中的结构.行为和表现,那么这三项中我们需要掌握的核心技能是什么呢? 1.开发语言 HTML发展历史有二十多年,历经多次版本更新,HTML5和CSS3的出现又 ...

  9. Python各种转义符

    文章来源:https://www.cnblogs.com/luckyplj/p/9792658.html 谢谢作者:雨后观山色

  10. Linux下安装docker，更改镜像仓库地址，并部署springboot应用

    今天做不成的事,明天也不会做好. 各位同学大家好,随着docker的快速发展,越来越多的人开始使用,一方面随着容器化这个趋势越来越火,docker成为了其中的佼佼者:二来容器化确实降低了运维的门槛,让 ...