|
@@ -0,0 +1,85 @@
|
|
|
+## 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 = (
|
|
|
+ <Router history={browserHistory}>
|
|
|
+ <Route path='/' component={Main}>
|
|
|
+ <IndexRoute component={} \/>
|
|
|
+ <Route path='/view/:postId' \/>
|
|
|
+ <\/Route>
|
|
|
+ <\/Router>
|
|
|
+)
|
|
|
+
|
|
|
+render(router, document.getElementById('root'))
|
|
|
+```
|
|
|
+* Use <Link to=''>Bla</Link> 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
|