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