exemplos.jsx

class MeuComponent extends React.Component {
  render() {
    return <h1>{{this.props.text}}</h1>;
  }
}

let mountNode = document.getElementById('root');

ReactDOM.render(
  <MeuComponent text='Título />,
  mountNode
);
                      
                      
                      
                      
                      
                   

redux.jsx

import { createStore } from 'redux'

/**
 * counter é um reducer, ou seja, uma função pura que recebe como argumentos um estado e uma ação.
 * O reducer tem como responsabilidade descrever como uma ação modifica o estado no próximo estado.
 * This is a reducer, a pure function with (state, action) => state signature.
 *
**/

function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

// Registro da função counter como store.
let store = createStore(counter)

/* Através do método subscribe eventos podem ser registrados para executar no momento
* que o estado muda.
*/

store.subscribe(() =>
  console.log(store.getState())
)

/* Após registrar a função como store e anexar um evento a store,
 * a aplicaço deve realizar dispatch para desencadear mudanças na árvore de estados.
 */ 
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1