Added videos up to 11.

LearnRedux/Videos.md

@@ -21,10 +21,12 @@ const router = (
 
 render(router, document.getElementById('root'))
 ```
-* Use <Link to=''>Bla</Link> to create push state links.
+* Use `<Link to=''>Bla</Link>` to create push state links.
+* browserHistory will be replaced later by `history` which first syncs the browser history with the react store (see next video).
 
 ## Video 4: Setting up React Store
 * One giant state for all data
+* it is called `store`
 ```javascript
 import { createStore, compose } from 'redux'
 import { syncHistoryWithStore } from 'react-router-redux'
@@ -61,12 +63,16 @@ function addComment(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 
+* reducers are functions which take
     - the action
     - a copy of the current state
-* reducers return the updated state
+* reducers return the updated state if there is a change, or the previous state
+* always start like this and then add some conditional functionality:
 ```javascript
 function posts(state = [], action) {
+    if (...) {
+        return nextState
+    }
     return state
 }
 
@@ -78,8 +84,78 @@ import { combineReducers } from 'redux'
 import { routerReducer } from 'react-router-redux'
 
 import posts from './posts'
-const rootReducer = combineReducers({ posts, router: routerReducer })
+const rootReducer = combineReducers({ posts, ..., routing: routerReducer })
 export default rootReducer
 ```
+* always add `routing: routerReducer` at the end to integrate the route changes with other action changes.
+* executes URL changes implicitely
+* <https://github.com/reactjs/react-router-redux>
 
 ## Video 7: Integrating our Store with React Router
+* to make the store globally available, put it on top of the routing
+* replace the browserHistory as mentioned before.
+```diff
+import { Router, Route, IndexRoute, browserHistory } from 'react-router'
++import { Provider } from 'react-redux'
++import store, { history } from './store'
+
+const router = (
++   <Provider store={store}>
+-       <Router history={browserHistory}>
++       <Router history={history}>
+            <Route path='/' component={Main}>
+                <IndexRoute component={} \/>
+                <Route path='/view/:postId' \/>
+            <\/Route>
+        <\/Router>
++   </Provider>
+)
+
+render(router, document.getElementById('root'))
+```
+* The state is now stored in the store. `$r.store.getState()` 
+
+## Video 8: Understanding the Reducer's Job and Dispatching Actions
+* action creators return actions
+* actions invoke state changes
+* reducers change the state
+* the store provides a dispatch function
+```javascript
+// on the console
+$r.store.dispatch({type: 'INCREMENT', index: 1})
+```
+* The dispatcher sends the action to **every** reducer
+* Therefore, the reducer needs to have some conditional logic.
+
+## Video 9: Accessing dispatch and state with Redux
+* in regular React, the state or parts of it are propagated via props
+* in Redux, `connect` injects the data in the components that need it
+* for that, we wrap the main component with one that has the state and dispatcher propagated
+```javascript
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import * as actionCreators from './actions/actionCreators'
+import Main from './Main'
+
+function mapStateToProps(state) {
+    return {
+        posts: state.posts,
+        comments: state.comments,
+    }
+}
+
+function mapDispatchToProps(dispatch) {
+    return bindActionCreators(actionCreators, dispatch)
+}
+
+const App = connect(mapStateToProps, mapDispatchToProps)(Main)
+export default App
+```
+* because Main ist just JSX, connect injects standardized props into it and makes the state and dispatcher available.
+* You can still propagate data down with props
+
+## Video 10: Displaying Redux State inside our Components
+* Creating React components
+
+## Video 11: Updating State with Reducers
+

ReactForBeginners/Videos.md

@@ -1,6 +1,6 @@
 # React for Beginners
 
-* Video course: https://reactforbeginners.com/account
+* Video course: <https://reactforbeginners.com/account>
 
 ## Video 1: Tooling
 * create-react-app
@@ -9,7 +9,7 @@
 * React dev tools
 
 ## Video 2: Thinking and Understanding React Components
-* https://facebook.github.io/react/docs/react-component.html
+* <https://facebook.github.io/react/docs/react-component.html>
 
 *  React applications are split into components which share information over different ways like state and properties.
 
@@ -38,13 +38,14 @@ import MyComponent from './MyComponent'
 
 render(<StorePicker />, document.getElementById('main'))
 ```
+* `$r` allows access to the react object from the console.
 
 ## Video 4: Write HTML with JSX
 * You can write HTML code directly in return functions within parentheses.
-* Wes blog post about how to use emmet in babel
-* need to replace class tags with className, because class is sth different in JS
+* Wes blog post about how to use Emmet in babel
+* need to replace `class` tags with `className`, because class is sth different in JS
 * Can only return one parent element (need to wrap the children)
-* HTML comments have to be inside {/**/} in JSX *AND* inside parent element.
+* HTML comments have to be inside `{/**/}` in JSX **and** inside parent element.
 
 ## Video 5: CSS
 * Can be in HTML head
@@ -77,7 +78,7 @@ class MyComponent extends React.Component {
 
 ## Video 8: Stateless Functional Components
 * If component has just a return function, you can use a stateless functional component
-* replace class MyClass ... with
+* replace `class MyClass ...` with
 ```javascript
 const MyFunction = (props) => {
 	return(
@@ -106,7 +107,7 @@ const Root = () => {
 
 render(<Root />, document.getElementById('main'))
 ```
-* (Video 18): the ':myarg' will be available as ```this.props.params.myarg```
+* (Video 18): the `:myarg` will be available as `this.props.params.myarg`
 
 ## Video 10: Helper and Utility Functions
 * Organize helper functions in separate files.
@@ -119,8 +120,8 @@ render(<Root />, document.getElementById('main'))
 ```javascript
 <input type='text' ref={(input)=>{ this.whateverName = input }}
 ```
-* now you can access it through 'this'.
-* You have to bind 'this' in functions other than render
+* now you can access it through `this`.
+* You have to bind `this` in functions other than render
 * See this example with event handling:
 ```javascript
 class MyClass extends React.Component {
@@ -144,7 +145,7 @@ class MyClass extends React.Component {
 ```
 
 ## Video 12: 
-* Docs: https://github.com/ReactTraining/react-router/tree/master/docs
+* [React Router Documentation](https://github.com/ReactTraining/react-router/tree/master/docs)
 * Use context types:
 ```javascript
 // MyComponent.js
@@ -153,10 +154,10 @@ MyComponent.contextTypes = {
 }
 ```
 * This gives access to these functions:
-    - blockTransitions
-    - createHref
-    - replaceWith
-    - transitionTo
+    - `blockTransitions`
+    - `createHref`
+    - `replaceWith`
+    - `transitionTo`
 * Usage:
 ```javascript
 this.context.router.transitionTo('...')
@@ -224,31 +225,31 @@ class App extends React.Component {
 	}
 ...
 ```
-* each element in a loop needs a 'key' attribute, so React can keep track!
-* if you pass down 'key' itself, use a different name, e.g. index!
+* each element in a loop needs a `key` attribute, so React can keep track!
+* if you pass down `key` itself, use a different name, e.g. `index`!
 * use data massaging to extract variables for easier access
 ```javascript
 const { details } = this.props
 ```
 
 ## Video 16: Updating Order State
-* emphasizing **if you pass down 'key' itself, use a different name, e.g. index!**
+* emphasizing **if you pass down `key` itself, use a different name, e.g. `index`!**
 
 ## Video 17: Displaying Order State
-* Use ```Object.keys(...).reduce((prevValue, key)=>{...}, initValue)``` to make a scalar of an object.
+* Use `Object.keys(...).reduce((prevValue, key)=>{...}, initValue)` to make a scalar of an object.
 * Don't forget to check is elements are valid (can change in real-time).
 
 ## Video 18: Persisting State with Firebase
 * Uses 're-base' to sync state with firebase web app
-* https://facebook.github.io/react/docs/state-and-lifecycle.html
-* use componentWillMount() to sync the state before the component loads.
+* [React component lifecycle explained](https://facebook.github.io/react/docs/state-and-lifecycle.html)
+* use `componentWillMount()` to sync the state before the component loads.
 * this way, the component will render only once.
 * How to use react-router parameters
-* use componentWillUnmount() to stop syncing with the database.
+* use `componentWillUnmount()` to stop syncing with the database.
 
 ## Video 19: Persisting Order with localstorage
 * Uses cookies to store data locally
-* use componentWillUpdate(nextProps, nextState) in this case, because it is called every time state or props is updated.
+* use `componentWillUpdate(nextProps, nextState)` in this case, because it is called every time state or props is updated.
 ```javascript
 ...
 	componentWillMount () {
@@ -262,7 +263,7 @@ const { details } = this.props
 	}
 ...
 ```
-* use shouldComponentUpdate() to check data before it is rendered. Returns true if component should be re-rendered or false if not.
+* use `shouldComponentUpdate()` to check data before it is rendered. Returns true if component should be re-rendered or false if not.
 
 ## Video 20: Bi-directional Data Flow and Live State Editing
 * When you write forms, 
@@ -284,7 +285,7 @@ const { details } = this.props
  
 ## Video 21: Removing Items From State
 * CRUD - Create Read Update Delete
-* ```child1state[key] = null``` is required by Firebase. Otherwise, ```delete child1state[key]``` is also possible
+* `child1state[key] = null` is required by Firebase. Otherwise, `delete child1state[key]` is also possible
 ```javascript
 ...
 	deleteElement (key) {
@@ -302,7 +303,7 @@ const { details } = this.props
 * adds and removes again classes to animated items
 * class items can be styled with CSS
 * replace parent element of animation
-	- e.g. <ul className='myclass'> becomes <CSSTransitionGroup className='myclass' component='ul' transitionName⁼'mytrans', transitionEnterTimeout={100} transitionLeaveTimeout={200}>
+	- e.g. `<ul className='myclass'>` becomes `<CSSTransitionGroup className='myclass' component='ul' transitionName⁼'mytrans', transitionEnterTimeout={100} transitionLeaveTimeout={200}>`
 ```stylus
 .mytrans
 	background blue
@@ -315,7 +316,7 @@ const { details } = this.props
 		max-height auto
 		transform translateX(0)
 ```
-* The time in transitionEnterTimeout should match the transition all <>s
+* The time in transitionEnterTimeout should match the `transition all <>s`
 * There are three actions:
 	- enter
 	- leave