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

[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

const add = (a, b) => a + b;

Pure Functions (Slice vs. Splice)

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

Currying

A technique of converting a function that takes multiple arguments into a sequence of functions, each with a single argument.

f (a, b, c) ↔️ f(a)(b)(c)

Currying add

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

// returns a function where a = 2
const add2 = add(2);

// returns 5
add2(3);

Currying add With ES6

const add = a => b => a + b;

🙋🏾‍♂️ example

[fit] React

Journey to React

• Direct DOM manipulation/jQuery

• Templates

• Template based frameworks such as AngularJS

jQuery

<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:[e-mail]">
    [e-mail]
  </a>
</article>

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

Templates

<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>

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

AngularJS

<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>

// 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!

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

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

[fit] JSX

JSX 🤷🏽‍♂️

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

JSX?

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

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

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

🙋🏾‍♂️ full example

Virtual DOM

React Terminology

• Virtual DOM ✅

• JSX ✅

• State

• Props

• Children

• Stateless vs Stateful Components

• Presentational vs Container Components

[fit] Components

Hello Component

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

Composition

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

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

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

right fit

Thinking in Components

Atomic Design Principles

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

Atomic Design Principles

fit original

Atoms

• Simplest building block

• HTML tags

• Easily styled

• Highly reusable

• Not very useful on their own

fit right

Molecules

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

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

fit right

Organisms

fit inline

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

Ecosystem

• What the client will see

• Connected containers

• Many components that make up a view

right fit

Environment

• Root Component

• Typically the <App /> component

• Represents everything packaged together as an application

left fit

Component Hierarchy

inline 400% original

Component Hierarchy

• FilterableProductTable

• SearchBar

• ProductTable

• ProductCategoryRow

• ProductRow

right fit original

Quiz

Breakdown the Mockup

right fit

Task

Breakdown the Mockup

• Header

• Navigator

• NavigatorLink

• Content

• ProfileCard

• ProfileImage

right fit

[fit] 🤖 Robodex

Let's Code!

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

Card

right original 100%

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