pedroparra

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {

pedroparra

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';

// Preparamos nuestra funcion reducer
const myReducer = (state = 0, action) => {
  switch(action.type) {
    case 'sumar':
      return state + 1;
    case 'restar':

pedroparra

// Reducer - Función Pura 
// Usando es6
// Nunca cambiamos el state
// Devolvemos 0 si el state es undefined
// Devolvemos el state si no conocemos el action

const myReducer = (state = 0, action) => {
  switch(action.type) {
    case 'sumar':
      return state + 1;

pedroparra

// Funcion Pura

function doble(num) {
  return num * 2; // No modifica el argumento.
}

function doblarLista(listado){
  // Retorna un nuevo listado sin modificar nada.
  return listado.map(doble); 
}

pedroparra

// El metodo recive las propiedades previas y el estado previo.
componentDidUpdate: function(prev_props, prev_state) {}

pedroparra

// Ecmascript 5
var MyComponent = React.createClass({
  
  shouldComponentUpdate: function(next_props, next_state) {
    return false;
  }
  
  // Despues del primer render, nunca volver a renderizarse.
  render: function() {
    <div>Soy un component</div>

pedroparra

// Ecmascript 5
var MyComponent = React.createClass({
  
  componentWillReceiveProps: function(next_props){
    this.setState({ loading: true });
  },
  
  render: function() {
    className = this.state.loading ? 'loading' : 'loaded';
    return(<div className={className}>Soy un component</div>)

pedroparra

// Ecmascript 5
var MyComponent = React.createClass({
  
  componentWillMount: function() {
    console.log('El componente aun no está disponible en el DOM');
    return { data:[] };
  },
  
  componentDidMount: function() {
    console.log('El componente está disponible en el DOM');

pedroparra

// Ecmascript 5
var MyComponent = React.createClass({
  componentWillMount: function() {}
    console.log('El componente aun no está disponible en el DOM');
    return { data:[] };
  },
  render: function() {
    <div>Soy un component</div>
  }
});

pedroparra

npm ls --depth 0 -g