Creación de un timer con ReactJS

In this example below you will see how to do a Creación de un timer con ReactJS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0utKast, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0utKast ©
  • HTML
  • CSS
  • JavaScript
<!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
);

Comments