## Video 1: Setting up Webpack * React Dev Tools * Redux Dev Tools ## Video 2: App Layout + Component Setup ## Video 3: Create Single and PhotoGrid components ## Video 3: Setting up React Router ```javascript import { Router, Route, IndexRoute, browserHistory } from 'react-router' const router = ( <\/Route> <\/Router> ) render(router, document.getElementById('root')) ``` * Use Bla to create push state links. ## Video 4: Setting up React Store * One giant state for all data ```javascript import { createStore, compose } from 'redux' import { syncHistoryWithStore } from 'react-router-redux' import { browserHistory } from 'react-router' import rootReducer from './reducers/index' const store = createStore(rootReducer, defaultState) export const history = syncHistoryWithStore(browserHistory, store) export default store ``` ## Video 5: Redux Actions * actions invoke changes of the state (adding, updating, removing data) * actions are objects with two elements: type and payload * action creators are functions which return actions: ```javascript function increment(index) { return { type: 'INCREMENT_LIKES', index, } } function addComment(postId, author, comment) { return { type: 'ADD_COMMENT', postId, author, comment } } ``` ## Video 6: Redux Reducers * reducers handle the data when an action is received * use one reducer per components * reducers are functions which takes - the action - a copy of the current state * reducers return the updated state ```javascript function posts(state = [], action) { return state } export default posts ``` * combine them in a root reducer ```javascript import { combineReducers } from 'redux' import { routerReducer } from 'react-router-redux' import posts from './posts' const rootReducer = combineReducers({ posts, router: routerReducer }) export default rootReducer ``` ## Video 7: Integrating our Store with React Router