# 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
* 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.

## 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 18): the ':myarg' will be available as ```this.props.params.myarg```

## 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
		)
	}
}
```

## Video 12: 
* Docs: https://github.com/ReactTraining/react-router/tree/master/docs
* Use context types:
```javascript
// MyComponent.js
MyComponent.contextTypes = {
	router:  React.PropTypes.object
}
```
* This gives access to these functions:
    - blockTransitions
    - createHref
    - replaceWith
    - transitionTo
* Usage:
```javascript
this.context.router.transitionTo('...')
```

## Video 13: Understanding State
* Whenever you want to change anything on your page, you change the state data instead.
* Put the state on the main parent component
* Initialize with
```javascript
class App extends React.Component {
	constructor () {
		super()
		this.state = {
			child1state = {},
			child2state = {},
		}
	}
	render (
		return (
			...
		)
	)
}
```
* When changing the state, you must avoid race conditions. Follow this scheme:
	- make a copy of the state
	- update the copy
	- set the state with copy
```javascript
class App extends React.Component {
	constructor () {
		super()
		this.addChild1StateElement = this.addChild1StateElement.bind(this)
	}
	addChild1StateElement (elem) {
		const child1state = { ...this.state.child1state }
		child1state['new-item'] = elem
		this.setState({ child1state })
	}
	render (
		<ChildComponent addElem={this.addChild1StateElement} \/>
	)
}
```
* Create state manipulating functions on the main component and pass it to the children through props.

## Video 14: Loading Data Into State On Click
* Can be used to load an initial object to the state.

## Video 15: Displaying State with JSX
* Dynamically generate HTML tags based on state data
* React recognizes state changes and re-renders the data
* Example for 
```javascript
...
	render () {
		return (
			<ul>
				{Object.keys(this.state.child1state).map(key => 
					<ChildComponent key={key} details={this.state.child1state[key]}\/>
				)}
			<\/ul>
		)
	}
...
```
* 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!**

## Video 17: Displaying Order State
* 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.
* this way, the component will render only once.
* How to use react-router parameters
* 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.
```javascript
...
	componentWillMount () {
		const localStorageRef = localStorage.getItem('mykey')
		if (localStorage) {
			this.setState({ order: JSON.parse(localStorageRef) })
		}
	}
	componentWillUpdate () {
		localStorage.setItem('mykey', JSON.stringify(nextState.mykey))
	}
...
```
* 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, 
* You can used computed properties
```javascript
...
	handleChange (event, key) {
		const prev = this.props.prevs[key]
		const next = { ...prev, [event.target.name]: event.target.value }
		this.setState(next)
	}
	render () {
		return (
			<input type='text' name='name' value={thing.name} placeholder='Thing name' onChange={(event) => this.handleChange(event, key)} \/>
		)
	}
...
```
 
## 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
```javascript
...
	deleteElement (key) {
		const child1state = { ...this.statte.child1state }
		child1state[key] = null
		this.setState({ child1state })
	}
...
```
* You can store JSX in a variable.

## Video 22: Animating React Components
* use npm package concurrently to concurrently start npm scripts
* use CSSTransitionGroup from 'react-addons-css-transition-group'
* 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}>
```stylus
.mytrans
	background blue
	max-height 0px
	transition all 0.5s
	transform translateX(-120%)
	...
	&.order-enter-active
		background yellow
		max-height auto
		transform translateX(0)
```
* The time in transitionEnterTimeout should match the transition all <>s
* There are three actions:
	- enter
	- leave
	- appear

## Video 23: Authentication