# 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

![](/files/-LinIwl30uhiDLlL5L5E)

### 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
<article class="card">
  <img class="card-image"
    src="/img/avatar_1.jpg"
    title="Photo of a robot staring at you">

  <h1 class="card-title">Leanne Graham</h1>

  <a class="card-link"
    href="mailto:sincere@april.biz">
    sincere@april.biz
  </a>
</article>
```

```javascript
// handle events
$('.card').click(function() { /* do something */ });
```

### Templates

```markup
<article class="card">
  <img class="card-image"
    src="{{ robot.image }}"
    title="{{ robot.title }}">

  <h1 class="card-title">{{ robot.name }}</h1>

  <a class="card-link"
    href="mailto:{{ robot.email }}">
    {{ robot.email }}
  </a>
</article>
```

```javascript
// handle events
$('.card').click(function() { /* do something */ });
```

### AngularJS

```markup
<article class="card" ng-click="doSomething(robot)">
  <img class="card-image"
    src="{{ robot.image }}"
    title="{{ robot.title }}">

  <h1 class="card-title">{{ robot.name }}</h1>

  <a class="card-link"
    href="mailto:{{ robot.email }}">
    {{ robot.email }}
  </a>
</article>
```

```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!&#x20;

```javascript
// in app.js
ReactDOM.render(
  <h1 className="title">Hello, world!</h1>,
  document.getElementById('root')
);
```

```markup
<!-- in index.html -->
<div id="root"></div>
```

### \[fit] JSX

## JSX 🤷🏽‍♂️

```markup
<h1 className="title">Hello, world!</h1>
```

### JSX?

```javascript
function createElement(type, text) {
  const el = document.createElement(type);
  const textNode = document.createTextNode(text);
  el.appendChild(textNode);
  return el;
}

const h1 = (text) => createElement(`h1`, text);

// and then
document.body.appendChild(
  h1(`Hello, world!`)
);
```

### JSX

```javascript
// JS
createElement('h1', { className: `title` }, `Hello, world.`)

//JSX
<h1 className="title">Hello, world.</h1>
```

[🙋🏾‍♂️ full example](https://codepen.io/winkerVSbecks/pres/oWprdW)

### Virtual DOM&#x20;

![original 150%](/files/-LinIwlKiPt-ZTGHoz1b)&#x20;

### React Terminology

* Virtual DOM ✅
* JSX ✅
* State
* Props
* Children
* Stateless vs Stateful Components
* Presentational vs Container Components

### \[fit] Components

### Hello Component

```javascript
const Hello = (props) => {
  return (
    <div className="f1 tc">
      <div>Hello World</div>
      <div>Welcome to {props.company}</div>
    </div>
  );
};
```

![](/files/-LinIwlNi7JiV0IA39c0)

![](/files/-LinIwlPusWM-cvnhZ0F)

### Composition

```javascript
<Form>
  <FormGroup>
    <Label>Username</Label>
    <Input name="username" />

    <Label>Password</Label>
    <Input name="password" />
  </FormGroup>

  <Button>Submit</Button>
</Form>
```

![right fit](/files/-LinIwlR56v3wva3e9qF)

## Thinking in Components

![](/files/-LinIwlT06s-0bYOkRSx)

## Atomic Design Principles&#x20;

> We're not designing pages, we're designing systems of components -- *– Stephen Hay*

### Atomic Design Principles&#x20;

![fit original](/files/-LinIwlVc6iPx0lZZ1B8)

### Atoms&#x20;

* Simplest building block
* HTML tags
* Easily styled
* Highly reusable
* Not very useful on their own

![fit right](/files/-LinIwlXzb9jfBxQuUQp)

### Molecules&#x20;

```javascript
<Form onSubmit={ onSubmit }>
  <Label>Search</Label>
  <Input type="text" value={ search } />

  <Button type="submit">Search</Button>
</Form>
```

![fit right](/files/-LinIwlklI35DZ952uHu)

### Organisms&#x20;

![fit inline](/files/-LinIwlm8lX5_s7Dsltc)

```javascript
<Header>
  <Navigator>
    <Brand />
    <NavItem to="home">Home</NavItem>
    <NavItem to="about">About</NavItem>
    <NavItem to="blog">Blog</NavItem>
  </Navigator>
  <SearchForm />
</Header>
```

### Ecosystem&#x20;

* What the client will see
* Connected containers
* Many components that make up a view

![right fit](/files/-LinIwloa4w_49vyGxXp)

### Environment&#x20;

* Root Component
* Typically the `<App />` component
* Represents everything packaged together as an application

![left fit](/files/-LinIwlvxAivZR-4loJu)

#### Component Hierarchy

![inline 400% original](/files/-LinIwm78-NkuPYTM6X_)

#### Component Hierarchy

* `FilterableProductTable`
* `SearchBar`
* `ProductTable`
* `ProductCategoryRow`
* `ProductRow`

![right fit original](/files/-LinIwm9CNfesCZOUDPP)

### Quiz

Breakdown the Mockup

![right fit](/files/-LinIwmBlmxB5uvdCc-H)

### Task

Breakdown the Mockup

* Header
* Navigator
* NavigatorLink
* Content
* ProfileCard
* ProfileImage

![right fit](/files/-LinIwmYVnayi30yumpV)

### \[fit] [🤖 Robodex](https://aneagoie.github.io/react-training-RoboDex)

### Let's Code!

```
$ npm install -g create-react-app
$ create-react-app robo-dex
```

### Card

![right original 100%](/files/-LinIwmoMbaFQ4jgwqke)

`<RobotCard>` ├ `<Card>` ├ `<Media>` ├ `<Heading>` └ `<SubHeading>`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rangle-io.gitbook.io/react-training/master/rough-slides/react-training-slides.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.