worked up to chapter 12

Flexbox/Flexbox.md

@@ -23,6 +23,7 @@
 
 ## Video 5: order
 * Changes the order of elemens
+* Default is 0
     - order: 3          (puts element after others)
     - order: -1         (puts element before others)
 * Positive and negative values are supported
@@ -78,4 +79,20 @@
 * Older browsers use different keywords and show different behavior
 * Use Autoprefixer to crosscompile the CSS3
 
+## Video 14: Pure Flexbox Navigation
+* Style the container and add the display: flex property
+* Style the items, add flex: <grow> <shrink> <basis> property
+* add @media all and (max-width: <width>) properties
+    - add wrap for the container
+    - override grow, shrink and basis for the items
 
+## Video 15: Mobile Content Reordering
+* Container doesn't have to have display: flex from the beginning!
+* Start a smaller media section @media all and (max-width: <width>)
+    - display: flex for smaller media 
+    - Change from (implicit) flex-direction: row to column
+    - Add order for items
+    - Use class change to hide menu (jQuery or others)
+
+## Video 16: Nesting Flexbox for Horizontal and Vertical Centering
+* Elements can be flex items *AND* flex containers simultaneously

ReactForBeginners/Videos.md

@@ -0,0 +1,141 @@
+# React for Beginners
+
+* Video course: https://reactforbeginners.com/account
+
+## Video 1: Tooling
+* create-react-app
+* use Webpack
+* Sublime editor
+* React dev tools
+
+## Video 2: Thinking and Understanding React Components
+*  React applications are split into components which share information over different ways like state and properties.
+
+## Video 3: Our First React Component
+* Write first component
+```javascript
+// MyComponent.js
+import React from 'react'
+
+class MyClass extends React.Component {
+	render (
+		return(
+			<div></div>
+		)
+	)
+}
+
+export default MyClass
+```
+* Render it on the HTML
+```javascript
+// index.js
+import React from 'react'
+import { render } from 'react-dom'
+import MyComponent from './MyComponent'
+
+render(<StorePicker />, document.getElementById('main'))
+```
+
+## 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
+* Can only return one parent element (need to wrap the children)
+* HTML comments have to be inside {/**/} in JSX *AND* inside parent element.
+
+## Video 5: CSS
+* Can be in HTML head
+* Can also be included with 
+```javascript
+import './style.css'
+```
+* Processed by Webpack
+
+## Video 6: Create Application Layout with Components
+* decide how to organize the app with sub-components
+
+## Video 7: Passing Dynamic Data with props
+* add attributes to components
+```javascript
+<Component myProp='data' myObj={JSObj} onClick={doSth}>
+```
+* access variables via props
+```javascript
+class MyComponent extends React.Component {
+	render(
+		return(
+			<p>{this.props.myProp}</p>
+			<p>{this.props.myObj}</p>
+			<p>{this.props.onClick}</p>
+		)
+	)
+}
+```
+
+## Video 8: Stateless Functional Components
+* If component has just a return function, you can use a stateless functional component
+* replace class MyClass ... with
+```javascript
+const MyFunction = (props) => {
+	return(
+		<p>{props.myProp}</p>
+		<p>{props.myObj}</p>
+		<p>{props.onClick}</p>		
+	)
+}
+```
+
+## Video 9: Routing with React Router
+* Don't render component directly, but router
+```javascript
+// index.js
+import { BrowserRouter, Match, Miss } from 'react-router'
+
+const Root = () => {
+	return (
+		<BrowserRouter>
+			<Match exactly pattern='/' component={MyComponent}/>
+			<Match pattern='/mystuff/:myarg' component={MyStuff} />
+			<Miss component={OhNo} />
+		</BrowserRouter>
+	)
+}
+
+render(<Root />, document.getElementById('main'))
+```
+
+## Video 10: Helper and Utility Functions
+* Organize helper functions in separate files.
+
+## Video 11: Working with React Events
+* Works as regular JS events, but adds cross-browser compatibility
+* Think about what event to handle
+* Think about, at what level the event should be handeled and pass the function down to the component via props.
+* Reference form elements as follows:
+```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
+* See this example with event handling:
+```javascript
+class MyClass extends React.Component {
+	constructor () {
+		super()
+		this.myFunction = this.myFunction.bind('this')
+	}
+	myFunction (event) {
+		this.nowAvailable('!!!')
+		event.preventDefault()
+	}
+	render () {
+		return (
+			<p onClick={this.myFunction.bind(this)}>test</p>
+			<p onClick={(e) => {this.myFunction(e)}}>test</p>
+			or
+			<p onClick={this.myFunction}>test</p> Needs constructor hack
+		)
+	}
+}
+```