<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Creación de un timer con ReactJS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src='https://codepen.io/chriscoyier/pen/yIgqi.js'></script>
<script src='https://fb.me/react-0.11.1.js'></script>
<script src='https://fb.me/JSXTransformer-0.11.0.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/0utKast/creaciandxf3n-de-un-timer-con-reactjs-Mwapbo */
* {
padding:0;
margin:0;
}
html{
font:14px normal Arial, sans-serif;
color:#626771;
}
body{
padding:60px;
text-align: center;
}
/*Downloaded from https://www.codeseek.co/0utKast/creaciandxf3n-de-un-timer-con-reactjs-Mwapbo */
/** @jsx React.DOM */
// Crear un componente personalizado llamando a React.createClass.
var TimerExample = React.createClass({
getInitialState: function() {
// Esto es llamado antes de nuestra función render. El objeto que es
// devuelto es asignado a this.state, así que podemos usarlo más tarde.
return {
elapsed: 0
};
},
componentDidMount: function() {
// componentDidMount es llamado por react cuando el componente
// ha sido renderizado en la página. Podemos configuar el intervalo aquí:
this.timer = setInterval(this.tick, 50);
},
componentWillUnmount: function() {
// Este método es llamado inmediatamente antes que el componentes es eliminado
// de la página y destruido. Podemos limpiar el intervalo aquí:
clearInterval(this.timer);
},
tick: function() {
// Esta función es llamada cada 50 ms. Actualiza el
// contador elapsed. Llamando a setState hace que el componente sea re-renderizado
this.setState({
elapsed: new Date() - this.props.start
});
},
render: function() {
var elapsed = Math.round(this.state.elapsed / 100);
// Esto dará un número con un dígito después del punto decimal (xx.x):
var seconds = (elapsed / 10).toFixed(1);
// Aunque devolvemos un elemento <p> entero, react inteligentemente actualizará
// sólo las partes que cambian, que contiene la segunda variable.
return <p > Este ejemplo se inició hace < b > {
seconds
}
segundos < /b>.</p > ;
}
});
React.renderComponent( < TimerExample start = {
Date.now()
}
/>,
document.body
);