react-jd-index
看见一些代码的产物，会觉得非常的漂亮感谢无私开源的程序员们你们是最可爱的人儿~~
//index.jsx
require('./app/lib/common.css');
import React from 'react';
import ReactDOM from 'react-dom';
import Search from './app/components/search.jsx';
import Header from './app/components/header.jsx';
import Otherapp from './app/components/otherapp.jsx';
import Spike from './app/components/spike.jsx';
import More from './app/components/more.jsx';
import Like from './app/components/like.jsx';
ReactDOM.render(
<div>
<Search />
<Header source="http://localhost:3000/data/swiper" />
<Otherapp source="http://localhost:3000/data/otherapp" />
<Spike source="http://localhost:3000/data/spike" />
<More source="http://localhost:3000/data/more" />
<Like source="http://localhost:3000/data/like" />
</div>,
document.querySelector("#myApp")
);
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
<title>JD_demo</title>
<style>
.bg {
background: #f3f5f7;
}
</style>
</head>
<body class="bg">
<div class="container">
<div id="myApp"></div>
</div>
<script src="./bundle.js" type="text/javascript"></script>
</body>
</html>
//封装的jsonp.js
//app/util/jsonp.js
;(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;
//app/components/header.jsx
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()
//在异步场景下的调用不会出错。
console.log('data.status.....',data.status);
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/search.jsx
require('./search.css');
import React from 'react';
let Search = React.createClass({
getInitialState: function() {
return {
bg: "transparent",
}
},
componentDidMount: function() {
//向下滑动，搜索框固定不变，滚动一定距离，就改变背景色
window.onscroll = (event) => {
let realHeight = document.documentElement.scrollTop || document.body.scrollTop;
let optatic = 0.8 * (realHeight/142);
if(optatic <= 0.8 ) {
this.setState({
bg: `rgba(234, 44, 44, ${optatic})`,
})
}
}
},
render: function() {
let bColor = this.state.bg ? this.state.bg : 'transprent';
return (
<div id="search" className="pf" style={{ background: bColor }}>
<div className="search pr">
<div className="sl pa">
<i></i>
</div>
<div className="frc pr">
<span className="searchicon pa"></span>
<form>
<input placeholder="全场畅饮，部分低至99减50" type="text"/>
</form>
</div>
<div className="sub pa">
<span>登录</span>
</div>
</div>
</div>
);
}
})
module.exports = Search;
//app/components/like.jsx
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) => {
console.log('aaaaa',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.jsx
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: [],
};
},
componentDidMount: function() {
jsonp(this.props.source, "", "callback", (data) => {
console.log('~~~~~~data',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,
})
}
}else {
alert(data.msg);
}
});
},
render: function() {
let countId = 0;
return (
<div id="more">
<div className="more_top">
{
this.state.more1.map((item) => {
return <div className="more_link" key={"more" + countId++}>
<a href={item.url}>
<img src={item.icon} alt=""/>
</a>
</div>
})
}
</div>
<div className="more_middle">
{
this.state.more2.map((item) => {
return <div className="more_style" key={"more" + countId++}>
<a href={item.url}>
<img src={item.icon} alt=""/>
</a>
</div>
})
}
</div>
<div className="more_bottom">
<div className="swiper-container">
<div className="swiper-wrapper">
{
this.state.more3.map((item) => {
return <div className="swiper-slide" key={"more" + countId++}>
<a href={item.url}>
<img src={item.icon} alt=""/>
</a>
</div>
})
}
</div>
<div className="swiper-pagination"></div>
</div>
</div>
</div>
);
}
})
module.exports = More;
//app/components/otherapp.jsx
require('./otherapp.css');
let jsonp = require('../util/jsonp.js');
import React from 'react';
let Otherapp = React.createClass({
getInitialState: function() {
return {
apps: [],
};
},
componentDidMount: function() {
jsonp(this.props.source, "", "callback", (data) => {
console.log('otherapp',data);
if(data.status) {
if(this.isMounted()) {
this.setState({
apps: data.data,
})
}
}else {
alert(data.msg);
}
});
},
render: function() {
let countId = 0;
return (
<div className="oapp">
<ul>
{
this.state.apps.map((app) => {
return <li key={ "otherapp" + countId++ }>
<a href={ app.url }>
<div className="app_icon">
<img src={ app.icon } alt=""/>
</div>
<span>{ app.title }</span>
</a>
</li>
})
}
</ul>
</div>
);
}
})
module.exports = Otherapp;
//app/components/spike.jsx
require('./spike.css');
let jsonp = require('../util/jsonp.js');
import React from 'react';
let Spike = React.createClass({
getInitialState: function() {
return {
hour: "00",
minutes: "00",
second: "00",
stores: [],
more: ""
}
},
formatTime: function(times=0) {
times = +times;
let hour = 0,
minutes = 0,
second = 0,
regTwo = /^\d{2}$/,
regInteger = /^(\d{1,2})\.?\d*$/;
if(times/3600 >= 1) {
hour = times/3600;
hour = +regInteger.exec(hour.toString())[1]
times -= hour*3600;
hour = regTwo.test(hour.toString()) ? hour.toString() : `0${hour}`;
}
if(times/60 >= 1) {
minutes = times/60;
minutes = +regInteger.exec(minutes.toString())[1]
times -= minutes*60;
minutes = regTwo.test(minutes.toString()) ? minutes.toString() : `0${minutes}`;
}
second = times;
second = regTwo.test(second.toString()) ? second.toString() : `0${second}`;
return {
hour: hour,
minutes: minutes,
second: second,
}
},
componentDidMount: function() {
let getData = () => {
let promise = new Promise((resolve, reject) => {
jsonp(this.props.source, "", "callback", (data) => {
console.log('seeedata....',data);
if(data.status) {
if(this.isMounted()) {
this.setState({
stores: data.data,
more: data.more,
});
resolve(data.times);
}
}else {
alert(data.msg);
reject("get data error!")
}
})
})
return promise;
}
getData().then((times) => {
times = +times;
let timer = window.setInterval(() => {
let {hour, minutes, second} = this.formatTime(times--);
if(times == -1) {
clearInterval(timer);
timer = null;
}
this.setState({
hour: hour,
minutes: minutes,
second: second,
});
}, 1000);
}, (err) => {
alert(err);
});
},
render: function() {
let countId = 0;
return (
<div id="spike">
<div className="spike_header">
<i></i>
<span className="spike_title">掌上时间</span>
<div className="spike_time">
{
(() => {
return <div>
<span>{this.state.hour}</span>:<span>{this.state.minutes}</span>:<span>{this.state.second}</span>
</div>
})()
}
</div>
<div className="spike_more fr">
<i className="fr"></i>
<a href={this.state.more}>
<span>更多秒杀</span>
</a>
</div>
<div style={{clear:"both"}}></div>
</div>
<ul className="spike_content">
{
this.state.stores.map((item) => {
return <li key={"spike" + countId++}>
<a href={item.url}>
<div>
<img src={item.icon} alt=""/>
</div>
<p>¥{item.sprice}</p>
<p className="real-price">¥{item.price}</p>
</a>
</li>
})
}
</ul>
</div>
);
}
})
module.exports = Spike;
感谢无私开源的程序员哟，可以点击项目的哟
react-jd-index的更多相关文章
- react拷贝index.html很恶心之解决办法
https://www.npmjs.com/package/html-webpack-plugin
- React入门最好的学习实例－TodoList
前言 React 的核心思想是:封装组件,各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件. 最近前端界闹的沸沸扬扬的技术当属react了,加上项目需要等等原因,自己也决定花些时间来好 ...
- 浅谈 原生javaScript&&react 实现全局触摸按钮（附带对addeventlistener的了解）
1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
- React Native + Nodejs 使用RSA加密登录
想用rn做个RSA(非对称加密)登录 基本流程就是在服务端生成RSA后,将“公钥”发到客户端,然后客户端用“公钥”加密信息发送到服务端,服务务端用私钥解密. 过程不复杂,问题在于,nodejs和rn都 ...
- React 入门最好的实例－TodoList
React 的核心思想是:封装组件,各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件. 最近前端界闹的沸沸扬扬的技术当属react了,加上项目需要等等原因,自己也决定花些时间来好好认识 ...
- React 组件开发初探
react.js 在线地址:http://slides.com/yueyao/deck/#/ COMPONENT JSX 预编译语言, 一个基于ECMAscript 的xml-link 的语法扩展,最 ...
- React－TodoList
React入门最好的学习实例-TodoList 前言 React 的核心思想是:封装组件,各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件. 最近前端界闹的沸沸扬扬的技术当属react ...
- react中文API解读二（教程）
记下自己的react学习之路 ,官方文档写的很详尽,学起来应该比较简单 官方文档地址:react.http://reactjs.cn/react/docs/getting-started.html 2 ...
- React 系列文章(1)： npm 手动搭建React 运行实例 (新手必看)
摘 要 刚接触React 开发, 在摸索中构建react 运行环境,总会遇到各种坑:本文,将用最短时间解决webpack+react 环境搭建问题. 1.如果你还没有React基础 看这里. 2.如果 ...
- React 虚拟 DOM 的差异检测机制
React 使用虚拟 DOM 将计算好之后的更新发送到真实的 DOM 树上,减少了频繁操作真实 DOM 的时间消耗,但将成本转移到了 JavaScript 中,因为要计算新旧 DOM 树的差异嘛.所以 ...
随机推荐
- vue 路由（二级）配置及详细步骤
1.安装插件(可以选择在初始化项目的时候安装) cnpm install vue-router --save-dev 2.将插件全局引入到项目中(main.js) import VueRouter f ...
- java后台使用HttpURLConnection实现百度主动推送
优点是快 不需要页面执行,,发布文章之后立即推送,所以,不管有没有人访问,都可以自动实时推送 尝试了一下httpclient,没找到相关资料,post方式无法塞url进去 最后改为 import ja ...
- centos 6.8 搭建禅道 Linux一件安装、进程自起
禅道官网:http://www.zentao.net/ linux一键安装包内置了apache, php, mysql这些应用程序,只需要下载解压缩即可运行禅道.Linux 64位一键安装包(适用于L ...
- 【JOB】Oracle中JOB的创建方法以及一个细节的探究
在Oracle中可以使用JOB来实现一些任务的自动化执行,类似于UNIX操作系统crontab命令的功能.简单演示一下,供参考. 1.创建表T,包含一个X字段,定义为日期类型,方便后面的定时任务测试. ...
- 解决导入TensorFlow后出现警告的的问题解决：通过降低numpy的版本
在原有基础上安装tensorflow 重新虚拟出一个环境安装tensorflow 安装 测试 大多教程都是重新虚拟出一个环境,原有环境就可以支持为什么还要重建一个新的环境,如果以后遇到坑了更新解释. ...
- uva11401：Triangle Counting 递推 数学
uva11401:Triangle Counting 题目读不清楚的下场就是多做两个小时...从1-n中任选3个不重复数字(不重复啊!!坑爹啊!)问能组成三角形的有多少个, 显然1~n能组成的三角形集 ...
- 浏览器在IE8 以下时显示提示信息,提示用户升级浏览器
<!--[if lt IE 8]> <div style="background: #eeeeee;border-bottom: 1px solid #cccccc;col ...
- 前端（Node.js）（2）-- Node.js开发环境配置
1.开发环境介绍 1.MEAN Stack 什么是全栈? 负责界面和UI的设计师.负责移动端应用开发的安卓IOS开发工程师.负责服务器端开发的后端程序员.负责数据库开发和管理的数据库工程师.负责服务器 ...
- Eclipse配置Maven详细教程
一.使用eclipse自带的maven插件 首先,现在下载Eclipse Mars之后的版本,基本上都自带了maven插件,无需自己再安装maven. 有几个注意点: 1.默认的本地仓库的目录是在C: ...
- Docker Mysql部署
1.下载tomcat镜像 docker pull mysql 2.启动容器 docker run -d --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD ...