> For the complete documentation index, see [llms.txt](https://rangle-io.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rangle-io.gitbook.io/react-training/master/rough-slides/react-training-slides.md).
# react-training-slides
## \[fit] Rangle.io
## \[fit] React Training
### Prerequisites
* Access to the command line
* Node.js (v6 or higher)
* NPM (v3 or higher)
* Code editor (Sublime, Atom, etc.)
* Some JavaScript knowledge (ES5/ES6)
### Overview
* ES6
* Light functional JavaScript
* From jQuery to React
* Thinking in Components
* create-react-app
* Components
* JSX
* State & Props
* Stateless components
* Stateful components
* Lifecycle methods
* PropTypes
* DOM mounting
* REST API (fetch)
## \[fit] 🤷🏽♂️ Ecmascript 2015
## \[fit] [🙋🏾♂️ Ecmascript 2015 Examples](https://codepen.io/winkerVSbecks/pres/YVYooe?editors=0012)
### \[fit] Functional Programming
### \[fit] with JavaScript
### Pure Functions
A function where the return value is only determined by
* its input values
* without observable side effects
```javascript
const add = (a, b) => a + b;
```
### Pure Functions (Slice vs. Splice)
```javascript
let letters = ["a", "b", "c"]
letters.slice(1)
// returns ["b", "c"], where letters is still ["a", "b", "c"]
letters.splice(1)
// returns ["b", "c"], where letters is now ["a"]
```
### Map, Filter & Reduce
Array helper methods `map`, `filter` and `reduce` are examples of functional programming, which take in functions and do not mutate the original array.
[🙋🏾♂️ examples](https://codepen.io/winkerVSbecks/pres/eWywaJ?editors=0012)
### Currying
A technique of converting a function that takes multiple arguments into a sequence of functions, each with a single argument.
```javascript
f (a, b, c) ↔️ f(a)(b)(c)
```
### Currying `add`
```javascript
function add (a, b) {
return a + b;
}
add(1, 2); // returns 3
// Curryed add()
function add (a) {
return function(b) {
return a + b ;
}
}
```
### Currying `add`
```javascript
// returns a function where a = 2
const add2 = add(2);
// returns 5
add2(3);
```
### Currying `add` With ES6
```javascript
const add = a => b => a + b;
```
[🙋🏾♂️ example](https://codepen.io/winkerVSbecks/pres/aWEgeJ)
## \[fit] React
### Journey to React
* Direct DOM manipulation/jQuery
* Templates
* Template based frameworks such as AngularJS
### jQuery
```markup
{{ robot.email }}
```
```javascript
// update data
robot.name = 'Ervin Howell';
```
### First Gen. SPA Frameworks
* Renders the DOM using templates
* Manages DOM updates when data changes
* Manages event bindings (`click`, `scroll`, etc.)
## \[fit] How Is React Different?
### \[fit] views as pure
### \[fit] stateless functions
### \[fit] `View(Data)` ➡️ `HTML`
### React
* No templates
* Define UI as components
* connected to data
* Re-renders the whole world when data changes
* Manages event bindings
### Hello, world!
```javascript
// in app.js
ReactDOM.render(
