Programmatic Animation with React-Redux

React.js @ Instacart talk. Example slides.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
<div id="root"></div>

CSS

*, *::before, *::after {
  box-sizing: inherit;
}

html, body, 
#container, 
.container-inner {
  height: 140vh;
  box-sizing: border-box;
  margin: 0;
}

.main-content {
  height: 100%;
  background-color: #43B02A;
}

.absolute-center {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
  
.logo-wrapper {
  width: 298px;
  height: 60px;
}

.logo-white,
.logo-color {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  will-change: opacity;
}

.logo-white {
  background-image: url(https://d2guulkeunn7d8.cloudfront.net/assets/beetstrap/brand/[email protected]);
}

.logo-color {
  background-image: url(https://d2guulkeunn7d8.cloudfront.net/assets/beetstrap/brand/[email protected]);
}

Babel + JSX

// importing isn't possible on jsFiddle, so we fake the Redux imports here
const combineReducers = Redux.combineReducers
const createStore     = Redux.createStore
const connect         = ReactRedux.connect
const Provider        = ReactRedux.Provider

const initialState = [
  'Smells like spirit',
  'Enter Sandman'
];

function playList(state = initialState, action) {
  if (action.type === 'ADD_TRACK') {
    return [
      ...state,
      action.payload
    ];
  }
  return state;
}

const store = createStore(playList);

class App extends React.Component{
	render() {
  	console.log(this.props.testStore);
  	return (
    	<div>
    	  
    	</div>
    )
  }
};

connect(
		state => ({
    	testStore: state
    }),
    dispatch => ({})
)(App);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);