Primeros Pasos

ReactJS 101

¿Por qué ReactJS?

• Angular VS React
• ¿Esta de moda?
• Metodología de componentes

Michelle Torres

• michelle.torres@corb.mx
• fb.com/michelletorres.mx
• nmicht
• nmicht

Instalar NPM

Instalación

npm install -g create-react-app

-g lo utilizamos para indicar que será una instalación global.

Crea tu primer App

1. Crear tu app

   create-react-app pomodorito

2. Arrancar el servidor de pruebas en una consolado por aparte

   
   cd pomodorito/
   npm start
             

Para arrancar el servidor, puedes usar también

yarn start

Estructura de tu App

Componente del contador

1. Crear carpeta de componentes

   
   cd src
   mkdir components
               

2. Crear carpeta para el componente de contador

   
   cd components
   mkdir Counter
               

Nuestro componente por estándar se define en CamelCase.

3. Crear archivo del componente como tal

   
   cd Counter
   touch Counter.js
               

4. Crear archivo para manejar la carpeta como módulo

   touch index.js

ReactJS cuando hace un import de un folder, busca un index.js

import React from 'react';

const Counter = () => {
   return (
     00:00
   );
}

export default Counter;
        

import Counter from './Counter';
export default Counter;
        

1. Importamos nuestro counter

   import Counter from './components/Counter';

2. En el render agregamos el componente

import Counter from './components/Counter';
...
render() {
    return (
      

        ...
        
      
    );
  }
...
        

Props

1. Son las propiedades de los componentes. Estos se le pasan al componente desde el componente padre.
2. En el renderizado del componente se definen como si fueran atributos de html.

3. En la declaración del componente se usan a través del objeto props.

   
   const Counter = (props) => {
      return (
        {props.minutes}:{props.seconds}
      );
   }
               

PropTypes

npm install prop-types --save

import PropTypes from 'prop-types';

Counter.propTypes = {
  time: PropTypes.number.isRequired,
}
        

Destructurización

const Counter = ({minutes, seconds}) => {
   return (
     {minutes}:{seconds}
   );
}
        

Componente de acciones Pomodoro

cd components
mkdir Pomodoro
        

Nuestro componente por estándar se define en CamelCase.

3. Crear archivo del componente como tal

   
   cd Pomodoro
   touch Pomodoro.js
             

4. Crear archivo para manejar la carpeta como módulo

   touch index.js

ReactJS cuando hace un import de un folder, busca un index.js

import React from 'react';
import Pomodoro from '../Pomodoro';

const Pomodoro = () => {
   return (
     

         
         { /*...botones...*/ }
     
   );
}

export default Pomodoro;
      

import Pomodoro from './Pomodoro';
export default Pomodoro;
      

import React, { Component } from 'react';
import Pomodoro from './components/Pomodoro';
...

class App extends Component {
  render() {
    return (
        ...
        
        ...
    );
  }
}

export default App;
      

La biblioteca moment.js

1. Dentro del folder de Pomodorito instalamos la biblioteca

npm install moment --save

--save es para que se guarde como dependencia en nuestro proyecto.

Agregamos moment al Counter

import React from 'react';
import moment from 'moment';

const Counter = ({time}) => {
   return (
     {moment(time).format('mm:ss')}
   );
}

export default Counter;
      

State Component

import React from 'react';
import Counter from '../Counter';

class Pomodoro extends React.Component {
  render() {
    return (
      

          
          { /*botones*/ }
      
    );
  }
}

export default Pomodoro;
      

Constructor de un componente

constructor(props) {
    super(props);

    this.state = {
      intervalId: null, //ID for the interval to update the time
      breaksCount: 0, //Count for each "time break"
      currentBreak: 'pomodoro', //Type of current "time break"
    }
}
      

setDuration(minutes) {
  return moment.duration(minutes * 60, 'seconds');
}
      

No olvides importar el módulo de moment.

Definimos las propiedades del Pomodoro.

currentDuration: this.setDuration(props.pomodoro),

¿Y los botones?

  
    Start
  
  
    Reset
  

      

Hagamos que inicie el counter

onClick={this.handleStartClick}

handleStartClick = () => {
   const intervalId = setInterval( () => {
     console.log('corriendo intervalo');
   }, 1000);
   this.setState({ intervalId });
}
      

Timer

timer = () => {
  this.setState((state) => {
      const seconds = state.currentDuration.asSeconds();
      if (seconds <= 1) {
          clearInterval(state.intervalId);
          // Debemos cambiar al nuevo break y aumentar el contador de breaks
      }
      return {
        currentDuration: moment.duration(seconds - 1, 'seconds')
      };
  });
}
      

Cuando retornas en la función setState el objeto se va a mergear con el state actual.

handleStartClick = () => {
   const intervalId = setInterval( this.timer, 1000);
   this.setState({ intervalId });
}
      

Cambiar de break cuando termina el timer

getNextTime = () => {
  if (this.state.currentBreak === 'pomodoro') {
      if (this.state.breaksCount === MAX_BREAKS) {
        return 'longBreak';
      }

      return 'shortBreak';
  }

  return 'pomodoro';
}
      

Cambiar de break cuando termina el timer

finishTime = () => {
  let breaksCount = this.state.breaksCount;

  if (this.state.currentBreak === 'shortBreak') {
    breaksCount += 1;
  } else if (breaksCount === MAX_BREAKS) {
    breaksCount = 0;
  }

  const nextTime = this.getNextTime();

  return {
      currentBreak: nextTime,
      currentDuration: this.setDuration(this.props[nextTime]),
      breaksCount,
  };
}
      

return this.finishTime();

Push Notifications

npm install push.js --save

handleTimerFinish = (finishedTime) => {
  Push.create(`Terminó tu ${finishedTime}`, {
    body: 'Da click aquí para ir al Pomodorito',
    icon: 'icon.png',
    timeout: 4000,
    onClick: function() {
      window.focus();
      this.close();
    }
  });
}
      

onTimerFinish: PropTypes.func,

this.props.onTimerFinish(this.state.currentBreak);

const styles = {
  fontSize: "42px",
  backgroundColor: "rgb(225, 225, 225)",
  padding: "35px",
  display: "inline-block",
  margin: "40px",
}
      

{moment(time).format('mm:ss')}