Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CodeLabs React & Flux

CodeLabs React & Flux

Eueung Mulyana

January 02, 2016
Tweet

More Decks by Eueung Mulyana

Other Decks in Programming

Transcript

  1. React + Flux
    Eueung Mulyana
    http://eueung.github.io/js/react
    JS CodeLabs | Attribution-ShareAlike CC BY-SA

    1 / 40

    View full-size slide

  2. Agenda
    React Basics #1
    React Basics #2
    Flux
    2 / 40

    View full-size slide

  3.  React Basics #1
    A JavaScript library for building UIs | React
    3 / 40

    View full-size slide

  4. <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    t
    m
    l
    >
    <
    h
    e
    a
    d
    >
    <
    m
    e
    t
    a c
    h
    a
    r
    s
    e
    t
    =
    "
    U
    T
    F
    -
    8
    " /
    >
    <
    t
    i
    t
    l
    e
    >
    H
    e
    l
    l
    o R
    e
    a
    c
    t
    !
    <
    /
    t
    i
    t
    l
    e
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    c
    d
    n
    j
    s
    .
    c
    l
    o
    u
    d
    f
    l
    a
    r
    e
    .
    c
    o
    m
    /
    a
    j
    a
    x
    /
    l
    i
    b
    s
    /
    b
    a
    b
    e
    l
    -
    c
    o
    r
    e
    /
    5
    .
    8
    .
    2
    3
    /
    b
    r
    o
    w
    s
    e
    r
    .
    m
    i
    n
    .
    j
    s
    "
    <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    <
    d
    i
    v i
    d
    =
    "
    e
    x
    a
    m
    p
    l
    e
    "
    >
    <
    /
    d
    i
    v
    >
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    b
    a
    b
    e
    l
    "
    >
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    <
    h
    1
    >
    H
    e
    l
    l
    o
    , w
    o
    r
    l
    d
    !
    <
    /
    h
    1
    >
    ,
    d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    e
    x
    a
    m
    p
    l
    e
    '
    )
    )
    ;
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    Render @Browser
    hello-00-A.html
    4 / 40

    View full-size slide

  5. Render @Browser
    hello-01-B.html
    src/hello-01.js
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    e
    x
    a
    m
    p
    l
    e
    '
    )
    )
    ;
    <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    t
    m
    l
    >
    <
    h
    e
    a
    d
    >
    <
    m
    e
    t
    a c
    h
    a
    r
    s
    e
    t
    =
    "
    U
    T
    F
    -
    8
    " /
    >
    <
    t
    i
    t
    l
    e
    >
    H
    e
    l
    l
    o R
    e
    a
    c
    t
    !
    <
    /
    t
    i
    t
    l
    e
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    c
    d
    n
    j
    s
    .
    c
    l
    o
    u
    d
    f
    l
    a
    r
    e
    .
    c
    o
    m
    /
    a
    j
    a
    x
    /
    l
    i
    b
    s
    /
    b
    a
    b
    e
    l
    -
    <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    <
    d
    i
    v i
    d
    =
    "
    e
    x
    a
    m
    p
    l
    e
    "
    >
    <
    /
    d
    i
    v
    >
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    b
    a
    b
    e
    l
    " s
    r
    c
    =
    "
    s
    r
    c
    /
    h
    e
    l
    l
    o
    -
    0
    1
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    <
    h
    1
    >
    H
    e
    l
    l
    o
    , w
    o
    r
    l
    d
    !
    <
    /
    h
    1
    >
    ,
    5 / 40

    View full-size slide

  6. <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    t
    m
    l
    >
    <
    h
    e
    a
    d
    >
    <
    m
    e
    t
    a c
    h
    a
    r
    s
    e
    t
    =
    "
    U
    T
    F
    -
    8
    " /
    >
    <
    t
    i
    t
    l
    e
    >
    H
    e
    l
    l
    o R
    e
    a
    c
    t
    !
    <
    /
    t
    i
    t
    l
    e
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    <
    d
    i
    v i
    d
    =
    "
    e
    x
    a
    m
    p
    l
    e
    "
    >
    <
    /
    d
    i
    v
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    b
    u
    i
    l
    d
    /
    h
    e
    l
    l
    o
    -
    0
    2
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    # s
    r
    c
    /
    h
    e
    l
    l
    o
    -
    0
    2
    .
    j
    s (
    J
    S
    X
    )
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    e
    x
    a
    m
    p
    l
    e
    '
    )
    )
    ;
    # b
    u
    i
    l
    d
    /
    h
    e
    l
    l
    o
    -
    0
    2
    .
    j
    s (
    c
    o
    m
    p
    i
    l
    e
    d
    )
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    R
    e
    a
    c
    t
    .
    c
    r
    e
    a
    t
    e
    E
    l
    e
    m
    e
    n
    t
    (
    '
    h
    1
    '
    ,
    n
    u
    l
    l
    ,
    '
    H
    e
    l
    l
    o
    , w
    o
    r
    l
    d
    !
    '
    )
    , d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    e
    x
    a
    m
    p
    l
    e
    '
    )
    )
    ;
    <
    h
    1
    >
    H
    e
    l
    l
    o
    , w
    o
    r
    l
    d
    !
    <
    /
    h
    1
    >
    ,
    Precompile
    JSX to vanilla JS
    n
    p
    m i
    n
    s
    t
    a
    l
    l -
    g b
    a
    b
    e
    l
    -
    c
    l
    i
    n
    p
    m i
    n
    s
    t
    a
    l
    l -
    g b
    a
    b
    e
    l
    -
    p
    r
    e
    s
    e
    t
    -
    r
    e
    a
    c
    t
    n
    p
    m i
    n
    s
    t
    a
    l
    l -
    g b
    a
    b
    e
    l
    -
    p
    r
    e
    s
    e
    t
    -
    e
    s
    2
    0
    1
    5
    $
    > b
    a
    b
    e
    l -
    -
    p
    r
    e
    s
    e
    t
    s r
    e
    a
    c
    t h
    e
    l
    l
    o
    -
    0
    2
    .
    j
    s -
    -
    o
    u
    t
    -
    d
    i
    r
    =
    .
    .
    /
    b
    u
    i
    l
    d
    h
    e
    l
    l
    o
    -
    0
    2
    .
    j
    s -
    > .
    .
    \
    b
    u
    i
    l
    d
    \
    h
    e
    l
    l
    o
    -
    0
    2
    .
    j
    s
    6 / 40

    View full-size slide

  7. this.props
    hello-03.js
    <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    t
    m
    l
    >
    <
    h
    e
    a
    d
    >
    <
    m
    e
    t
    a c
    h
    a
    r
    s
    e
    t
    =
    "
    U
    T
    F
    -
    8
    " /
    >
    <
    t
    i
    t
    l
    e
    >
    H
    e
    l
    l
    o R
    e
    a
    c
    t
    !
    <
    /
    t
    i
    t
    l
    e
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    c
    d
    n
    j
    s
    .
    c
    l
    o
    u
    d
    f
    l
    a
    r
    e
    .
    c
    o
    m
    /
    a
    j
    a
    x
    /
    l
    i
    b
    s
    /
    b
    a
    b
    e
    l
    -
    <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    <
    d
    i
    v i
    d
    =
    "
    e
    x
    a
    m
    p
    l
    e
    "
    >
    <
    /
    d
    i
    v
    >
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    b
    a
    b
    e
    l
    " s
    r
    c
    =
    "
    s
    r
    c
    /
    h
    e
    l
    l
    o
    -
    0
    3
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    v
    a
    r H
    e
    l
    l
    o
    M
    e
    s
    s
    a
    g
    e = R
    e
    a
    c
    t
    .
    c
    r
    e
    a
    t
    e
    C
    l
    a
    s
    s
    (
    {
    r
    e
    n
    d
    e
    r
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    r
    e
    t
    u
    r
    n
    }
    }
    )
    ;
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    <
    d
    i
    v
    >
    H
    e
    l
    l
    o {
    t
    h
    i
    s
    .
    p
    r
    o
    p
    s
    .
    n
    a
    m
    e
    }
    <
    /
    d
    i
    v
    >
    ;
    <
    H
    e
    l
    l
    o
    M
    e
    s
    s
    a
    g
    e n
    a
    m
    e
    =
    "
    J
    o
    h
    n
    " /
    >
    , d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    7 / 40

    View full-size slide

  8. hello-04.js
    v
    a
    r T
    i
    m
    e
    r = R
    e
    a
    c
    t
    .
    c
    r
    e
    a
    t
    e
    C
    l
    a
    s
    s
    (
    {
    g
    e
    t
    I
    n
    i
    t
    i
    a
    l
    S
    t
    a
    t
    e
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    r
    e
    t
    u
    r
    n {
    s
    e
    c
    o
    n
    d
    s
    E
    l
    a
    p
    s
    e
    d
    : 0
    }
    ;
    }
    ,
    t
    i
    c
    k
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    t
    h
    i
    s
    .
    s
    e
    t
    S
    t
    a
    t
    e
    (
    {
    s
    e
    c
    o
    n
    d
    s
    E
    l
    a
    p
    s
    e
    d
    : t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    s
    e
    c
    o
    n
    d
    s
    E
    l
    a
    p
    s
    e
    d +
    }
    ,
    c
    o
    m
    p
    o
    n
    e
    n
    t
    D
    i
    d
    M
    o
    u
    n
    t
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    t
    h
    i
    s
    .
    i
    n
    t
    e
    r
    v
    a
    l = s
    e
    t
    I
    n
    t
    e
    r
    v
    a
    l
    (
    t
    h
    i
    s
    .
    t
    i
    c
    k
    , 1
    0
    0
    0
    )
    ;
    }
    ,
    c
    o
    m
    p
    o
    n
    e
    n
    t
    W
    i
    l
    l
    U
    n
    m
    o
    u
    n
    t
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    c
    l
    e
    a
    r
    I
    n
    t
    e
    r
    v
    a
    l
    (
    t
    h
    i
    s
    .
    i
    n
    t
    e
    r
    v
    a
    l
    )
    ;
    }
    ,
    r
    e
    n
    d
    e
    r
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    r
    e
    t
    u
    r
    n (
    )
    ;
    }
    }
    )
    ;
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    <
    d
    i
    v
    >
    S
    e
    c
    o
    n
    d
    s E
    l
    a
    p
    s
    e
    d
    : {
    t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    s
    e
    c
    o
    n
    d
    s
    E
    l
    a
    p
    s
    e
    d
    }
    <
    /
    d
    i
    v
    <
    T
    i
    m
    e
    r /
    >
    , d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    e
    x
    a
    m
    p
    l
    e
    '
    )
    )
    ;
    this.state
    8 / 40

    View full-size slide

  9. TodoApp
    v
    a
    r T
    o
    d
    o
    L
    i
    s
    t = R
    e
    a
    c
    t
    .
    c
    r
    e
    a
    t
    e
    C
    l
    a
    s
    s
    (
    {
    r
    e
    n
    d
    e
    r
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    v
    a
    r c
    r
    e
    a
    t
    e
    I
    t
    e
    m = f
    u
    n
    c
    t
    i
    o
    n
    (
    i
    t
    e
    m
    ) {
    r
    e
    t
    u
    r
    n
    }
    ;
    r
    e
    t
    u
    r
    n
    }
    }
    )
    ;
    hello-05.js
    <
    l
    i k
    e
    y
    =
    {
    i
    t
    e
    m
    .
    i
    d
    }
    >
    {
    i
    t
    e
    m
    .
    t
    e
    x
    t
    }
    <
    /
    l
    i
    >
    ;
    <
    u
    l
    >
    {
    t
    h
    i
    s
    .
    p
    r
    o
    p
    s
    .
    i
    t
    e
    m
    s
    .
    m
    a
    p
    (
    c
    r
    e
    a
    t
    e
    I
    t
    e
    m
    )
    }
    <
    /
    u
    l
    >
    ;
    v
    a
    r T
    o
    d
    o
    A
    p
    p = R
    e
    a
    c
    t
    .
    c
    r
    e
    a
    t
    e
    C
    l
    a
    s
    s
    (
    {
    g
    e
    t
    I
    n
    i
    t
    i
    a
    l
    S
    t
    a
    t
    e
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    r
    e
    t
    u
    r
    n {
    i
    t
    e
    m
    s
    : [
    ]
    , t
    e
    x
    t
    : '
    '
    }
    ;
    }
    ,
    o
    n
    C
    h
    a
    n
    g
    e
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    ) {
    t
    h
    i
    s
    .
    s
    e
    t
    S
    t
    a
    t
    e
    (
    {
    t
    e
    x
    t
    : e
    .
    t
    a
    r
    g
    e
    t
    .
    v
    a
    l
    u
    e
    }
    )
    ;
    }
    ,
    h
    a
    n
    d
    l
    e
    S
    u
    b
    m
    i
    t
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    ) {
    e
    .
    p
    r
    e
    v
    e
    n
    t
    D
    e
    f
    a
    u
    l
    t
    (
    )
    ;
    v
    a
    r n
    e
    x
    t
    I
    t
    e
    m
    s = t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    i
    t
    e
    m
    s
    .
    c
    o
    n
    c
    a
    t
    (
    [
    {
    t
    e
    x
    t
    : t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    v
    a
    r n
    e
    x
    t
    T
    e
    x
    t = '
    '
    ;
    t
    h
    i
    s
    .
    s
    e
    t
    S
    t
    a
    t
    e
    (
    {
    i
    t
    e
    m
    s
    : n
    e
    x
    t
    I
    t
    e
    m
    s
    , t
    e
    x
    t
    : n
    e
    x
    t
    T
    e
    x
    t
    }
    )
    ;
    }
    ,
    r
    e
    n
    d
    e
    r
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    r
    e
    t
    u
    r
    n (
    <
    h
    3
    >
    T
    O
    D
    O
    <
    /
    h
    3
    >
    <
    T
    o
    d
    o
    L
    i
    s
    t i
    t
    e
    m
    s
    =
    {
    t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    i
    t
    e
    m
    s
    } /
    >
    <
    f
    o
    r
    m o
    n
    S
    u
    b
    m
    i
    t
    =
    {
    t
    h
    i
    s
    .
    h
    a
    n
    d
    l
    e
    S
    u
    b
    m
    i
    t
    }
    >
    <
    i
    n
    p
    u
    t o
    n
    C
    h
    a
    n
    g
    e
    =
    {
    t
    h
    i
    s
    .
    o
    n
    C
    h
    a
    n
    g
    e
    } v
    a
    l
    u
    e
    =
    {
    t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    t
    e
    <
    b
    u
    t
    t
    o
    n
    >
    {
    '
    A
    d
    d #
    ' + (
    t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    i
    t
    e
    m
    s
    .
    l
    e
    n
    g
    t
    h + 1
    )
    }
    <
    /
    f
    o
    r
    m
    >
    <
    /
    d
    i
    v
    >
    )
    ;
    }
    }
    )
    ;
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    <
    d
    i
    v
    >
    <
    T
    o
    d
    o
    A
    p
    p /
    >
    , d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    e
    x
    a
    m
    p
    l
    e
    '
    9 / 40

    View full-size slide

  10. TodoApp | hello-05.js
    10 / 40

    View full-size slide

  11. hello-06.html
    <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    t
    m
    l
    >
    <
    h
    e
    a
    d
    >
    <
    m
    e
    t
    a c
    h
    a
    r
    s
    e
    t
    =
    "
    U
    T
    F
    -
    8
    " /
    >
    <
    t
    i
    t
    l
    e
    >
    H
    e
    l
    l
    o R
    e
    a
    c
    t
    !
    <
    /
    t
    i
    t
    l
    e
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    f
    a
    c
    e
    b
    o
    o
    k
    .
    g
    i
    t
    h
    u
    b
    .
    i
    o
    /
    r
    e
    a
    c
    t
    /
    j
    s
    /
    m
    a
    r
    k
    e
    d
    .
    m
    i
    n
    .
    j
    s
    "
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    c
    d
    n
    j
    s
    .
    c
    l
    o
    u
    d
    f
    l
    a
    r
    e
    .
    c
    o
    m
    /
    a
    j
    a
    x
    /
    l
    i
    b
    s
    /
    b
    a
    b
    e
    l
    -
    c
    o
    r
    e
    /
    5
    .
    8
    .
    2
    3
    /
    b
    r
    o
    w
    s
    e
    r
    .
    m
    i
    n
    .
    j
    s
    "
    <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    <
    d
    i
    v i
    d
    =
    "
    e
    x
    a
    m
    p
    l
    e
    "
    >
    <
    /
    d
    i
    v
    >
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    b
    a
    b
    e
    l
    " s
    r
    c
    =
    "
    s
    r
    c
    /
    h
    e
    l
    l
    o
    -
    0
    6
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    MarkdownEditor
    A Component Using External Plugins
    11 / 40

    View full-size slide

  12. hello-06.js
    v
    a
    r M
    a
    r
    k
    d
    o
    w
    n
    E
    d
    i
    t
    o
    r = R
    e
    a
    c
    t
    .
    c
    r
    e
    a
    t
    e
    C
    l
    a
    s
    s
    (
    {
    g
    e
    t
    I
    n
    i
    t
    i
    a
    l
    S
    t
    a
    t
    e
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    r
    e
    t
    u
    r
    n {
    v
    a
    l
    u
    e
    : '
    T
    y
    p
    e s
    o
    m
    e *
    m
    a
    r
    k
    d
    o
    w
    n
    * h
    e
    r
    e
    !
    '
    }
    ;
    }
    ,
    h
    a
    n
    d
    l
    e
    C
    h
    a
    n
    g
    e
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    t
    h
    i
    s
    .
    s
    e
    t
    S
    t
    a
    t
    e
    (
    {
    v
    a
    l
    u
    e
    : t
    h
    i
    s
    .
    r
    e
    f
    s
    .
    t
    e
    x
    t
    a
    r
    e
    a
    .
    v
    a
    l
    u
    e
    }
    )
    ;
    }
    ,
    r
    a
    w
    M
    a
    r
    k
    u
    p
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    r
    e
    t
    u
    r
    n { _
    _
    h
    t
    m
    l
    : m
    a
    r
    k
    e
    d
    (
    t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    v
    a
    l
    u
    e
    , {
    s
    a
    n
    i
    t
    i
    z
    e
    : t
    r
    u
    e
    }
    ,
    r
    e
    n
    d
    e
    r
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    r
    e
    t
    u
    r
    n (
    <
    h
    3
    >
    I
    n
    p
    u
    t
    <
    /
    h
    3
    >
    <
    t
    e
    x
    t
    a
    r
    e
    a
    o
    n
    C
    h
    a
    n
    g
    e
    =
    {
    t
    h
    i
    s
    .
    h
    a
    n
    d
    l
    e
    C
    h
    a
    n
    g
    e
    }
    r
    e
    f
    =
    "
    t
    e
    x
    t
    a
    r
    e
    a
    "
    d
    e
    f
    a
    u
    l
    t
    V
    a
    l
    u
    e
    =
    {
    t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    v
    a
    l
    u
    e
    } /
    >
    <
    h
    3
    >
    O
    u
    t
    p
    u
    t
    <
    /
    h
    3
    >
    <
    d
    i
    v
    c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    c
    o
    n
    t
    e
    n
    t
    "
    d
    a
    n
    g
    e
    r
    o
    u
    s
    l
    y
    S
    e
    t
    I
    n
    n
    e
    r
    H
    T
    M
    L
    =
    {
    t
    h
    i
    s
    .
    r
    a
    w
    M
    a
    r
    k
    u
    p
    (
    )
    }
    /
    >
    <
    /
    d
    i
    v
    >
    )
    ;
    }
    }
    )
    ;
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    <
    d
    i
    v c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    M
    a
    r
    k
    d
    o
    w
    n
    E
    d
    i
    t
    o
    r
    "
    >
    <
    M
    a
    r
    k
    d
    o
    w
    n
    E
    d
    i
    t
    o
    r /
    >
    , d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    e
    12 / 40

    View full-size slide

  13.  React Basics #2
    Starter Kit Examples
    13 / 40

    View full-size slide

  14. <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    t
    m
    l
    >
    <
    h
    e
    a
    d
    >
    <
    m
    e
    t
    a c
    h
    a
    r
    s
    e
    t
    =
    "
    u
    t
    f
    -
    8
    "
    >
    <
    t
    i
    t
    l
    e
    >
    B
    a
    s
    i
    c E
    x
    a
    m
    p
    l
    e
    <
    /
    t
    i
    t
    l
    e
    >
    <
    l
    i
    n
    k r
    e
    l
    =
    "
    s
    t
    y
    l
    e
    s
    h
    e
    e
    t
    " h
    r
    e
    f
    =
    "
    .
    .
    /
    s
    h
    a
    r
    e
    d
    /
    c
    s
    s
    /
    b
    a
    s
    e
    .
    c
    s
    s
    " /
    >
    <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    <
    h
    1
    >
    B
    a
    s
    i
    c E
    x
    a
    m
    p
    l
    e
    <
    /
    h
    1
    >
    <
    d
    i
    v i
    d
    =
    "
    c
    o
    n
    t
    a
    i
    n
    e
    r
    "
    >
    <
    p
    > T
    o i
    n
    s
    t
    a
    l
    l R
    e
    a
    c
    t
    , f
    o
    l
    l
    o
    w t
    h
    e i
    n
    s
    t
    r
    u
    c
    t
    i
    o
    n
    s o
    n <
    a h
    r
    e
    f
    <
    p
    > I
    f y
    o
    u c
    a
    n s
    e
    e t
    h
    i
    s
    , R
    e
    a
    c
    t i
    s n
    o
    t w
    o
    r
    k
    i
    n
    g r
    i
    g
    h
    t
    . I
    f y
    o
    u c
    h
    e
    c
    k
    e
    d o
    u
    t t
    h
    e s
    o
    u
    r
    c
    e f
    r
    o
    m G
    i
    t
    H
    u
    b m
    a
    k
    e s
    u
    r
    e t
    o r
    u
    n
    <
    /
    d
    i
    v
    >
    <
    h
    4
    >
    E
    x
    a
    m
    p
    l
    e D
    e
    t
    a
    i
    l
    s
    <
    /
    h
    4
    >
    <
    p
    >
    T
    h
    i
    s i
    s w
    r
    i
    t
    t
    e
    n i
    n v
    a
    n
    i
    l
    l
    a J
    a
    v
    a
    S
    c
    r
    i
    p
    t (
    w
    i
    t
    h
    o
    u
    t J
    S
    X
    ) a
    n
    d t
    r
    a
    n
    s
    f
    o
    r
    m
    e
    d i
    n t
    h
    e b
    r
    o
    w
    s
    e
    r
    .
    <
    p
    > L
    e
    a
    r
    n m
    o
    r
    e a
    b
    o
    u
    t R
    e
    a
    c
    t a
    t <
    a h
    r
    e
    f
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    f
    a
    c
    e
    b
    o
    o
    k
    .
    g
    i
    t
    h
    u
    b
    .
    i
    o
    /
    r
    e
    a
    c
    t
    "
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t
    > .
    .
    . <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    Example #1
    React with Vanilla JS
    <
    s
    c
    r
    i
    p
    t
    >
    v
    a
    r E
    x
    a
    m
    p
    l
    e
    A
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n = R
    e
    a
    c
    t
    .
    c
    r
    e
    a
    t
    e
    C
    l
    a
    s
    s
    (
    {
    r
    e
    n
    d
    e
    r
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    v
    a
    r e
    l
    a
    p
    s
    e
    d = M
    a
    t
    h
    .
    r
    o
    u
    n
    d
    (
    t
    h
    i
    s
    .
    p
    r
    o
    p
    s
    .
    e
    l
    a
    p
    s
    e
    d / 1
    0
    0
    )
    ;
    v
    a
    r s
    e
    c
    o
    n
    d
    s = e
    l
    a
    p
    s
    e
    d / 1
    0 + (
    e
    l
    a
    p
    s
    e
    d % 1
    0 ? '
    ' : '
    .
    0
    '
    v
    a
    r m
    e
    s
    s
    a
    g
    e =
    '
    R
    e
    a
    c
    t h
    a
    s b
    e
    e
    n s
    u
    c
    c
    e
    s
    s
    f
    u
    l
    l
    y r
    u
    n
    n
    i
    n
    g f
    o
    r ' + s
    e
    c
    o
    n
    d
    s +
    r
    e
    t
    u
    r
    n R
    e
    a
    c
    t
    .
    D
    O
    M
    .
    p
    (
    n
    u
    l
    l
    , m
    e
    s
    s
    a
    g
    e
    )
    ;
    }
    }
    )
    ;
    /
    / C
    a
    l
    l R
    e
    a
    c
    t
    .
    c
    r
    e
    a
    t
    e
    F
    a
    c
    t
    o
    r
    y i
    n
    s
    t
    e
    a
    d o
    f d
    i
    r
    e
    c
    t
    l
    y c
    a
    l
    l E
    x
    a
    m
    p
    l
    e
    v
    a
    r E
    x
    a
    m
    p
    l
    e
    A
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n
    F
    a
    c
    t
    o
    r
    y = R
    e
    a
    c
    t
    .
    c
    r
    e
    a
    t
    e
    F
    a
    c
    t
    o
    r
    y
    (
    E
    x
    a
    m
    p
    l
    e
    A
    v
    a
    r s
    t
    a
    r
    t = n
    e
    w D
    a
    t
    e
    (
    )
    .
    g
    e
    t
    T
    i
    m
    e
    (
    )
    ;
    s
    e
    t
    I
    n
    t
    e
    r
    v
    a
    l
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    E
    x
    a
    m
    p
    l
    e
    A
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n
    F
    a
    c
    t
    o
    r
    y
    (
    {
    e
    l
    a
    p
    s
    e
    d
    : n
    e
    w D
    a
    t
    e
    (
    )
    .
    g
    e
    t
    T
    i
    m
    e
    (
    )
    d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    c
    o
    n
    t
    a
    i
    n
    e
    r
    '
    )
    )
    ;
    }
    , 5
    0
    )
    ;
    <
    /
    s
    c
    r
    i
    p
    t
    >
    14 / 40

    View full-size slide

  15. Example #2
    React with JSX
    <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    t
    m
    l
    >
    <
    h
    e
    a
    d
    >
    <
    m
    e
    t
    a c
    h
    a
    r
    s
    e
    t
    =
    "
    u
    t
    f
    -
    8
    "
    >
    <
    t
    i
    t
    l
    e
    >
    B
    a
    s
    i
    c E
    x
    a
    m
    p
    l
    e w
    i
    t
    h J
    S
    X
    <
    /
    t
    i
    t
    l
    e
    >
    <
    l
    i
    n
    k r
    e
    l
    =
    "
    s
    t
    y
    l
    e
    s
    h
    e
    e
    t
    " h
    r
    e
    f
    =
    "
    .
    .
    /
    s
    h
    a
    r
    e
    d
    /
    c
    s
    s
    /
    b
    a
    s
    e
    .
    c
    s
    s
    " /
    >
    <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    <
    h
    1
    >
    B
    a
    s
    i
    c E
    x
    a
    m
    p
    l
    e w
    i
    t
    h J
    S
    X
    <
    /
    h
    1
    >
    <
    d
    i
    v i
    d
    =
    "
    c
    o
    n
    t
    a
    i
    n
    e
    r
    "
    >
    <
    p
    > T
    o i
    n
    s
    t
    a
    l
    l R
    e
    a
    c
    t
    , f
    o
    l
    l
    o
    w t
    h
    e i
    n
    s
    t
    r
    u
    c
    t
    i
    o
    n
    s o
    n <
    a h
    r
    e
    f
    <
    p
    > I
    f y
    o
    u c
    a
    n s
    e
    e t
    h
    i
    s
    , R
    e
    a
    c
    t i
    s n
    o
    t w
    o
    r
    k
    i
    n
    g r
    i
    g
    h
    t
    . I
    f y
    o
    u c
    h
    e
    c
    k
    e
    d o
    u
    t t
    h
    e s
    o
    u
    r
    c
    e f
    r
    o
    m G
    i
    t
    H
    u
    b m
    a
    k
    e s
    u
    r
    e t
    o r
    u
    n
    <
    /
    d
    i
    v
    >
    <
    h
    4
    >
    E
    x
    a
    m
    p
    l
    e D
    e
    t
    a
    i
    l
    s
    <
    /
    h
    4
    >
    <
    p
    >
    T
    h
    i
    s i
    s w
    r
    i
    t
    t
    e
    n w
    i
    t
    h J
    S
    X a
    n
    d t
    r
    a
    n
    s
    f
    o
    r
    m
    e
    d i
    n t
    h
    e b
    r
    o
    w
    s
    e
    r
    .
    <
    p
    >
    L
    e
    a
    r
    n m
    o
    r
    e a
    b
    o
    u
    t R
    e
    a
    c
    t a
    t <
    a h
    r
    e
    f
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    f
    a
    c
    e
    b
    o
    o
    k
    .
    g
    i
    t
    h
    u
    b
    .
    i
    o
    /
    r
    e
    a
    c
    t
    "
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    c
    d
    n
    j
    s
    .
    c
    l
    o
    u
    d
    f
    l
    a
    r
    e
    .
    c
    o
    m
    /
    a
    j
    a
    x
    /
    l
    i
    b
    s
    /
    b
    a
    b
    e
    l
    -
    c
    o
    r
    e
    /
    5
    .
    8
    .
    3
    4
    /
    b
    r
    o
    w
    s
    e
    r
    .
    m
    i
    n
    .
    j
    s
    "
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    b
    a
    b
    e
    l
    "
    > .
    .
    . <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    b
    a
    b
    e
    l
    "
    >
    v
    a
    r E
    x
    a
    m
    p
    l
    e
    A
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n = R
    e
    a
    c
    t
    .
    c
    r
    e
    a
    t
    e
    C
    l
    a
    s
    s
    (
    {
    r
    e
    n
    d
    e
    r
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    v
    a
    r e
    l
    a
    p
    s
    e
    d = M
    a
    t
    h
    .
    r
    o
    u
    n
    d
    (
    t
    h
    i
    s
    .
    p
    r
    o
    p
    s
    .
    e
    l
    a
    p
    s
    e
    d / 1
    0
    0
    )
    ;
    v
    a
    r s
    e
    c
    o
    n
    d
    s = e
    l
    a
    p
    s
    e
    d / 1
    0 + (
    e
    l
    a
    p
    s
    e
    d % 1
    0 ? '
    ' : '
    .
    0
    '
    v
    a
    r m
    e
    s
    s
    a
    g
    e =
    '
    R
    e
    a
    c
    t h
    a
    s b
    e
    e
    n s
    u
    c
    c
    e
    s
    s
    f
    u
    l
    l
    y r
    u
    n
    n
    i
    n
    g f
    o
    r ' + s
    e
    c
    o
    n
    d
    s +
    r
    e
    t
    u
    r
    n
    }
    }
    )
    ;
    v
    a
    r s
    t
    a
    r
    t = n
    e
    w D
    a
    t
    e
    (
    )
    .
    g
    e
    t
    T
    i
    m
    e
    (
    )
    ;
    s
    e
    t
    I
    n
    t
    e
    r
    v
    a
    l
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    c
    o
    n
    t
    a
    i
    n
    e
    r
    '
    )
    )
    ;
    }
    , 5
    0
    )
    ;
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    p
    >
    {
    m
    e
    s
    s
    a
    g
    e
    }
    <
    /
    p
    >
    ;
    <
    E
    x
    a
    m
    p
    l
    e
    A
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n e
    l
    a
    p
    s
    e
    d
    =
    {
    n
    e
    w D
    a
    t
    e
    (
    )
    .
    g
    e
    t
    T
    i
    m
    e
    (
    ) - s
    t
    a
    r
    15 / 40

    View full-size slide

  16. Example #1 Example #2
    16 / 40

    View full-size slide

  17. Example #3
    Basic Click Counter (JSX)
    <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    t
    m
    l
    >
    <
    h
    e
    a
    d
    >
    <
    m
    e
    t
    a c
    h
    a
    r
    s
    e
    t
    =
    "
    u
    t
    f
    -
    8
    "
    >
    <
    t
    i
    t
    l
    e
    >
    B
    a
    s
    i
    c E
    x
    a
    m
    p
    l
    e w
    i
    t
    h C
    l
    i
    c
    k C
    o
    u
    n
    t
    e
    r
    <
    /
    t
    i
    t
    l
    e
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    c
    d
    n
    j
    s
    .
    c
    l
    o
    u
    d
    f
    l
    a
    r
    e
    .
    c
    o
    m
    /
    a
    j
    a
    x
    /
    l
    i
    b
    s
    /
    b
    a
    b
    e
    l
    -
    <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    <
    d
    i
    v i
    d
    =
    "
    m
    e
    s
    s
    a
    g
    e
    " a
    l
    i
    g
    n
    =
    "
    c
    e
    n
    t
    e
    r
    "
    >
    <
    /
    d
    i
    v
    >
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    b
    a
    b
    e
    l
    "
    >
    v
    a
    r C
    o
    u
    n
    t
    e
    r = R
    e
    a
    c
    t
    .
    c
    r
    e
    a
    t
    e
    C
    l
    a
    s
    s
    (
    {
    g
    e
    t
    I
    n
    i
    t
    i
    a
    l
    S
    t
    a
    t
    e
    : f
    u
    n
    c
    t
    i
    o
    n (
    ) {
    r
    e
    t
    u
    r
    n { c
    l
    i
    c
    k
    C
    o
    u
    n
    t
    : 0 }
    ;
    }
    ,
    h
    a
    n
    d
    l
    e
    C
    l
    i
    c
    k
    : f
    u
    n
    c
    t
    i
    o
    n (
    ) {
    t
    h
    i
    s
    .
    s
    e
    t
    S
    t
    a
    t
    e
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    s
    t
    a
    t
    e
    ) {
    r
    e
    t
    u
    r
    n {
    c
    l
    i
    c
    k
    C
    o
    u
    n
    t
    : s
    t
    a
    t
    e
    .
    c
    l
    i
    c
    k
    C
    o
    u
    n
    t + 1
    }
    ;
    }
    )
    ;
    }
    ,
    r
    e
    n
    d
    e
    r
    : f
    u
    n
    c
    t
    i
    o
    n (
    ) {
    r
    e
    t
    u
    r
    n (
    <
    h
    2 o
    n
    C
    l
    i
    c
    k
    =
    {
    t
    h
    i
    s
    .
    h
    a
    n
    d
    l
    e
    C
    l
    i
    c
    k
    }
    >
    C
    l
    i
    c
    k m
    e
    ! N
    u
    m
    }
    }
    )
    ;
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    ( <
    C
    o
    u
    n
    t
    e
    r /
    >
    , d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    m
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    17 / 40

    View full-size slide

  18. <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    t
    m
    l
    >
    <
    h
    e
    a
    d
    > .
    .
    . <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    .
    .
    .
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    c
    d
    n
    j
    s
    .
    c
    l
    o
    u
    d
    f
    l
    a
    r
    e
    .
    c
    o
    m
    /
    a
    j
    a
    x
    /
    l
    i
    b
    s
    /
    b
    a
    b
    e
    l
    -
    c
    o
    r
    e
    /
    5
    .
    8
    .
    3
    4
    /
    b
    r
    o
    w
    s
    e
    r
    .
    m
    i
    n
    .
    j
    s
    "
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    b
    a
    b
    e
    l
    " s
    r
    c
    =
    "
    e
    x
    a
    m
    p
    l
    e
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    Example #4
    External JSX
    example.js
    v
    a
    r E
    x
    a
    m
    p
    l
    e
    A
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n = R
    e
    a
    c
    t
    .
    c
    r
    e
    a
    t
    e
    C
    l
    a
    s
    s
    (
    {
    r
    e
    n
    d
    e
    r
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    v
    a
    r e
    l
    a
    p
    s
    e
    d = M
    a
    t
    h
    .
    r
    o
    u
    n
    d
    (
    t
    h
    i
    s
    .
    p
    r
    o
    p
    s
    .
    e
    l
    a
    p
    s
    e
    d / 1
    0
    0
    )
    ;
    v
    a
    r s
    e
    c
    o
    n
    d
    s = e
    l
    a
    p
    s
    e
    d / 1
    0 + (
    e
    l
    a
    p
    s
    e
    d % 1
    0 ? '
    ' : '
    .
    0
    ' )
    ;
    v
    a
    r m
    e
    s
    s
    a
    g
    e = '
    R
    e
    a
    c
    t h
    a
    s b
    e
    e
    n s
    u
    c
    c
    e
    s
    s
    f
    u
    l
    l
    y r
    u
    n
    n
    i
    n
    g f
    o
    r '
    r
    e
    t
    u
    r
    n
    }
    }
    )
    ;
    v
    a
    r s
    t
    a
    r
    t = n
    e
    w D
    a
    t
    e
    (
    )
    .
    g
    e
    t
    T
    i
    m
    e
    (
    )
    ;
    s
    e
    t
    I
    n
    t
    e
    r
    v
    a
    l
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    }
    , 5
    0
    )
    ;
    <
    p
    >
    {
    m
    e
    s
    s
    a
    g
    e
    }
    <
    /
    p
    >
    ;
    <
    E
    x
    a
    m
    p
    l
    e
    A
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n e
    l
    a
    p
    s
    e
    d
    =
    {
    n
    e
    w D
    a
    t
    e
    (
    )
    .
    g
    e
    t
    18 / 40

    View full-size slide

  19. Example #5
    Precompiled JSX (Vanilla JS @Browser)
    $
    > b
    a
    b
    e
    l -
    -
    p
    r
    e
    s
    e
    t
    s r
    e
    a
    c
    t e
    x
    a
    m
    p
    l
    e
    .
    j
    s -
    -
    o
    u
    t
    -
    d
    i
    r
    =
    b
    u
    i
    l
    d
    e
    x
    a
    m
    p
    l
    e
    .
    j
    s -
    > b
    u
    i
    l
    d
    \
    e
    x
    a
    m
    p
    l
    e
    .
    j
    s
    <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    t
    m
    l
    >
    <
    h
    e
    a
    d
    >
    <
    m
    e
    t
    a c
    h
    a
    r
    s
    e
    t
    =
    "
    u
    t
    f
    -
    8
    "
    >
    <
    t
    i
    t
    l
    e
    >
    B
    a
    s
    i
    c E
    x
    a
    m
    p
    l
    e w
    i
    t
    h P
    r
    e
    c
    o
    m
    p
    i
    l
    e
    d J
    S
    X
    <
    /
    t
    i
    t
    l
    e
    >
    <
    l
    i
    n
    k r
    e
    l
    =
    "
    s
    t
    y
    l
    e
    s
    h
    e
    e
    t
    " h
    r
    e
    f
    =
    "
    .
    .
    /
    s
    h
    a
    r
    e
    d
    /
    c
    s
    s
    /
    b
    a
    s
    e
    .
    c
    s
    s
    " /
    >
    <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    <
    h
    1
    >
    B
    a
    s
    i
    c E
    x
    a
    m
    p
    l
    e w
    i
    t
    h P
    r
    e
    c
    o
    m
    p
    i
    l
    e
    d J
    S
    X
    <
    /
    h
    1
    >
    <
    d
    i
    v i
    d
    =
    "
    c
    o
    n
    t
    a
    i
    n
    e
    r
    "
    >
    <
    p
    > I
    f y
    o
    u c
    a
    n s
    e
    e t
    h
    i
    s
    , R
    e
    a
    c
    t i
    s n
    o
    t r
    u
    n
    n
    i
    n
    g
    . T
    r
    y r
    u
    n
    n
    i
    <
    p
    r
    e
    > .
    .
    . <
    /
    p
    r
    e
    >
    <
    /
    d
    i
    v
    >
    <
    h
    4
    >
    E
    x
    a
    m
    p
    l
    e D
    e
    t
    a
    i
    l
    s
    <
    /
    h
    4
    >
    <
    p
    >
    T
    h
    i
    s i
    s w
    r
    i
    t
    t
    e
    n w
    i
    t
    h J
    S
    X i
    n a s
    e
    p
    a
    r
    a
    t
    e f
    i
    l
    e a
    n
    d p
    r
    e
    c
    o
    m
    p
    <
    p
    r
    e
    >
    n
    p
    m i
    n
    s
    t
    a
    l
    l -
    g b
    a
    b
    e
    l
    c
    d e
    x
    a
    m
    p
    l
    e
    s
    /
    b
    a
    s
    i
    c
    -
    j
    s
    x
    -
    p
    r
    e
    c
    o
    m
    p
    i
    l
    e
    /
    b
    a
    b
    e
    l e
    x
    a
    m
    p
    l
    e
    .
    j
    s -
    -
    o
    u
    t
    -
    d
    i
    r
    =
    b
    u
    i
    l
    d
    <
    /
    p
    r
    e
    >
    <
    p
    > L
    e
    a
    r
    n m
    o
    r
    e a
    b
    o
    u
    t R
    e
    a
    c
    t a
    t <
    a h
    r
    e
    f
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    f
    a
    c
    e
    b
    o
    o
    k
    .
    g
    i
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    b
    u
    i
    l
    d
    /
    e
    x
    a
    m
    p
    l
    e
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    19 / 40

    View full-size slide

  20. Example #6
    JSX and Harmony (ES6|ES2015)
    <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    e
    a
    d
    >
    <
    m
    e
    t
    a c
    h
    a
    r
    s
    e
    t
    =
    "
    u
    t
    f
    -
    8
    "
    >
    <
    t
    i
    t
    l
    e
    >
    B
    a
    s
    i
    c E
    x
    a
    m
    p
    l
    e w
    i
    t
    h J
    S
    X a
    n
    d E
    S
    6 f
    e
    a
    t
    u
    r
    e
    s
    <
    /
    t
    i
    t
    l
    e
    >
    <
    l
    i
    n
    k r
    e
    l
    =
    "
    s
    t
    y
    l
    e
    s
    h
    e
    e
    t
    " h
    r
    e
    f
    =
    "
    .
    .
    /
    s
    h
    a
    r
    e
    d
    /
    c
    s
    s
    /
    b
    a
    s
    e
    .
    c
    s
    s
    " /
    >
    <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    <
    h
    1
    >
    B
    a
    s
    i
    c E
    x
    a
    m
    p
    l
    e w
    i
    t
    h J
    S
    X a
    n
    d E
    S
    6 f
    e
    a
    t
    u
    r
    e
    s
    <
    /
    h
    1
    >
    <
    d
    i
    v i
    d
    =
    "
    c
    o
    n
    t
    a
    i
    n
    e
    r
    "
    >
    <
    p
    >
    T
    o i
    n
    s
    t
    a
    l
    l R
    e
    a
    c
    t
    , f
    o
    l
    l
    o
    w t
    h
    e i
    n
    s
    t
    r
    u
    c
    t
    i
    o
    n
    s o
    n <
    a h
    r
    e
    f
    <
    p
    > I
    f y
    o
    u c
    a
    n s
    e
    e t
    h
    i
    s
    , R
    e
    a
    c
    t i
    s n
    o
    t w
    o
    r
    k
    i
    n
    g r
    i
    g
    h
    t
    . I
    f y
    o
    u c
    h
    e
    c
    k
    e
    d o
    u
    t t
    h
    e s
    o
    u
    r
    c
    e f
    r
    o
    m G
    i
    t
    H
    u
    b m
    a
    k
    e s
    u
    r
    e t
    o r
    u
    n
    <
    /
    d
    i
    v
    >
    <
    h
    4
    >
    E
    x
    a
    m
    p
    l
    e D
    e
    t
    a
    i
    l
    s
    <
    /
    h
    4
    >
    <
    p
    >
    T
    h
    i
    s i
    s w
    r
    i
    t
    t
    e
    n w
    i
    t
    h J
    S
    X w
    i
    t
    h H
    a
    r
    m
    o
    n
    y (
    E
    S
    6
    ) s
    y
    n
    t
    a
    x a
    n
    d t
    r
    a
    n
    s
    f
    o
    r
    m
    e
    d i
    n t
    h
    e b
    r
    o
    w
    s
    e
    r
    .
    <
    p
    >
    L
    e
    a
    r
    n m
    o
    r
    e a
    b
    o
    u
    t R
    e
    a
    c
    t a
    t <
    a h
    r
    e
    f
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    f
    a
    c
    e
    b
    o
    o
    k
    .
    g
    i
    t
    h
    u
    b
    .
    i
    o
    /
    r
    e
    a
    c
    t
    "
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    c
    d
    n
    j
    s
    .
    c
    l
    o
    u
    d
    f
    l
    a
    r
    e
    .
    c
    o
    m
    /
    a
    j
    a
    x
    /
    l
    i
    b
    s
    /
    b
    a
    b
    e
    l
    -
    c
    o
    r
    e
    /
    5
    .
    8
    .
    3
    4
    /
    b
    r
    o
    w
    s
    e
    r
    .
    m
    i
    n
    .
    j
    s
    "
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    b
    a
    b
    e
    l
    "
    > .
    .
    . <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    <
    h
    t
    m
    l
    >
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    b
    a
    b
    e
    l
    "
    >
    c
    l
    a
    s
    s E
    x
    a
    m
    p
    l
    e
    A
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n e
    x
    t
    e
    n
    d
    s R
    e
    a
    c
    t
    .
    C
    o
    m
    p
    o
    n
    e
    n
    t {
    r
    e
    n
    d
    e
    r
    (
    ) {
    v
    a
    r e
    l
    a
    p
    s
    e
    d = M
    a
    t
    h
    .
    r
    o
    u
    n
    d
    (
    t
    h
    i
    s
    .
    p
    r
    o
    p
    s
    .
    e
    l
    a
    p
    s
    e
    d / 1
    0
    0
    )
    ;
    v
    a
    r s
    e
    c
    o
    n
    d
    s = e
    l
    a
    p
    s
    e
    d / 1
    0 + (
    e
    l
    a
    p
    s
    e
    d % 1
    0 ? '
    ' : '
    .
    0
    '
    v
    a
    r m
    e
    s
    s
    a
    g
    e = `
    R
    e
    a
    c
    t h
    a
    s b
    e
    e
    n s
    u
    c
    c
    e
    s
    s
    f
    u
    l
    l
    y r
    u
    n
    n
    i
    n
    g f
    o
    r
    r
    e
    t
    u
    r
    n
    }
    }
    v
    a
    r s
    t
    a
    r
    t = n
    e
    w D
    a
    t
    e
    (
    )
    .
    g
    e
    t
    T
    i
    m
    e
    (
    )
    ;
    s
    e
    t
    I
    n
    t
    e
    r
    v
    a
    l
    (
    (
    ) =
    > {
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    }
    , 5
    0
    )
    ;
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    p
    >
    {
    m
    e
    s
    s
    a
    g
    e
    }
    <
    /
    p
    >
    ;
    <
    E
    x
    a
    m
    p
    l
    e
    A
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n e
    l
    a
    p
    s
    e
    d
    =
    {
    n
    e
    w D
    a
    t
    e
    (
    )
    20 / 40

    View full-size slide

  21. Example #7
    CommonJS & Browserify (Bundled Vanilla JS @ Browser)
    package.json
    {
    "
    n
    a
    m
    e
    "
    : "
    r
    e
    a
    c
    t
    -
    b
    a
    s
    i
    c
    -
    c
    o
    m
    m
    o
    n
    j
    s
    -
    e
    x
    a
    m
    p
    l
    e
    "
    ,
    "
    d
    e
    s
    c
    r
    i
    p
    t
    i
    o
    n
    "
    : "
    B
    a
    s
    i
    c e
    x
    a
    m
    p
    l
    e o
    f u
    s
    i
    n
    g R
    e
    a
    c
    t w
    i
    t
    h C
    o
    m
    m
    o
    n
    J
    S
    "
    "
    m
    a
    i
    n
    "
    : "
    i
    n
    d
    e
    x
    .
    j
    s
    "
    ,
    "
    d
    e
    p
    e
    n
    d
    e
    n
    c
    i
    e
    s
    "
    : {
    "
    b
    a
    b
    e
    l
    i
    f
    y
    "
    : "
    ^
    6
    .
    3
    .
    0
    "
    ,
    "
    r
    e
    a
    c
    t
    "
    : "
    ^
    0
    .
    1
    4
    .
    0
    -
    r
    c
    1
    "
    ,
    "
    r
    e
    a
    c
    t
    -
    d
    o
    m
    "
    : "
    ^
    0
    .
    1
    4
    .
    0
    -
    r
    c
    1
    "
    ,
    "
    w
    a
    t
    c
    h
    i
    f
    y
    "
    : "
    ^
    3
    .
    4
    .
    0
    "
    }
    ,
    "
    s
    c
    r
    i
    p
    t
    s
    "
    : {
    "
    s
    t
    a
    r
    t
    "
    : "
    w
    a
    t
    c
    h
    i
    f
    y i
    n
    d
    e
    x
    .
    j
    s -
    v -
    t b
    a
    b
    e
    l
    i
    f
    y -
    o b
    u
    n
    d
    l
    e
    .
    j
    s
    "
    }
    } n
    p
    m i
    n
    s
    t
    a
    l
    l
    n
    p
    m s
    t
    a
    r
    t
    21 / 40

    View full-size slide

  22. index.js
    '
    u
    s
    e s
    t
    r
    i
    c
    t
    '
    ;
    v
    a
    r R
    e
    a
    c
    t = r
    e
    q
    u
    i
    r
    e
    (
    '
    r
    e
    a
    c
    t
    '
    )
    ;
    v
    a
    r R
    e
    a
    c
    t
    D
    O
    M = r
    e
    q
    u
    i
    r
    e
    (
    '
    r
    e
    a
    c
    t
    -
    d
    o
    m
    '
    )
    ;
    v
    a
    r E
    x
    a
    m
    p
    l
    e
    A
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n = R
    e
    a
    c
    t
    .
    c
    r
    e
    a
    t
    e
    C
    l
    a
    s
    s
    (
    {
    r
    e
    n
    d
    e
    r
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    v
    a
    r e
    l
    a
    p
    s
    e
    d = M
    a
    t
    h
    .
    r
    o
    u
    n
    d
    (
    t
    h
    i
    s
    .
    p
    r
    o
    p
    s
    .
    e
    l
    a
    p
    s
    e
    d / 1
    0
    0
    )
    ;
    v
    a
    r s
    e
    c
    o
    n
    d
    s = e
    l
    a
    p
    s
    e
    d / 1
    0 + (
    e
    l
    a
    p
    s
    e
    d % 1
    0 ? '
    ' : '
    .
    0
    ' )
    ;
    v
    a
    r m
    e
    s
    s
    a
    g
    e =
    '
    R
    e
    a
    c
    t h
    a
    s b
    e
    e
    n s
    u
    c
    c
    e
    s
    s
    f
    u
    l
    l
    y r
    u
    n
    n
    i
    n
    g f
    o
    r ' + s
    e
    c
    o
    n
    d
    s +
    r
    e
    t
    u
    r
    n
    }
    }
    )
    ;
    v
    a
    r s
    t
    a
    r
    t = n
    e
    w D
    a
    t
    e
    (
    )
    .
    g
    e
    t
    T
    i
    m
    e
    (
    )
    ;
    s
    e
    t
    I
    n
    t
    e
    r
    v
    a
    l
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    c
    o
    n
    t
    a
    i
    n
    e
    r
    '
    )
    )
    ;
    }
    , 5
    0
    )
    ;
    <
    p
    >
    {
    m
    e
    s
    s
    a
    g
    e
    }
    <
    /
    p
    >
    ;
    <
    E
    x
    a
    m
    p
    l
    e
    A
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n e
    l
    a
    p
    s
    e
    d
    =
    {
    n
    e
    w D
    a
    t
    e
    (
    )
    .
    g
    e
    t
    T
    i
    m
    e
    (
    ) - s
    t
    a
    r
    t
    index.html
    <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    t
    m
    l
    >
    <
    h
    e
    a
    d
    >
    <
    m
    e
    t
    a c
    h
    a
    r
    s
    e
    t
    =
    "
    u
    t
    f
    -
    8
    "
    >
    <
    t
    i
    t
    l
    e
    >
    B
    a
    s
    i
    c C
    o
    m
    m
    o
    n
    J
    S E
    x
    a
    m
    p
    l
    e w
    i
    t
    h B
    r
    o
    w
    s
    e
    r
    i
    f
    y
    <
    /
    t
    i
    t
    l
    e
    >
    <
    l
    i
    n
    k r
    e
    l
    =
    "
    s
    t
    y
    l
    e
    s
    h
    e
    e
    t
    " h
    r
    e
    f
    =
    "
    .
    .
    /
    s
    h
    a
    r
    e
    d
    /
    c
    s
    s
    /
    b
    a
    s
    e
    .
    c
    s
    s
    " /
    >
    <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    <
    h
    1
    >
    B
    a
    s
    i
    c C
    o
    m
    m
    o
    n
    J
    S E
    x
    a
    m
    p
    l
    e w
    i
    t
    h B
    r
    o
    w
    s
    e
    r
    i
    f
    y
    <
    /
    h
    1
    >
    <
    d
    i
    v i
    d
    =
    "
    c
    o
    n
    t
    a
    i
    n
    e
    r
    "
    >
    <
    p
    >
    T
    o i
    n
    s
    t
    a
    l
    l R
    e
    a
    c
    t
    , f
    o
    l
    l
    o
    w t
    h
    e i
    n
    s
    t
    r
    u
    c
    t
    i
    o
    n
    s o
    n <
    a h
    r
    e
    f
    <
    p
    >
    I
    f y
    o
    u c
    a
    n s
    e
    e t
    h
    i
    s
    , R
    e
    a
    c
    t i
    s n
    o
    t w
    o
    r
    k
    i
    n
    g r
    i
    g
    h
    t
    . I
    f y
    <
    /
    d
    i
    v
    >
    <
    h
    4
    >
    E
    x
    a
    m
    p
    l
    e D
    e
    t
    a
    i
    l
    s
    <
    /
    h
    4
    >
    <
    p
    >
    T
    h
    i
    s i
    s w
    r
    i
    t
    t
    e
    n w
    i
    t
    h J
    S
    X i
    n a C
    o
    m
    m
    o
    n
    J
    S m
    o
    d
    u
    l
    e a
    n
    d p
    r
    e
    c
    o
    <
    p
    r
    e
    >
    n
    p
    m s
    t
    a
    r
    t
    <
    /
    p
    r
    e
    >
    <
    p
    >
    L
    e
    a
    r
    n m
    o
    r
    e a
    b
    o
    u
    t R
    e
    a
    c
    t a
    t <
    a h
    r
    e
    f
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    f
    a
    c
    e
    b
    o
    o
    k
    .
    g
    i
    t
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    b
    u
    n
    d
    l
    e
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    22 / 40

    View full-size slide

  23. Example #8
    index.html
    <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    t
    m
    l
    >
    <
    h
    e
    a
    d
    >
    <
    m
    e
    t
    a c
    h
    a
    r
    s
    e
    t
    =
    "
    u
    t
    f
    -
    8
    "
    >
    <
    t
    i
    t
    l
    e
    >
    Q
    u
    a
    d
    r
    a
    t
    i
    c F
    o
    r
    m
    u
    l
    a C
    a
    l
    c
    u
    l
    a
    t
    o
    r
    <
    /
    t
    i
    t
    l
    e
    >
    <
    l
    i
    n
    k r
    e
    l
    =
    "
    s
    t
    y
    l
    e
    s
    h
    e
    e
    t
    " h
    r
    e
    f
    =
    "
    .
    .
    /
    s
    h
    a
    r
    e
    d
    /
    c
    s
    s
    /
    b
    a
    s
    e
    .
    c
    s
    s
    " /
    >
    <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    <
    h
    1
    >
    Q
    u
    a
    d
    r
    a
    t
    i
    c F
    o
    r
    m
    u
    l
    a C
    a
    l
    c
    u
    l
    a
    t
    o
    r
    <
    /
    h
    1
    >
    <
    d
    i
    v i
    d
    =
    "
    c
    o
    n
    t
    a
    i
    n
    e
    r
    "
    >
    <
    p
    >
    I
    f y
    o
    u c
    a
    n s
    e
    e t
    h
    i
    s
    , R
    e
    a
    c
    t i
    s n
    o
    t w
    o
    r
    k
    i
    n
    g r
    i
    g
    h
    t
    . T
    h
    i
    s
    <
    /
    d
    i
    v
    >
    <
    h
    4
    >
    E
    x
    a
    m
    p
    l
    e D
    e
    t
    a
    i
    l
    s
    <
    /
    h
    4
    >
    <
    p
    >
    T
    h
    i
    s i
    s w
    r
    i
    t
    t
    e
    n w
    i
    t
    h J
    S
    X i
    n a s
    e
    p
    a
    r
    a
    t
    e f
    i
    l
    e a
    n
    d t
    r
    a
    n
    s
    f
    o
    <
    p
    >
    L
    e
    a
    r
    n m
    o
    r
    e a
    b
    o
    u
    t R
    e
    a
    c
    t a
    t <
    a h
    r
    e
    f
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    f
    a
    c
    e
    b
    o
    o
    k
    .
    g
    i
    t
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    c
    d
    n
    j
    s
    .
    c
    l
    o
    u
    d
    f
    l
    a
    r
    e
    .
    c
    o
    m
    /
    a
    j
    a
    x
    /
    l
    i
    b
    s
    /
    b
    a
    b
    e
    l
    -
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    b
    a
    b
    e
    l
    " s
    r
    c
    =
    "
    e
    x
    a
    m
    p
    l
    e
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    23 / 40

    View full-size slide

  24. v
    a
    r Q
    u
    a
    d
    r
    a
    t
    i
    c
    C
    a
    l
    c
    u
    l
    a
    t
    o
    r = R
    e
    a
    c
    t
    .
    c
    r
    e
    a
    t
    e
    C
    l
    a
    s
    s
    (
    {
    g
    e
    t
    I
    n
    i
    t
    i
    a
    l
    S
    t
    a
    t
    e
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) { r
    e
    t
    u
    r
    n { a
    : 1
    , b
    : 3
    , c
    : -
    4 }
    ; }
    ,
    h
    a
    n
    d
    l
    e
    I
    n
    p
    u
    t
    C
    h
    a
    n
    g
    e
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    k
    e
    y
    , e
    v
    e
    n
    t
    ) {
    v
    a
    r p
    a
    r
    t
    i
    a
    l
    S
    t
    a
    t
    e = {
    }
    ;
    p
    a
    r
    t
    i
    a
    l
    S
    t
    a
    t
    e
    [
    k
    e
    y
    ] = p
    a
    r
    s
    e
    F
    l
    o
    a
    t
    (
    e
    v
    e
    n
    t
    .
    t
    a
    r
    g
    e
    t
    .
    v
    a
    l
    u
    e
    )
    ;
    t
    h
    i
    s
    .
    s
    e
    t
    S
    t
    a
    t
    e
    (
    p
    a
    r
    t
    i
    a
    l
    S
    t
    a
    t
    e
    )
    ;
    }
    ,
    r
    e
    n
    d
    e
    r
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    v
    a
    r a = t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    a
    ; v
    a
    r b = t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    b
    ; v
    a
    r c = t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    c
    ;
    v
    a
    r r
    o
    o
    t = M
    a
    t
    h
    .
    s
    q
    r
    t
    (
    M
    a
    t
    h
    .
    p
    o
    w
    (
    b
    , 2
    ) - 4 * a * c
    )
    ;
    v
    a
    r d
    e
    n
    o
    m
    i
    n
    a
    t
    o
    r = 2 * a
    ;
    v
    a
    r x
    1 = (
    -
    b + r
    o
    o
    t
    ) / d
    e
    n
    o
    m
    i
    n
    a
    t
    o
    r
    ;
    v
    a
    r x
    2 = (
    -
    b - r
    o
    o
    t
    ) / d
    e
    n
    o
    m
    i
    n
    a
    t
    o
    r
    ;
    r
    e
    t
    u
    r
    n (
    <
    s
    t
    r
    o
    n
    g
    > <
    e
    m
    >
    a
    x
    <
    /
    e
    m
    >
    <
    s
    u
    p
    >
    2
    <
    /
    s
    u
    p
    > + <
    e
    m
    >
    b
    x
    <
    /
    e
    m
    > + <
    e
    m
    >
    c
    <
    /
    e
    m
    > = 0 <
    /
    s
    t
    r
    o
    n
    g
    >
    <
    h
    4
    >
    S
    o
    l
    v
    e f
    o
    r <
    e
    m
    >
    x
    <
    /
    e
    m
    >
    :
    <
    /
    h
    4
    >
    <
    p
    >
    <
    l
    a
    b
    e
    l
    > a
    : <
    i
    n
    p
    u
    t t
    y
    p
    e
    =
    "
    n
    u
    m
    b
    e
    r
    " v
    a
    l
    u
    e
    =
    {
    a
    } o
    n
    C
    h
    a
    n
    g
    e
    =
    {
    t
    h
    i
    s
    .
    h
    a
    n
    d
    l
    e
    I
    n
    p
    u
    t
    C
    h
    a
    n
    g
    e
    .
    b
    i
    n
    d
    (
    n
    u
    l
    l
    ,
    <
    l
    a
    b
    e
    l
    > b
    : <
    i
    n
    p
    u
    t t
    y
    p
    e
    =
    "
    n
    u
    m
    b
    e
    r
    " v
    a
    l
    u
    e
    =
    {
    b
    } o
    n
    C
    h
    a
    n
    g
    e
    =
    {
    t
    h
    i
    s
    .
    h
    a
    n
    d
    l
    e
    I
    n
    p
    u
    t
    C
    h
    a
    n
    g
    e
    .
    b
    i
    n
    d
    (
    n
    u
    l
    l
    ,
    <
    l
    a
    b
    e
    l
    > c
    : <
    i
    n
    p
    u
    t t
    y
    p
    e
    =
    "
    n
    u
    m
    b
    e
    r
    " v
    a
    l
    u
    e
    =
    {
    c
    } o
    n
    C
    h
    a
    n
    g
    e
    =
    {
    t
    h
    i
    s
    .
    h
    a
    n
    d
    l
    e
    I
    n
    p
    u
    t
    C
    h
    a
    n
    g
    e
    .
    b
    i
    n
    d
    (
    n
    u
    l
    l
    ,
    x
    : <
    s
    t
    r
    o
    n
    g
    >
    {
    x
    1
    }
    , {
    x
    2
    }
    <
    /
    s
    t
    r
    o
    n
    g
    >
    <
    /
    p
    >
    <
    /
    d
    i
    v
    >
    )
    ;
    }
    }
    )
    ;
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    <
    d
    i
    v
    >
    <
    Q
    u
    a
    d
    r
    a
    t
    i
    c
    C
    a
    l
    c
    u
    l
    a
    t
    o
    r /
    >
    , d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    c
    o
    n
    t
    a
    i
    n
    e
    r
    '
    ) )
    ;
    example.js
    24 / 40

    View full-size slide

  25. Example #9
    WebComponents
    25 / 40

    View full-size slide

  26. <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    e
    a
    d
    >
    <
    m
    e
    t
    a h
    t
    t
    p
    -
    e
    q
    u
    i
    v
    =
    '
    C
    o
    n
    t
    e
    n
    t
    -
    t
    y
    p
    e
    ' c
    o
    n
    t
    e
    n
    t
    =
    '
    t
    e
    x
    t
    /
    h
    t
    m
    l
    ; c
    h
    a
    r
    s
    e
    t
    =
    u
    t
    f
    -
    8
    '
    <
    t
    i
    t
    l
    e
    >
    B
    a
    s
    i
    c E
    x
    a
    m
    p
    l
    e w
    i
    t
    h W
    e
    b
    C
    o
    m
    p
    o
    n
    e
    n
    t
    s
    <
    /
    t
    i
    t
    l
    e
    >
    <
    l
    i
    n
    k r
    e
    l
    =
    "
    s
    t
    y
    l
    e
    s
    h
    e
    e
    t
    " h
    r
    e
    f
    =
    "
    .
    .
    /
    s
    h
    a
    r
    e
    d
    /
    c
    s
    s
    /
    b
    a
    s
    e
    .
    c
    s
    s
    " /
    >
    <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    <
    h
    1
    >
    B
    a
    s
    i
    c E
    x
    a
    m
    p
    l
    e w
    i
    t
    h W
    e
    b
    C
    o
    m
    p
    o
    n
    e
    n
    t
    s
    <
    /
    h
    1
    >
    <
    d
    i
    v i
    d
    =
    "
    c
    o
    n
    t
    a
    i
    n
    e
    r
    "
    >
    <
    p
    >
    T
    o i
    n
    s
    t
    a
    l
    l R
    e
    a
    c
    t
    , f
    o
    l
    l
    o
    w t
    h
    e i
    n
    s
    t
    r
    u
    c
    t
    i
    o
    n
    s o
    n <
    a h
    r
    e
    f
    <
    p
    >
    I
    f y
    o
    u c
    a
    n s
    e
    e t
    h
    i
    s
    , R
    e
    a
    c
    t i
    s n
    o
    t w
    o
    r
    k
    i
    n
    g r
    i
    g
    h
    t
    . I
    f y
    o
    u c
    h
    e
    c
    k
    e
    d o
    u
    t t
    h
    e s
    o
    u
    r
    c
    e f
    r
    o
    m G
    i
    t
    H
    u
    b m
    a
    k
    e s
    u
    r
    e t
    o r
    u
    n
    <
    /
    d
    i
    v
    >
    <
    b
    r /
    >
    <
    b
    r /
    >
    <
    h
    4
    >
    E
    x
    a
    m
    p
    l
    e D
    e
    t
    a
    i
    l
    s
    <
    /
    h
    4
    >
    <
    p
    >
    T
    h
    i
    s e
    x
    a
    m
    p
    l
    e d
    e
    m
    o
    n
    s
    t
    r
    a
    t
    e
    s W
    e
    b
    C
    o
    m
    p
    o
    n
    e
    n
    t
    /
    R
    e
    a
    c
    t
    C
    o
    m
    p
    o
    n
    e
    n
    t i
    n
    t
    e
    r
    o
    p
    e
    r
    a
    b
    i
    l
    i
    t
    y b
    y r
    e
    n
    d
    e
    r
    i
    n
    g a R
    e
    a
    c
    t
    C
    o
    m
    p
    o
    n
    e
    n
    t
    , w
    h
    i
    c
    h r
    e
    n
    d
    e
    r
    s a W
    <
    p
    >
    L
    e
    a
    r
    n m
    o
    r
    e a
    b
    o
    u
    t R
    e
    a
    c
    t a
    t <
    a h
    r
    e
    f
    =
    "
    h
    t
    t
    p
    :
    /
    /
    f
    a
    c
    e
    b
    o
    o
    k
    .
    g
    i
    t
    h
    u
    b
    .
    i
    o
    /
    r
    e
    a
    c
    t
    "
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    s
    h
    a
    r
    e
    d
    /
    t
    h
    i
    r
    d
    p
    a
    r
    t
    y
    /
    w
    e
    b
    c
    o
    m
    p
    o
    n
    e
    n
    t
    s
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    c
    d
    n
    j
    s
    .
    c
    l
    o
    u
    d
    f
    l
    a
    r
    e
    .
    c
    o
    m
    /
    a
    j
    a
    x
    /
    l
    i
    b
    s
    /
    b
    a
    b
    e
    l
    -
    c
    o
    r
    e
    /
    5
    .
    8
    .
    3
    4
    /
    b
    r
    o
    w
    s
    e
    r
    .
    m
    i
    n
    .
    j
    s
    "
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    b
    a
    b
    e
    l
    "
    > .
    .
    . <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    <
    h
    t
    m
    l
    >
    index.html
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    b
    a
    b
    e
    l
    "
    >
    v
    a
    r p
    r
    o
    t
    o = O
    b
    j
    e
    c
    t
    .
    c
    r
    e
    a
    t
    e
    (
    H
    T
    M
    L
    E
    l
    e
    m
    e
    n
    t
    .
    p
    r
    o
    t
    o
    t
    y
    p
    e
    , {
    c
    r
    e
    a
    t
    e
    d
    C
    a
    l
    l
    b
    a
    c
    k
    : {
    v
    a
    l
    u
    e
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    v
    a
    r m
    o
    u
    n
    t
    P
    o
    i
    n
    t = d
    o
    c
    u
    m
    e
    n
    t
    .
    c
    r
    e
    a
    t
    e
    E
    l
    e
    m
    e
    n
    t
    (
    '
    s
    p
    a
    n
    '
    )
    ;
    t
    h
    i
    s
    .
    c
    r
    e
    a
    t
    e
    S
    h
    a
    d
    o
    w
    R
    o
    o
    t
    (
    )
    .
    a
    p
    p
    e
    n
    d
    C
    h
    i
    l
    d
    (
    m
    o
    u
    n
    t
    P
    o
    i
    n
    t
    )
    ;
    v
    a
    r n
    a
    m
    e = t
    h
    i
    s
    .
    g
    e
    t
    A
    t
    t
    r
    i
    b
    u
    t
    e
    (
    '
    n
    a
    m
    e
    '
    )
    ;
    v
    a
    r u
    r
    l = '
    h
    t
    t
    p
    s
    :
    /
    /
    w
    w
    w
    .
    g
    o
    o
    g
    l
    e
    .
    c
    o
    m
    /
    s
    e
    a
    r
    c
    h
    ?
    q
    =
    ' + e
    n
    c
    o
    d
    e
    U
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    }
    }
    }
    )
    ;
    d
    o
    c
    u
    m
    e
    n
    t
    .
    r
    e
    g
    i
    s
    t
    e
    r
    E
    l
    e
    m
    e
    n
    t
    (
    '
    x
    -
    s
    e
    a
    r
    c
    h
    '
    , {
    p
    r
    o
    t
    o
    t
    y
    p
    e
    : p
    r
    o
    t
    o
    }
    )
    ;
    c
    l
    a
    s
    s H
    e
    l
    l
    o
    M
    e
    s
    s
    a
    g
    e e
    x
    t
    e
    n
    d
    s R
    e
    a
    c
    t
    .
    C
    o
    m
    p
    o
    n
    e
    n
    t {
    r
    e
    n
    d
    e
    r
    (
    ) {
    r
    e
    t
    u
    r
    n <
    d
    i
    v
    >
    H
    e
    l
    l
    o <
    x
    -
    s
    e
    a
    r
    c
    h n
    a
    m
    e
    =
    {
    t
    h
    i
    s
    .
    p
    r
    o
    p
    s
    .
    n
    a
    m
    e
    } /
    >
    !
    }
    }
    /
    / M
    o
    u
    n
    t R
    e
    a
    c
    t C
    o
    m
    p
    o
    n
    e
    n
    t (
    w
    h
    i
    c
    h u
    s
    e
    s W
    e
    b
    C
    o
    m
    p
    o
    n
    e
    n
    t w
    h
    i
    c
    h u
    s
    e
    s
    v
    a
    r c
    o
    n
    t
    a
    i
    n
    e
    r = d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    c
    o
    n
    t
    a
    i
    n
    e
    r
    '
    )
    ;
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    a h
    r
    e
    f
    =
    {
    u
    r
    l
    }
    >
    {
    n
    a
    m
    e
    }
    <
    /
    a
    >
    , m
    o
    u
    n
    t
    P
    o
    i
    n
    t
    )
    ;
    <
    H
    e
    l
    l
    o
    M
    e
    s
    s
    a
    g
    e n
    a
    m
    e
    =
    "
    J
    i
    m S
    p
    r
    o
    c
    h
    " /
    >
    , c
    o
    n
    t
    a
    i
    n
    e
    26 / 40

    View full-size slide

  27. Example #10
    <
    d
    i
    v i
    d
    =
    "
    c
    o
    n
    t
    a
    i
    n
    e
    r
    "
    >
    <
    s
    p
    a
    n c
    l
    a
    s
    s
    =
    "
    a
    n
    i
    m
    a
    t
    e
    E
    x
    a
    m
    p
    l
    e
    " d
    a
    t
    a
    -
    r
    e
    a
    c
    t
    i
    d
    =
    "
    .
    0
    "
    >
    <
    d
    i
    v c
    l
    a
    s
    s
    =
    "
    a
    n
    i
    m
    a
    t
    e
    I
    t
    e
    m
    " s
    t
    y
    l
    e
    =
    "
    l
    e
    f
    t
    : 0
    p
    x
    ; b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    : r
    e
    d
    ;
    "
    <
    d
    i
    v c
    l
    a
    s
    s
    =
    "
    a
    n
    i
    m
    a
    t
    e
    I
    t
    e
    m
    " s
    t
    y
    l
    e
    =
    "
    l
    e
    f
    t
    : 1
    2
    8
    p
    x
    ; b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    : g
    r
    a
    <
    d
    i
    v c
    l
    a
    s
    s
    =
    "
    a
    n
    i
    m
    a
    t
    e
    I
    t
    e
    m
    " s
    t
    y
    l
    e
    =
    "
    l
    e
    f
    t
    :
    2
    5
    6
    p
    x
    ;
    b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    :
    b
    l
    u
    e
    ;
    "
    <
    /
    s
    p
    a
    n
    >
    <
    /
    d
    i
    v
    >
    27 / 40

    View full-size slide

  28. index.html
    <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    e
    a
    d
    >
    <
    m
    e
    t
    a c
    h
    a
    r
    s
    e
    t
    =
    "
    u
    t
    f
    -
    8
    "
    >
    <
    t
    i
    t
    l
    e
    >
    E
    x
    a
    m
    p
    l
    e w
    i
    t
    h T
    r
    a
    n
    s
    i
    t
    i
    o
    n
    s
    <
    /
    t
    i
    t
    l
    e
    >
    <
    l
    i
    n
    k r
    e
    l
    =
    "
    s
    t
    y
    l
    e
    s
    h
    e
    e
    t
    " h
    r
    e
    f
    =
    "
    .
    .
    /
    s
    h
    a
    r
    e
    d
    /
    c
    s
    s
    /
    b
    a
    s
    e
    .
    c
    s
    s
    " /
    >
    <
    l
    i
    n
    k r
    e
    l
    =
    "
    s
    t
    y
    l
    e
    s
    h
    e
    e
    t
    " h
    r
    e
    f
    =
    "
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    .
    c
    s
    s
    " /
    >
    <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    <
    h
    1
    >
    E
    x
    a
    m
    p
    l
    e w
    i
    t
    h T
    r
    a
    n
    s
    i
    t
    i
    o
    n
    s
    <
    /
    h
    1
    >
    <
    d
    i
    v i
    d
    =
    "
    c
    o
    n
    t
    a
    i
    n
    e
    r
    "
    >
    <
    p
    >
    T
    o i
    n
    s
    t
    a
    l
    l R
    e
    a
    c
    t
    , f
    o
    l
    l
    o
    w t
    h
    e i
    n
    s
    t
    r
    u
    c
    t
    i
    o
    n
    s o
    n <
    a h
    r
    e
    f
    <
    p
    >
    I
    f y
    o
    u c
    a
    n s
    e
    e t
    h
    i
    s
    , R
    e
    a
    c
    t i
    s n
    o
    t w
    o
    r
    k
    i
    n
    g r
    i
    g
    h
    t
    . I
    f y
    o
    u c
    h
    e
    c
    k
    e
    d o
    u
    t t
    h
    e s
    o
    u
    r
    c
    e f
    r
    o
    m G
    i
    t
    H
    u
    b m
    a
    k
    e s
    u
    r
    e t
    o r
    u
    n
    <
    /
    d
    i
    v
    >
    <
    h
    4
    >
    E
    x
    a
    m
    p
    l
    e D
    e
    t
    a
    i
    l
    s
    <
    /
    h
    4
    >
    <
    p
    >
    T
    h
    i
    s i
    s w
    r
    i
    t
    t
    e
    n w
    i
    t
    h J
    S
    X a
    n
    d t
    r
    a
    n
    s
    f
    o
    r
    m
    e
    d i
    n t
    h
    e b
    r
    o
    w
    s
    e
    r
    .
    <
    p
    >
    L
    e
    a
    r
    n m
    o
    r
    e a
    b
    o
    u
    t R
    e
    a
    c
    t a
    t <
    a h
    r
    e
    f
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    f
    a
    c
    e
    b
    o
    o
    k
    .
    g
    i
    t
    h
    u
    b
    .
    i
    o
    /
    r
    e
    a
    c
    t
    "
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    -
    w
    i
    t
    h
    -
    a
    d
    d
    o
    n
    s
    .
    j
    s
    "
    >
    <
    /
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    r
    e
    a
    c
    t
    -
    0
    .
    1
    4
    .
    5
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    c
    d
    n
    j
    s
    .
    c
    l
    o
    u
    d
    f
    l
    a
    r
    e
    .
    c
    o
    m
    /
    a
    j
    a
    x
    /
    l
    i
    b
    s
    /
    b
    a
    b
    e
    l
    -
    c
    o
    r
    e
    /
    5
    .
    8
    .
    3
    4
    /
    b
    r
    o
    w
    s
    e
    r
    .
    m
    i
    n
    .
    j
    s
    "
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    b
    a
    b
    e
    l
    "
    > .
    .
    . <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    <
    h
    t
    m
    l
    >
    <
    s
    c
    r
    i
    p
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    b
    a
    b
    e
    l
    "
    >
    v
    a
    r C
    S
    S
    T
    r
    a
    n
    s
    i
    t
    i
    o
    n
    G
    r
    o
    u
    p = R
    e
    a
    c
    t
    .
    a
    d
    d
    o
    n
    s
    .
    C
    S
    S
    T
    r
    a
    n
    s
    i
    t
    i
    o
    n
    G
    r
    o
    u
    p
    ;
    v
    a
    r I
    N
    T
    E
    R
    V
    A
    L = 2
    0
    0
    0
    ;
    v
    a
    r A
    n
    i
    m
    a
    t
    e
    D
    e
    m
    o = R
    e
    a
    c
    t
    .
    c
    r
    e
    a
    t
    e
    C
    l
    a
    s
    s
    (
    {
    g
    e
    t
    I
    n
    i
    t
    i
    a
    l
    S
    t
    a
    t
    e
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) { r
    e
    t
    u
    r
    n {
    c
    u
    r
    r
    e
    n
    t
    : 0
    }
    ; }
    ,
    c
    o
    m
    p
    o
    n
    e
    n
    t
    D
    i
    d
    M
    o
    u
    n
    t
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) { t
    h
    i
    s
    .
    i
    n
    t
    e
    r
    v
    a
    l = s
    e
    t
    I
    n
    t
    e
    r
    v
    a
    c
    o
    m
    p
    o
    n
    e
    n
    t
    W
    i
    l
    l
    U
    n
    m
    o
    u
    n
    t
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) { c
    l
    e
    a
    r
    I
    n
    t
    e
    r
    v
    a
    l
    (
    t
    h
    i
    s
    .
    i
    n
    t
    e
    t
    i
    c
    k
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) { t
    h
    i
    s
    .
    s
    e
    t
    S
    t
    a
    t
    e
    (
    {
    c
    u
    r
    r
    e
    n
    t
    : t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    c
    u
    r
    r
    r
    e
    n
    d
    e
    r
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    v
    a
    r c
    h
    i
    l
    d
    r
    e
    n = [
    ]
    ;
    v
    a
    r p
    o
    s = 0
    ;
    v
    a
    r c
    o
    l
    o
    r
    s = [
    '
    r
    e
    d
    '
    , '
    g
    r
    a
    y
    '
    , '
    b
    l
    u
    e
    '
    ]
    ;
    f
    o
    r (
    v
    a
    r i = t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    c
    u
    r
    r
    e
    n
    t
    ; i < t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    c
    u
    r
    r
    e
    n
    t
    v
    a
    r s
    t
    y
    l
    e = { l
    e
    f
    t
    : p
    o
    s * 1
    2
    8
    , b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    : c
    o
    l
    o
    r
    s
    [
    i %
    p
    o
    s
    +
    +
    ;
    c
    h
    i
    l
    d
    r
    e
    n
    .
    p
    u
    s
    h
    (
    }
    r
    e
    t
    u
    r
    n (
    {
    c
    h
    i
    l
    d
    r
    e
    n
    }
    <
    /
    C
    S
    S
    T
    r
    a
    n
    s
    i
    t
    i
    o
    n
    G
    r
    o
    u
    p
    >
    )
    ;
    }
    }
    )
    ;
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    d
    i
    v k
    e
    y
    =
    {
    i
    } c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    a
    n
    i
    m
    a
    t
    e
    I
    t
    e
    m
    " s
    t
    y
    <
    C
    S
    S
    T
    r
    a
    n
    s
    i
    t
    i
    o
    n
    G
    r
    o
    u
    p c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    a
    n
    i
    m
    a
    t
    e
    E
    x
    a
    m
    p
    l
    e
    " t
    r
    a
    n
    s
    i
    t
    <
    A
    n
    i
    m
    a
    t
    e
    D
    e
    m
    o /
    >
    , d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    c
    o
    28 / 40

    View full-size slide

  29. transition.css
    .
    e
    x
    a
    m
    p
    l
    e
    -
    e
    n
    t
    e
    r
    ,
    .
    e
    x
    a
    m
    p
    l
    e
    -
    l
    e
    a
    v
    e {
    -
    w
    e
    b
    k
    i
    t
    -
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    : a
    l
    l .
    2
    5
    s
    ;
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    : a
    l
    l .
    2
    5
    s
    ;
    }
    .
    e
    x
    a
    m
    p
    l
    e
    -
    e
    n
    t
    e
    r
    ,
    .
    e
    x
    a
    m
    p
    l
    e
    -
    l
    e
    a
    v
    e
    .
    e
    x
    a
    m
    p
    l
    e
    -
    l
    e
    a
    v
    e
    -
    a
    c
    t
    i
    v
    e {
    o
    p
    a
    c
    i
    t
    y
    : 0
    .
    0
    1
    ;
    }
    .
    e
    x
    a
    m
    p
    l
    e
    -
    l
    e
    a
    v
    e
    .
    e
    x
    a
    m
    p
    l
    e
    -
    l
    e
    a
    v
    e
    -
    a
    c
    t
    i
    v
    e {
    m
    a
    r
    g
    i
    n
    -
    l
    e
    f
    t
    : -
    1
    2
    8
    p
    x
    ;
    }
    .
    e
    x
    a
    m
    p
    l
    e
    -
    e
    n
    t
    e
    r {
    m
    a
    r
    g
    i
    n
    -
    l
    e
    f
    t
    : 1
    2
    8
    p
    x
    ;
    }
    .
    e
    x
    a
    m
    p
    l
    e
    -
    e
    n
    t
    e
    r
    .
    e
    x
    a
    m
    p
    l
    e
    -
    e
    n
    t
    e
    r
    -
    a
    c
    t
    i
    v
    e
    ,
    .
    e
    x
    a
    m
    p
    l
    e
    -
    l
    e
    a
    v
    e {
    m
    a
    r
    g
    i
    n
    -
    l
    e
    f
    t
    : 0
    ;
    o
    p
    a
    c
    i
    t
    y
    : 1
    ;
    }
    .
    a
    n
    i
    m
    a
    t
    e
    E
    x
    a
    m
    p
    l
    e {
    d
    i
    s
    p
    l
    a
    y
    : b
    l
    o
    c
    k
    ;
    h
    e
    i
    g
    h
    t
    : 1
    2
    8
    p
    x
    ;
    p
    o
    s
    i
    t
    i
    o
    n
    : r
    e
    l
    a
    t
    i
    v
    e
    ;
    w
    i
    d
    t
    h
    : 3
    8
    4
    p
    x
    ;
    }
    .
    a
    n
    i
    m
    a
    t
    e
    I
    t
    e
    m {
    c
    o
    l
    o
    r
    : w
    h
    i
    t
    e
    ;
    f
    o
    n
    t
    -
    s
    i
    z
    e
    : 3
    6
    p
    x
    ;
    f
    o
    n
    t
    -
    w
    e
    i
    g
    h
    t
    : b
    o
    l
    d
    ;
    h
    e
    i
    g
    h
    t
    : 1
    2
    8
    p
    x
    ;
    l
    i
    n
    e
    -
    h
    e
    i
    g
    h
    t
    : 1
    2
    8
    p
    x
    ;
    p
    o
    s
    i
    t
    i
    o
    n
    : a
    b
    s
    o
    l
    u
    t
    e
    ;
    t
    e
    x
    t
    -
    a
    l
    i
    g
    n
    : c
    e
    n
    t
    e
    r
    ;
    -
    w
    e
    b
    k
    i
    t
    -
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    : a
    l
    l .
    2
    5
    s
    ; /
    * T
    O
    D
    O
    : m
    a
    k
    e t
    h
    i
    s a m
    o
    v
    e a
    n
    i
    m
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    : a
    l
    l .
    2
    5
    s
    ; /
    * T
    O
    D
    O
    : m
    a
    k
    e t
    h
    i
    s a m
    o
    v
    e a
    n
    i
    m
    a
    t
    i
    o
    n *
    /
    w
    i
    d
    t
    h
    : 1
    2
    8
    p
    x
    ;
    }
    29 / 40

    View full-size slide

  30.  Flux
    Easy Flux Example | @tonyspiro
    30 / 40

    View full-size slide

  31. Structure
    app.js
    stores/ListStore.js
    dispatcher/AppDispatcher.js
    components/
    AppRoot.jsx
    NewItemForm.jsx
    31 / 40

    View full-size slide

  32. {
    .
    .
    .
    ,
    "
    d
    e
    p
    e
    n
    d
    e
    n
    c
    i
    e
    s
    "
    : {
    "
    b
    a
    b
    e
    l
    i
    f
    y
    "
    : "
    ^
    7
    .
    2
    .
    0
    "
    ,
    "
    b
    a
    b
    e
    l
    -
    p
    r
    e
    s
    e
    t
    -
    r
    e
    a
    c
    t
    "
    : "
    ^
    6
    .
    3
    .
    1
    3
    "
    ,
    "
    b
    a
    b
    e
    l
    -
    p
    r
    e
    s
    e
    t
    -
    e
    s
    2
    0
    1
    5
    "
    : "
    ^
    6
    .
    3
    .
    1
    3
    "
    ,
    "
    b
    r
    o
    w
    s
    e
    r
    i
    f
    y
    "
    : "
    ^
    1
    2
    .
    0
    .
    1
    "
    ,
    "
    e
    v
    e
    n
    t
    s
    "
    : "
    ^
    1
    .
    1
    .
    0
    "
    ,
    "
    f
    l
    u
    x
    "
    : "
    ^
    2
    .
    1
    .
    1
    "
    ,
    "
    g
    u
    l
    p
    "
    : "
    ^
    3
    .
    9
    .
    0
    "
    ,
    "
    g
    u
    l
    p
    -
    r
    e
    n
    a
    m
    e
    "
    : "
    ^
    1
    .
    2
    .
    1
    "
    ,
    "
    g
    u
    l
    p
    -
    u
    g
    l
    i
    f
    y
    "
    : "
    ^
    1
    .
    5
    .
    1
    "
    ,
    "
    l
    o
    d
    a
    s
    h
    "
    : "
    ^
    3
    .
    1
    0
    .
    1
    "
    ,
    "
    r
    e
    a
    c
    t
    "
    : "
    ^
    0
    .
    1
    4
    .
    5
    "
    ,
    "
    r
    e
    a
    c
    t
    -
    d
    o
    m
    "
    : "
    ^
    0
    .
    1
    4
    .
    5
    "
    ,
    "
    r
    u
    n
    -
    s
    e
    q
    u
    e
    n
    c
    e
    "
    : "
    ^
    1
    .
    1
    .
    5
    "
    ,
    "
    v
    i
    n
    y
    l
    -
    s
    o
    u
    r
    c
    e
    -
    s
    t
    r
    e
    a
    m
    "
    : "
    ^
    1
    .
    1
    .
    0
    "
    }
    ,
    "
    d
    e
    v
    D
    e
    p
    e
    n
    d
    e
    n
    c
    i
    e
    s
    "
    : {
    }
    ,
    .
    .
    .
    }
    n
    p
    m i
    n
    s
    t
    a
    l
    l -
    g r
    e
    a
    c
    t r
    e
    a
    c
    t
    -
    d
    o
    m b
    a
    b
    e
    l
    i
    f
    y b
    r
    o
    w
    s
    e
    r
    i
    f
    y f
    l
    u
    x l
    o
    d
    a
    s
    h e
    v
    e
    n
    t
    s
    n
    p
    m i
    n
    s
    t
    a
    l
    l -
    g b
    a
    b
    e
    l
    -
    p
    r
    e
    s
    e
    t
    -
    r
    e
    a
    c
    t b
    a
    b
    e
    l
    -
    p
    r
    e
    s
    e
    t
    -
    e
    s
    2
    0
    1
    5
    n
    p
    m i
    n
    s
    t
    a
    l
    l -
    g v
    i
    n
    y
    l
    -
    s
    o
    u
    r
    c
    e
    -
    s
    t
    r
    e
    a
    m g
    u
    l
    p g
    u
    l
    p
    -
    u
    g
    l
    i
    f
    y g
    u
    l
    p
    -
    r
    e
    n
    a
    m
    e r
    u
    n
    -
    s
    e
    q
    u
    e
    n
    c
    e
    package.json
    33 / 40

    View full-size slide

  33. v
    a
    r g
    u
    l
    p = r
    e
    q
    u
    i
    r
    e
    (
    '
    g
    u
    l
    p
    '
    )
    ;
    v
    a
    r b
    r
    o
    w
    s
    e
    r
    i
    f
    y = r
    e
    q
    u
    i
    r
    e
    (
    '
    b
    r
    o
    w
    s
    e
    r
    i
    f
    y
    '
    )
    ;
    v
    a
    r b
    a
    b
    e
    l
    i
    f
    y = r
    e
    q
    u
    i
    r
    e
    (
    '
    b
    a
    b
    e
    l
    i
    f
    y
    '
    )
    ;
    v
    a
    r s
    o
    u
    r
    c
    e = r
    e
    q
    u
    i
    r
    e
    (
    '
    v
    i
    n
    y
    l
    -
    s
    o
    u
    r
    c
    e
    -
    s
    t
    r
    e
    a
    m
    '
    )
    ;
    v
    a
    r u
    g
    l
    i
    f
    y = r
    e
    q
    u
    i
    r
    e
    (
    '
    g
    u
    l
    p
    -
    u
    g
    l
    i
    f
    y
    '
    )
    ;
    v
    a
    r r
    e
    n
    a
    m
    e = r
    e
    q
    u
    i
    r
    e
    (
    '
    g
    u
    l
    p
    -
    r
    e
    n
    a
    m
    e
    '
    )
    ;
    v
    a
    r r
    u
    n
    S
    e
    q
    u
    e
    n
    c
    e = r
    e
    q
    u
    i
    r
    e
    (
    '
    r
    u
    n
    -
    s
    e
    q
    u
    e
    n
    c
    e
    '
    )
    ;
    g
    u
    l
    p
    .
    t
    a
    s
    k
    (
    '
    b
    u
    i
    l
    d
    '
    , f
    u
    n
    c
    t
    i
    o
    n (
    ) {
    r
    e
    t
    u
    r
    n b
    r
    o
    w
    s
    e
    r
    i
    f
    y
    (
    {
    e
    n
    t
    r
    i
    e
    s
    : '
    a
    p
    p
    .
    j
    s
    '
    ,
    e
    x
    t
    e
    n
    s
    i
    o
    n
    s
    : [
    '
    .
    j
    s
    x
    '
    ]
    ,
    d
    e
    b
    u
    g
    : t
    r
    u
    e
    }
    )
    .
    t
    r
    a
    n
    s
    f
    o
    r
    m
    (
    b
    a
    b
    e
    l
    i
    f
    y
    , {
    p
    r
    e
    s
    e
    t
    s
    : [
    '
    e
    s
    2
    0
    1
    5
    '
    ,
    '
    r
    e
    a
    c
    t
    '
    ]
    }
    )
    .
    b
    u
    n
    d
    l
    e
    (
    )
    .
    p
    i
    p
    e
    (
    s
    o
    u
    r
    c
    e
    (
    '
    b
    u
    n
    d
    l
    e
    .
    j
    s
    '
    )
    )
    .
    p
    i
    p
    e
    (
    g
    u
    l
    p
    .
    d
    e
    s
    t
    (
    '
    d
    i
    s
    t
    '
    )
    )
    ;
    }
    )
    ;
    g
    u
    l
    p
    .
    t
    a
    s
    k
    (
    '
    c
    o
    m
    p
    r
    e
    s
    s
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    r
    e
    t
    u
    r
    n g
    u
    l
    p
    .
    s
    r
    c
    (
    '
    .
    /
    d
    i
    s
    t
    /
    b
    u
    n
    d
    l
    e
    .
    j
    s
    '
    )
    .
    p
    i
    p
    e
    (
    u
    g
    l
    i
    f
    y
    (
    )
    )
    .
    p
    i
    p
    e
    (
    r
    e
    n
    a
    m
    e
    (
    {
    s
    u
    f
    f
    i
    x
    : '
    .
    m
    i
    n
    '
    }
    )
    )
    .
    p
    i
    p
    e
    (
    g
    u
    l
    p
    .
    d
    e
    s
    t
    (
    '
    d
    i
    s
    t
    '
    )
    )
    ;
    }
    )
    ;
    g
    u
    l
    p
    .
    t
    a
    s
    k
    (
    '
    d
    e
    f
    a
    u
    l
    t
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    c
    b
    ) {
    r
    u
    n
    S
    e
    q
    u
    e
    n
    c
    e
    (
    '
    b
    u
    i
    l
    d
    '
    ,
    '
    c
    o
    m
    p
    r
    e
    s
    s
    '
    , c
    b
    )
    ;
    }
    )
    ;
    gulpfile.js
    g
    u
    l
    p
    .
    t
    a
    s
    k
    (
    '
    w
    a
    t
    c
    h
    '
    , f
    u
    n
    c
    t
    i
    o
    n (
    ) {
    g
    u
    l
    p
    .
    w
    a
    t
    c
    h
    (
    "
    .
    /
    *
    .
    j
    s
    "
    , [
    '
    d
    e
    f
    a
    u
    l
    t
    '
    ]
    )
    ;
    g
    u
    l
    p
    .
    w
    a
    t
    c
    h
    (
    "
    .
    /
    c
    o
    m
    p
    o
    n
    e
    n
    t
    s
    /
    *
    .
    j
    s
    x
    "
    , [
    '
    d
    e
    f
    a
    u
    l
    t
    '
    ]
    )
    ;
    g
    u
    l
    p
    .
    w
    a
    t
    c
    h
    (
    "
    .
    /
    d
    i
    s
    p
    a
    t
    c
    h
    e
    r
    /
    *
    .
    j
    s
    "
    , [
    '
    d
    e
    f
    a
    u
    l
    t
    '
    ]
    )
    ;
    g
    u
    l
    p
    .
    w
    a
    t
    c
    h
    (
    "
    .
    /
    s
    t
    o
    r
    e
    s
    /
    *
    .
    j
    s
    "
    , [
    '
    d
    e
    f
    a
    u
    l
    t
    '
    ]
    )
    ;
    }
    )
    ;
    34 / 40

    View full-size slide

  34. index.html
    <
    !
    D
    O
    C
    T
    Y
    P
    E h
    t
    m
    l
    >
    <
    h
    t
    m
    l l
    a
    n
    g
    =
    "
    e
    n
    "
    >
    <
    h
    e
    a
    d
    >
    <
    m
    e
    t
    a c
    h
    a
    r
    s
    e
    t
    =
    "
    U
    T
    F
    -
    8
    "
    >
    <
    t
    i
    t
    l
    e
    >
    E
    a
    s
    y F
    l
    u
    x E
    x
    a
    m
    p
    l
    e
    <
    /
    t
    i
    t
    l
    e
    >
    <
    /
    h
    e
    a
    d
    >
    <
    b
    o
    d
    y
    >
    <
    h
    1
    >
    E
    a
    s
    y F
    l
    u
    x E
    x
    a
    m
    p
    l
    e
    <
    /
    h
    1
    >
    <
    d
    i
    v i
    d
    =
    "
    a
    p
    p
    -
    r
    o
    o
    t
    "
    >
    <
    /
    d
    i
    v
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    d
    i
    s
    t
    /
    b
    u
    n
    d
    l
    e
    .
    m
    i
    n
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    /
    b
    o
    d
    y
    >
    <
    /
    h
    t
    m
    l
    >
    $
    > g
    u
    l
    p
    [
    0
    9
    :
    2
    5
    :
    5
    3
    ] U
    s
    i
    n
    g g
    u
    l
    p
    f
    i
    l
    e .
    /
    g
    u
    l
    p
    f
    i
    l
    e
    .
    j
    s
    [
    0
    9
    :
    2
    5
    :
    5
    3
    ] S
    t
    a
    r
    t
    i
    n
    g '
    d
    e
    f
    a
    u
    l
    t
    '
    .
    .
    .
    [
    0
    9
    :
    2
    5
    :
    5
    3
    ] S
    t
    a
    r
    t
    i
    n
    g '
    b
    u
    i
    l
    d
    '
    .
    .
    .
    [
    0
    9
    :
    2
    5
    :
    5
    9
    ] F
    i
    n
    i
    s
    h
    e
    d '
    b
    u
    i
    l
    d
    ' a
    f
    t
    e
    r 5
    .
    4
    8 s
    [
    0
    9
    :
    2
    5
    :
    5
    9
    ] S
    t
    a
    r
    t
    i
    n
    g '
    c
    o
    m
    p
    r
    e
    s
    s
    '
    .
    .
    .
    [
    0
    9
    :
    2
    6
    :
    0
    4
    ] F
    i
    n
    i
    s
    h
    e
    d '
    c
    o
    m
    p
    r
    e
    s
    s
    ' a
    f
    t
    e
    r 4
    .
    9
    9 s
    [
    0
    9
    :
    2
    6
    :
    0
    4
    ] F
    i
    n
    i
    s
    h
    e
    d '
    d
    e
    f
    a
    u
    l
    t
    ' a
    f
    t
    e
    r 1
    0 s
    app.js
    i
    m
    p
    o
    r
    t R
    e
    a
    c
    t f
    r
    o
    m '
    r
    e
    a
    c
    t
    '
    ;
    i
    m
    p
    o
    r
    t R
    e
    a
    c
    t
    D
    O
    M f
    r
    o
    m '
    r
    e
    a
    c
    t
    -
    d
    o
    m
    '
    ;
    i
    m
    p
    o
    r
    t A
    p
    p
    R
    o
    o
    t f
    r
    o
    m '
    .
    /
    c
    o
    m
    p
    o
    n
    e
    n
    t
    s
    /
    A
    p
    p
    R
    o
    o
    t
    '
    ;
    R
    e
    a
    c
    t
    D
    O
    M
    .
    r
    e
    n
    d
    e
    r
    (
    <
    A
    p
    p
    R
    o
    o
    t /
    >
    , d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    '
    a
    p
    p
    -
    r
    o
    o
    t
    35 / 40

    View full-size slide

  35. ListStore.js
    i
    m
    p
    o
    r
    t {
    E
    v
    e
    n
    t
    E
    m
    i
    t
    t
    e
    r
    } f
    r
    o
    m '
    e
    v
    e
    n
    t
    s
    '
    ;
    i
    m
    p
    o
    r
    t _ f
    r
    o
    m '
    l
    o
    d
    a
    s
    h
    '
    ;
    /
    /
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    l
    e
    t L
    i
    s
    t
    S
    t
    o
    r
    e = _
    .
    e
    x
    t
    e
    n
    d
    (
    {
    }
    , E
    v
    e
    n
    t
    E
    m
    i
    t
    t
    e
    r
    .
    p
    r
    o
    t
    o
    t
    y
    p
    e
    , {
    i
    t
    e
    m
    s
    : [ { n
    a
    m
    e
    : '
    I
    t
    e
    m 1
    '
    , i
    d
    : 0 }
    , { n
    a
    m
    e
    : '
    I
    t
    e
    m 2
    '
    , i
    d
    :
    g
    e
    t
    I
    t
    e
    m
    s
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    )
    { r
    e
    t
    u
    r
    n t
    h
    i
    s
    .
    i
    t
    e
    m
    s
    ; }
    ,
    a
    d
    d
    I
    t
    e
    m
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    n
    e
    w
    _
    i
    t
    e
    m
    )
    { t
    h
    i
    s
    .
    i
    t
    e
    m
    s
    .
    p
    u
    s
    h
    (
    n
    e
    w
    _
    i
    t
    e
    m
    )
    ; }
    ,
    r
    e
    m
    o
    v
    e
    I
    t
    e
    m
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    i
    t
    e
    m
    _
    i
    d
    )
    {
    l
    e
    t i
    t
    e
    m
    s = t
    h
    i
    s
    .
    i
    t
    e
    m
    s
    ;
    _
    .
    r
    e
    m
    o
    v
    e
    (
    i
    t
    e
    m
    s
    ,
    (
    i
    t
    e
    m
    ) =
    > { r
    e
    t
    u
    r
    n i
    t
    e
    m
    _
    i
    d =
    = i
    t
    e
    m
    .
    i
    d
    ; }
    )
    ;
    t
    h
    i
    s
    .
    i
    t
    e
    m
    s = i
    t
    e
    m
    s
    ;
    }
    ,
    e
    m
    i
    t
    C
    h
    a
    n
    g
    e
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    )
    { t
    h
    i
    s
    .
    e
    m
    i
    t
    (
    '
    c
    h
    a
    n
    g
    e
    '
    )
    ; }
    ,
    a
    d
    d
    C
    h
    a
    n
    g
    e
    L
    i
    s
    t
    e
    n
    e
    r
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    c
    a
    l
    l
    b
    a
    c
    k
    )
    { t
    h
    i
    s
    .
    o
    n
    (
    '
    c
    h
    a
    n
    g
    e
    '
    , c
    a
    l
    l
    b
    a
    c
    k
    )
    ; }
    ,
    r
    e
    m
    o
    v
    e
    C
    h
    a
    n
    g
    e
    L
    i
    s
    t
    e
    n
    e
    r
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    c
    a
    l
    l
    b
    a
    c
    k
    ) { t
    h
    i
    s
    .
    r
    e
    m
    o
    v
    e
    L
    i
    s
    t
    e
    n
    e
    r
    (
    }
    )
    ;
    /
    /
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    e
    x
    p
    o
    r
    t d
    e
    f
    a
    u
    l
    t L
    i
    s
    t
    S
    t
    o
    r
    e
    ;
    AppDispatcher.js
    i
    m
    p
    o
    r
    t {
    D
    i
    s
    p
    a
    t
    c
    h
    e
    r
    } f
    r
    o
    m '
    f
    l
    u
    x
    '
    ;
    i
    m
    p
    o
    r
    t L
    i
    s
    t
    S
    t
    o
    r
    e f
    r
    o
    m '
    .
    .
    /
    s
    t
    o
    r
    e
    s
    /
    L
    i
    s
    t
    S
    t
    o
    r
    e
    '
    ;
    /
    /
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    l
    e
    t A
    p
    p
    D
    i
    s
    p
    a
    t
    c
    h
    e
    r = n
    e
    w D
    i
    s
    p
    a
    t
    c
    h
    e
    r
    (
    )
    ;
    /
    /
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    A
    p
    p
    D
    i
    s
    p
    a
    t
    c
    h
    e
    r
    .
    r
    e
    g
    i
    s
    t
    e
    r
    (
    (
    p
    a
    y
    l
    o
    a
    d
    ) =
    > {
    l
    e
    t a
    c
    t
    i
    o
    n = p
    a
    y
    l
    o
    a
    d
    .
    a
    c
    t
    i
    o
    n
    ;
    l
    e
    t n
    e
    w
    _
    i
    t
    e
    m = p
    a
    y
    l
    o
    a
    d
    .
    n
    e
    w
    _
    i
    t
    e
    m
    ;
    l
    e
    t i
    d = p
    a
    y
    l
    o
    a
    d
    .
    i
    d
    ;
    s
    w
    i
    t
    c
    h
    (
    a
    c
    t
    i
    o
    n
    ) {
    c
    a
    s
    e '
    a
    d
    d
    -
    i
    t
    e
    m
    '
    : L
    i
    s
    t
    S
    t
    o
    r
    e
    .
    a
    d
    d
    I
    t
    e
    m
    (
    n
    e
    w
    _
    i
    t
    e
    m
    )
    ; b
    r
    e
    a
    k
    ;
    c
    a
    s
    e '
    r
    e
    m
    o
    v
    e
    -
    i
    t
    e
    m
    '
    : L
    i
    s
    t
    S
    t
    o
    r
    e
    .
    r
    e
    m
    o
    v
    e
    I
    t
    e
    m
    (
    i
    d
    )
    ; b
    r
    e
    a
    k
    ;
    d
    e
    f
    a
    u
    l
    t
    : r
    e
    t
    u
    r
    n t
    r
    u
    e
    ;
    }
    L
    i
    s
    t
    S
    t
    o
    r
    e
    .
    e
    m
    i
    t
    C
    h
    a
    n
    g
    e
    (
    )
    ;
    r
    e
    t
    u
    r
    n t
    r
    u
    e
    ;
    }
    )
    ;
    /
    /
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    e
    x
    p
    o
    r
    t d
    e
    f
    a
    u
    l
    t A
    p
    p
    D
    i
    s
    p
    a
    t
    c
    h
    e
    r
    ;
    36 / 40

    View full-size slide

  36. i
    m
    p
    o
    r
    t R
    e
    a
    c
    t f
    r
    o
    m '
    r
    e
    a
    c
    t
    '
    ;
    i
    m
    p
    o
    r
    t L
    i
    s
    t
    S
    t
    o
    r
    e f
    r
    o
    m '
    .
    .
    /
    s
    t
    o
    r
    e
    s
    /
    L
    i
    s
    t
    S
    t
    o
    r
    e
    '
    ;
    i
    m
    p
    o
    r
    t A
    p
    p
    D
    i
    s
    p
    a
    t
    c
    h
    e
    r f
    r
    o
    m '
    .
    .
    /
    d
    i
    s
    p
    a
    t
    c
    h
    e
    r
    /
    A
    p
    p
    D
    i
    s
    p
    a
    t
    c
    h
    e
    r
    '
    ;
    i
    m
    p
    o
    r
    t N
    e
    w
    I
    t
    e
    m
    F
    o
    r
    m f
    r
    o
    m '
    .
    /
    N
    e
    w
    I
    t
    e
    m
    F
    o
    r
    m
    '
    ;
    /
    /
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    l
    e
    t g
    e
    t
    L
    i
    s
    t
    S
    t
    a
    t
    e = (
    ) =
    > { r
    e
    t
    u
    r
    n { i
    t
    e
    m
    s
    : L
    i
    s
    t
    S
    t
    o
    r
    e
    .
    g
    e
    t
    I
    t
    e
    m
    s
    (
    ) }
    ; }
    /
    /
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    c
    l
    a
    s
    s A
    p
    p
    R
    o
    o
    t e
    x
    t
    e
    n
    d
    s R
    e
    a
    c
    t
    .
    C
    o
    m
    p
    o
    n
    e
    n
    t {
    c
    o
    n
    s
    t
    r
    u
    c
    t
    o
    r
    (
    ) { s
    u
    p
    e
    r
    (
    )
    ; t
    h
    i
    s
    .
    s
    t
    a
    t
    e = g
    e
    t
    L
    i
    s
    t
    S
    t
    a
    t
    e
    (
    )
    ; }
    _
    o
    n
    C
    h
    a
    n
    g
    e
    (
    ) { t
    h
    i
    s
    .
    s
    e
    t
    S
    t
    a
    t
    e
    (
    g
    e
    t
    L
    i
    s
    t
    S
    t
    a
    t
    e
    (
    )
    )
    ; }
    c
    o
    m
    p
    o
    n
    e
    n
    t
    D
    i
    d
    M
    o
    u
    n
    t
    (
    ) { L
    i
    s
    t
    S
    t
    o
    r
    e
    .
    a
    d
    d
    C
    h
    a
    n
    g
    e
    L
    i
    s
    t
    e
    n
    e
    r
    (
    t
    h
    i
    s
    .
    _
    o
    n
    C
    h
    a
    n
    g
    e
    .
    b
    i
    n
    d
    (
    t
    h
    i
    s
    )
    )
    ; }
    c
    o
    m
    p
    o
    n
    e
    n
    t
    W
    i
    l
    l
    U
    n
    m
    o
    u
    n
    t
    (
    ) { L
    i
    s
    t
    S
    t
    o
    r
    e
    .
    r
    e
    m
    o
    v
    e
    C
    h
    a
    n
    g
    e
    L
    i
    s
    t
    e
    n
    e
    r
    (
    t
    h
    i
    s
    .
    _
    o
    n
    C
    h
    a
    n
    g
    e
    .
    b
    i
    n
    d
    (
    t
    h
    i
    s
    )
    )
    ; }
    r
    e
    m
    o
    v
    e
    I
    t
    e
    m
    (
    e
    )
    {
    l
    e
    t i
    d = e
    .
    t
    a
    r
    g
    e
    t
    .
    d
    a
    t
    a
    s
    e
    t
    .
    i
    d
    ;
    A
    p
    p
    D
    i
    s
    p
    a
    t
    c
    h
    e
    r
    .
    d
    i
    s
    p
    a
    t
    c
    h
    (
    { a
    c
    t
    i
    o
    n
    : '
    r
    e
    m
    o
    v
    e
    -
    i
    t
    e
    m
    '
    , i
    d
    : i
    d }
    )
    ;
    }
    r
    e
    n
    d
    e
    r
    (
    )
    {
    l
    e
    t _
    t
    h
    i
    s = t
    h
    i
    s
    ;
    l
    e
    t i
    t
    e
    m
    s = L
    i
    s
    t
    S
    t
    o
    r
    e
    .
    g
    e
    t
    I
    t
    e
    m
    s
    (
    )
    ;
    l
    e
    t i
    t
    e
    m
    H
    t
    m
    l = i
    t
    e
    m
    s
    .
    m
    a
    p
    (
    ( l
    i
    s
    t
    I
    t
    e
    m ) =
    > {
    r
    e
    t
    u
    r
    n
    }
    )
    ;
    r
    e
    t
    u
    r
    n ( ;
    }
    }
    /
    /
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    e
    x
    p
    o
    r
    t d
    e
    f
    a
    u
    l
    t A
    p
    p
    R
    o
    o
    t
    ;
    <
    l
    i k
    e
    y
    =
    { l
    i
    s
    t
    I
    t
    e
    m
    .
    i
    d }
    > { l
    i
    s
    t
    I
    t
    e
    m
    .
    n
    a
    m
    e } <
    b
    u
    t
    t
    o
    n o
    n
    C
    l
    i
    c
    k
    =
    { _
    t
    h
    i
    s
    .
    r
    e
    m
    o
    v
    e
    I
    t
    e
    m
    <
    d
    i
    v
    > <
    u
    l
    > { i
    t
    e
    m
    H
    t
    m
    l } <
    /
    u
    l
    > <
    N
    e
    w
    I
    t
    e
    m
    F
    o
    r
    m /
    > <
    /
    d
    i
    v
    > )
    AppRoot.jsx
    37 / 40

    View full-size slide

  37. NewItemForm.jsx
    i
    m
    p
    o
    r
    t R
    e
    a
    c
    t f
    r
    o
    m '
    r
    e
    a
    c
    t
    '
    ;
    i
    m
    p
    o
    r
    t R
    e
    a
    c
    t
    D
    O
    M f
    r
    o
    m '
    r
    e
    a
    c
    t
    -
    d
    o
    m
    '
    ;
    i
    m
    p
    o
    r
    t A
    p
    p
    D
    i
    s
    p
    a
    t
    c
    h
    e
    r f
    r
    o
    m '
    .
    .
    /
    d
    i
    s
    p
    a
    t
    c
    h
    e
    r
    /
    A
    p
    p
    D
    i
    s
    p
    a
    t
    c
    h
    e
    r
    '
    ;
    /
    /
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    c
    l
    a
    s
    s N
    e
    w
    I
    t
    e
    m
    F
    o
    r
    m e
    x
    t
    e
    n
    d
    s R
    e
    a
    c
    t
    .
    C
    o
    m
    p
    o
    n
    e
    n
    t {
    c
    r
    e
    a
    t
    e
    I
    t
    e
    m
    (
    e
    )
    {
    e
    .
    p
    r
    e
    v
    e
    n
    t
    D
    e
    f
    a
    u
    l
    t
    (
    )
    ;
    l
    e
    t i
    d = g
    u
    i
    d
    (
    )
    ;
    l
    e
    t i
    t
    e
    m
    _
    t
    i
    t
    l
    e = R
    e
    a
    c
    t
    D
    O
    M
    .
    f
    i
    n
    d
    D
    O
    M
    N
    o
    d
    e
    (
    t
    h
    i
    s
    .
    r
    e
    f
    s
    .
    i
    t
    e
    m
    _
    t
    i
    t
    l
    e
    )
    .
    v
    a
    l
    u
    e
    .
    t
    r
    i
    m
    (
    )
    ;
    R
    e
    a
    c
    t
    D
    O
    M
    .
    f
    i
    n
    d
    D
    O
    M
    N
    o
    d
    e
    (
    t
    h
    i
    s
    .
    r
    e
    f
    s
    .
    i
    t
    e
    m
    _
    t
    i
    t
    l
    e
    )
    .
    v
    a
    l
    u
    e = '
    '
    ;
    A
    p
    p
    D
    i
    s
    p
    a
    t
    c
    h
    e
    r
    .
    d
    i
    s
    p
    a
    t
    c
    h
    (
    { a
    c
    t
    i
    o
    n
    : '
    a
    d
    d
    -
    i
    t
    e
    m
    '
    , n
    e
    w
    _
    i
    t
    e
    m
    : { i
    d
    : i
    d
    , n
    a
    m
    e
    : i
    t
    e
    m
    _
    t
    i
    t
    l
    e }
    }
    r
    e
    n
    d
    e
    r
    (
    )
    {
    r
    e
    t
    u
    r
    n
    }
    }
    /
    /
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    f
    u
    n
    c
    t
    i
    o
    n g
    u
    i
    d
    (
    ) {
    f
    u
    n
    c
    t
    i
    o
    n s
    4
    (
    ) { r
    e
    t
    u
    r
    n M
    a
    t
    h
    .
    f
    l
    o
    o
    r
    (
    (
    1 + M
    a
    t
    h
    .
    r
    a
    n
    d
    o
    m
    (
    )
    ) * 0
    x
    1
    0
    0
    0
    0
    )
    .
    t
    o
    S
    t
    r
    i
    n
    g
    (
    1
    6
    )
    .
    s
    u
    b
    s
    t
    r
    i
    r
    e
    t
    u
    r
    n s
    4
    (
    ) + s
    4
    (
    ) + '
    -
    ' + s
    4
    (
    ) + '
    -
    ' + s
    4
    (
    ) + '
    -
    ' + s
    4
    (
    ) + '
    -
    ' + s
    4
    (
    ) + s
    4
    (
    ) + s
    4
    (
    )
    ;
    }
    /
    /
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    e
    x
    p
    o
    r
    t d
    e
    f
    a
    u
    l
    t N
    e
    w
    I
    t
    e
    m
    F
    o
    r
    m
    ;
    <
    f
    o
    r
    m o
    n
    S
    u
    b
    m
    i
    t
    =
    { t
    h
    i
    s
    .
    c
    r
    e
    a
    t
    e
    I
    t
    e
    m
    .
    b
    i
    n
    d
    (
    t
    h
    i
    s
    ) }
    > <
    i
    n
    p
    u
    t t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    " r
    e
    f
    =
    "
    i
    t
    e
    m
    _
    38 / 40

    View full-size slide

  38. References
    1. A JavaScript library for building user interfaces | React
    2. Getting Started | React
    3. Building A Simple React Application Using The Flux Pattern: A Step-By-Step Guide
    4. flux/examples/flux-todomvc
    39 / 40

    View full-size slide

  39.  END
    Eueung Mulyana
    http://eueung.github.io/js/react
    JS CodeLabs | Attribution-ShareAlike CC BY-SA
    40 / 40

    View full-size slide