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 树的差异嘛.所以 ...
随机推荐
- linux学习(一)-----vm、centos安装
安装vm和Centos 1)先安装 virtual machine ,vm12 2)再安装 Linux (CentOS 6.8) 3)原理示意图,这里我们画图说明一下 VM 和 CentOS 的关系. ...
- Hibernate继承注解
hibernate应用中,继承的用途或目的主要有两点: 组件化:故明思义,把重复性的代码抽取成组件,以便重用和维护.hibernate应用中,一些重复的字段,重复的映射配置,就需要抽取成组件. 多态性 ...
- Java内功修炼系列一反射
“JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性:这种动态获取信息以及动态调用对象方法的功能称为java语言的反射机制 ...
- 前端存取cookie
1.存cookie document.cookie="user_phone="+loginMake1Value;//存手机号码cookie//'user_phone'为cookie ...
- Cesium官方教程4--影像图层
原文地址:https://cesiumjs.org/tutorials/Imagery-Layers-Tutorial/ 影像图层 Cesium支持多种服务来源的高精度影像(地图)数据的加载和渲染.图 ...
- python intern(字符串驻留机制)
python 中为了提高字符串的使用用效率和节约内存,对于由 字母.数字.下划线组成的标识符采用了 intern 机制,即对于短字符串,将其赋值给多个对象时,内存中只有一个副本,多个对象共享这个副本. ...
- Blow up the city
Blow up the city 时间限制: 1 Sec 内存限制: 128 MB 题目描述 Country A and B are at war. Country A needs to organ ...
- Dockerfile 编写
转: https://blog.fundebug.com/2017/05/15/write-excellent-dockerfile/如何编写最佳的Dockerfile 译者按: Dockerfile ...
- paip.前端载入时间分析之道优化最佳实践
paip.前端载入时间分析之道优化最佳实践 1.另存为 ,查看文件尺寸..和图片. 2.view the 另存为的htm静态的文件单个的载入,看时间...能够排除编程语言的问题and 数据库.. ## ...
- 2019.8.1 NOIP模拟测试11 反思总结
延迟了一天来补一个反思总结 急匆匆赶回来考试,我们这边大家的状态都稍微有一点差,不过最后的成绩总体来看好像还不错XD 其实这次拿分的大都是暴力[?],除了某些专注于某道题的人以及远程爆踩我们的某学车神 ...