JSFiddle - React, Tailwind, and code Playground

Redux boilerplate

by Varayut Lerdkanlayanawat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
<div id="root"></div>

Babel + JSX

const HelloWorld = (props) => {
	return (
  	<div>
      <h1>Hello {props.firstName} {props.lastName}</h1>
      <p>I'm {props.age} years old</p>
      <button onClick={props.increaseAge}>Increase age</button>
  	</div>
   );
};

class Person extends React.Component {
	increaseAge = () => {
  	store.dispatch({ type: 'INCREASE_AGE' });
  };

  render() {
    const { firstName, lastName } = this.props;
  	return (
    	<HelloWorld 
        firstName={firstName} 
        lastName={lastName} 
        age={this.props.age} 
        increaseAge={this.increaseAge}
      />
    );
  }
}

// Connect to Redux
const reducer = Redux.combineReducers({
	age: (state = 1, action) => {
  	switch (action.type) {
    	case 'INCREASE_AGE': 
      	return ++state;
      default:
      	return state;
    }
  }
});

const store = Redux.createStore(reducer);

const render = () => {
  ReactDOM.render(
    <Person firstName="John" lastName="Doe" {...store.getState()} />, 
    document.getElementById('root')
   );
 };
 
 store.subscribe(render);
 render();