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

React Basic Examples

React Basic Examples

Handson for Learning React Starter Kit Basic Examples

Eueung Mulyana

December 03, 2016
Tweet

More Decks by Eueung Mulyana

Other Decks in Programming

Transcript

  1. 1 / 34
    Starter Kit Basic Examples
    React Examples
    Eueung Mulyana
    https://eueung.github.io/112016/react-cont
    CodeLabs | Attribution-ShareAlike CC BY-SA

    View full-size slide

  2. React Version: 15.4.1
    Introduction to React already covered here: https://eueung.github.io/112016/react
    2 / 34

    View full-size slide

  3. 3 / 34
    React Releases
    @github

    View full-size slide

  4. Outline
    Starter Kit - Overview
    Basic Examples
    4 / 34

    View full-size slide

  5. Starter Kit Overview
    5 / 34

    View full-size slide

  6. 6 / 34
    Structure
    r
    e
    a
    c
    t
    -
    1
    5
    .
    4
    .
    1
    $ t
    r
    e
    e -
    L 2
    .
    |
    -
    - b
    u
    i
    l
    d
    |
    -
    -
    -
    -
    -
    - r
    e
    a
    c
    t
    -
    d
    o
    m
    -
    f
    i
    b
    e
    r
    .
    j
    s
    | |
    -
    - r
    e
    a
    c
    t
    -
    d
    o
    m
    -
    f
    i
    b
    e
    r
    .
    m
    i
    n
    .
    j
    s
    | |
    -
    - r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s
    | |
    -
    - r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    m
    i
    n
    .
    j
    s
    | |
    -
    - r
    e
    a
    c
    t
    -
    d
    o
    m
    -
    s
    e
    r
    v
    e
    r
    .
    j
    s
    | |
    -
    - r
    e
    a
    c
    t
    -
    d
    o
    m
    -
    s
    e
    r
    v
    e
    r
    .
    m
    i
    n
    .
    j
    s
    | |
    -
    - r
    e
    a
    c
    t
    .
    j
    s
    | |
    -
    - r
    e
    a
    c
    t
    .
    m
    i
    n
    .
    j
    s
    | |
    -
    - r
    e
    a
    c
    t
    -
    w
    i
    t
    h
    -
    a
    d
    d
    o
    n
    s
    .
    j
    s
    | |
    -
    - r
    e
    a
    c
    t
    -
    w
    i
    t
    h
    -
    a
    d
    d
    o
    n
    s
    .
    m
    i
    n
    .
    j
    s
    |
    -
    - e
    x
    a
    m
    p
    l
    e
    s
    | |
    -
    - b
    a
    s
    i
    c
    | |
    -
    - b
    a
    s
    i
    c
    -
    c
    l
    i
    c
    k
    -
    c
    o
    u
    n
    t
    e
    r
    | |
    -
    - b
    a
    s
    i
    c
    -
    c
    o
    m
    m
    o
    n
    j
    s
    | |
    -
    - b
    a
    s
    i
    c
    -
    j
    s
    x
    | |
    -
    - b
    a
    s
    i
    c
    -
    j
    s
    x
    -
    e
    x
    t
    e
    r
    n
    a
    l
    | |
    -
    - b
    a
    s
    i
    c
    -
    j
    s
    x
    -
    h
    a
    r
    m
    o
    n
    y
    | |
    -
    - b
    a
    s
    i
    c
    -
    j
    s
    x
    -
    p
    r
    e
    c
    o
    m
    p
    i
    l
    e
    | |
    -
    - f
    i
    b
    e
    r
    | |
    -
    - j
    q
    u
    e
    r
    y
    -
    b
    o
    o
    t
    s
    t
    r
    a
    p
    | |
    -
    - j
    q
    u
    e
    r
    y
    -
    m
    o
    b
    i
    l
    e
    | |
    -
    - q
    u
    a
    d
    r
    a
    t
    i
    c
    | |
    -
    - R
    E
    A
    D
    M
    E
    .
    m
    d
    | |
    -
    - s
    h
    a
    r
    e
    d
    | |
    -
    - t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    s
    | |
    -
    - w
    e
    b
    c
    o
    m
    p
    o
    n
    e
    n
    t
    s
    |
    -
    - R
    E
    A
    D
    M
    E
    .
    m
    d

    View full-size slide

  7. Basic Examples
    7 / 34

    View full-size slide

  8. 8 / 34
    Basic Examples
    One HTML
    basic
    basic-jsx
    basic-jsx-harmony
    basic-click-counter (state)
    ber (react-dom- ber)
    One HTML + One JS
    basic-jsx-external (s
    r
    c
    /
    e
    x
    a
    m
    p
    l
    e
    .
    j
    s
    )
    basic-jsx-precompile (b
    u
    i
    l
    d
    /
    e
    x
    a
    m
    p
    l
    e
    .
    j
    s
    )
    HTML+JS+package.json (npm)
    basic-commonjs (b
    u
    n
    d
    l
    e
    .
    j
    s
    )

    View full-size slide

  9. 9 / 34
    <
    !
    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
    =
    "
    h
    t
    t
    p
    s
    :
    /
    /
    g
    i
    t
    h
    u
    b
    .
    c
    o
    m
    /
    f
    a
    c
    e
    b
    o
    o
    k
    /
    r
    e
    a
    c
    t
    /
    "
    <
    p
    > I
    f y
    o
    u c
    a
    n s
    e
    e t
    h
    i
    s
    , R
    e
    a
    c
    t i
    s <
    s
    t
    r
    o
    n
    g
    >
    n
    o
    t
    <
    /
    s
    t
    r
    o
    n
    g
    > 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
    >
    <
    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
    " t
    a
    r
    g
    e
    t
    =
    "
    _
    b
    l
    a
    n
    k
    "
    >
    f
    a
    c
    e
    b
    o
    o
    k
    .
    g
    i
    t
    h
    u
    b
    .
    i
    o
    /
    r
    e
    a
    c
    t
    <
    /
    p
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    b
    u
    i
    l
    d
    /
    r
    e
    a
    c
    t
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    b
    u
    i
    l
    d
    /
    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
    >
    HTML
    basic
    basic-jsx
    basic-jsx-harmony
    ber
    basic-click-counter

    View full-size slide

  10. 10 / 34
    <
    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 + ' 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
    A
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n
    (
    {
    .
    .
    .
    }
    ) i
    n R
    e
    a
    c
    t
    .
    r
    e
    n
    d
    e
    r
    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
    p
    p
    l
    i
    c
    a
    t
    i
    o
    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
    (
    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
    (
    ) - s
    t
    a
    r
    t
    }
    )
    ,
    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
    >
    basic
    Vanilla JS
    render
    this.props
    React.DOM.p()

    View full-size slide

  11. 11 / 34
    <
    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
    >
    <
    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
    4
    /
    b
    r
    o
    w
    s
    e
    r
    .
    m
    i
    n
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    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 + ' s
    e
    c
    o
    n
    d
    s
    .
    '
    ;
    r
    e
    t
    u
    r
    n <
    p
    >
    {
    m
    e
    s
    s
    a
    g
    e
    }
    <
    /
    p
    >
    ;
    }
    }
    )
    ;
    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 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
    } /
    >
    ,
    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
    >
    basic-jsx
    JS+JSX
    Requires babel
    render
    this.props
    Element <
    p
    >
    Passing p
    r
    o
    p
    s
    .
    e
    l
    a
    p
    s
    e
    d

    View full-size slide

  12. 12 / 34
    <
    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
    >
    <
    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
    4
    /
    b
    r
    o
    w
    s
    e
    r
    .
    m
    i
    n
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    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 $
    {
    s
    e
    c
    o
    n
    d
    s
    } s
    e
    c
    o
    n
    d
    s
    .
    `
    ;
    r
    e
    t
    u
    r
    n <
    p
    >
    {
    m
    e
    s
    s
    a
    g
    e
    }
    <
    /
    p
    >
    ;
    }
    }
    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
    (
    <
    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
    } /
    >
    ,
    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
    >
    basic-jsx-
    harmony
    ES2015+JSX
    Requires babel
    render
    this.props
    Element <
    p
    >

    View full-size slide

  13. 13 / 34
    basic

    View full-size slide

  14. 14 / 34
    basic-jsx

    View full-size slide

  15. 15 / 34
    basic-jsx-
    harmony

    View full-size slide

  16. 16 / 34
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    .
    .
    /
    .
    .
    /
    b
    u
    i
    l
    d
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    -
    f
    i
    b
    e
    r
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    s
    c
    r
    i
    p
    t
    >
    f
    u
    n
    c
    t
    i
    o
    n E
    x
    a
    m
    p
    l
    e
    A
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n
    (
    p
    r
    o
    p
    s
    ) {
    v
    a
    r e
    l
    a
    p
    s
    e
    d = M
    a
    t
    h
    .
    r
    o
    u
    n
    d
    (
    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 + ' 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
    A
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n
    (
    {
    .
    .
    .
    }
    ) i
    n R
    e
    a
    c
    t
    .
    r
    e
    n
    d
    e
    r
    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
    p
    p
    l
    i
    c
    a
    t
    i
    o
    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
    F
    i
    b
    e
    r
    .
    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
    (
    ) - s
    t
    a
    r
    t
    }
    )
    ,
    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
    >
    fiber
    basic with ber
    function vs. React.createClass()
    ReactDOMFiber vs. ReactDOM
    Ref: React Fiber is an ongoing
    reimplementation of React's core
    algorithm. It is the culmination of over
    two years of research by the React team.
    [ React Fiber ]

    View full-size slide

  17. 17 / 34
    fiber

    View full-size slide

  18. 18 / 34
    <
    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
    4
    /
    b
    r
    o
    w
    s
    e
    r
    .
    m
    i
    n
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    <
    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
    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
    (
    {
    c
    o
    u
    n
    t
    : t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    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 (
    <
    b
    u
    t
    t
    o
    n 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
    b
    e
    r o
    f c
    l
    i
    c
    k
    s
    : {
    t
    h
    i
    s
    .
    s
    t
    a
    t
    e
    .
    c
    o
    u
    n
    t
    }
    <
    /
    b
    u
    t
    t
    o
    n
    >
    )
    ;
    }
    }
    )
    ;
    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
    (
    '
    c
    o
    n
    t
    a
    i
    n
    e
    r
    '
    )
    )
    ;
    <
    /
    s
    c
    r
    i
    p
    t
    >
    basic-click-
    counter
    JS+JSX
    Requires babel
    this.state
    this.setState
    getInitialState
    render

    View full-size slide

  19. 19 / 34
    basic-click-
    counter

    View full-size slide

  20. 20 / 34
    basic-jsx-
    external
    JS+JSX
    Requires babel
    basic-jsx
    index.html
    example.js
    <
    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
    >

    View full-size slide

  21. 21 / 34
    basic-jsx-
    external

    View full-size slide

  22. 22 / 34
    basic-jsx-
    external
    r
    e
    a
    c
    t
    -
    1
    5
    .
    4
    .
    1
    $ p
    y
    t
    h
    o
    n -
    m S
    i
    m
    p
    l
    e
    H
    T
    T
    P
    S
    e
    r
    v
    e
    r
    S
    e
    r
    v
    i
    n
    g H
    T
    T
    P o
    n 0
    .
    0
    .
    0
    .
    0 p
    o
    r
    t 8
    0
    0
    0 .
    .
    .
    1
    2
    7
    .
    0
    .
    0
    .
    1 - - [
    0
    4
    /
    D
    e
    c
    /
    2
    0
    1
    6 0
    3
    :
    2
    8
    :
    0
    6
    ] "
    G
    E
    T /
    e
    x
    a
    m
    p
    l
    e
    s
    /
    b
    a
    s
    i
    c
    -
    j
    s
    x
    -
    e
    x
    t
    e
    r
    n
    a
    l
    / H
    T
    T
    P
    /
    1
    .
    1
    " 2
    0
    0 -
    1
    2
    7
    .
    0
    .
    0
    .
    1 - - [
    0
    4
    /
    D
    e
    c
    /
    2
    0
    1
    6 0
    3
    :
    2
    8
    :
    0
    6
    ] "
    G
    E
    T /
    e
    x
    a
    m
    p
    l
    e
    s
    /
    s
    h
    a
    r
    e
    d
    /
    c
    s
    s
    /
    b
    a
    s
    e
    .
    c
    s
    s H
    T
    T
    P
    /
    1
    .
    1
    " 2
    0
    0 -
    1
    2
    7
    .
    0
    .
    0
    .
    1 - - [
    0
    4
    /
    D
    e
    c
    /
    2
    0
    1
    6 0
    3
    :
    2
    8
    :
    0
    6
    ] "
    G
    E
    T /
    b
    u
    i
    l
    d
    /
    r
    e
    a
    c
    t
    .
    j
    s H
    T
    T
    P
    /
    1
    .
    1
    " 2
    0
    0 -
    1
    2
    7
    .
    0
    .
    0
    .
    1 - - [
    0
    4
    /
    D
    e
    c
    /
    2
    0
    1
    6 0
    3
    :
    2
    8
    :
    0
    6
    ] "
    G
    E
    T /
    b
    u
    i
    l
    d
    /
    r
    e
    a
    c
    t
    -
    d
    o
    m
    .
    j
    s H
    T
    T
    P
    /
    1
    .
    1
    " 2
    0
    0 -
    1
    2
    7
    .
    0
    .
    0
    .
    1 - - [
    0
    4
    /
    D
    e
    c
    /
    2
    0
    1
    6 0
    3
    :
    2
    8
    :
    0
    6
    ] "
    G
    E
    T /
    e
    x
    a
    m
    p
    l
    e
    s
    /
    b
    a
    s
    i
    c
    -
    j
    s
    x
    -
    e
    x
    t
    e
    r
    n
    a
    l
    /
    e
    x
    a
    m
    p
    l
    e
    .
    j
    s H
    T
    T
    P
    /
    1
    .
    1
    " 2
    0
    0 -

    View full-size slide

  23. 23 / 34
    basic-jsx-
    precompile
    JS+JSX
    babel @dev NOT @browser
    basic-jsx
    index.html
    example.js
    <
    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
    >

    View full-size slide

  24. 24 / 34
    basic-jsx-
    precompile
    $ 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 v
    e
    r
    s
    i
    o
    n
    6
    .
    1
    8
    .
    0 (
    b
    a
    b
    e
    l
    -
    c
    o
    r
    e 6
    .
    1
    8
    .
    2
    )
    $ 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
    r
    e
    a
    c
    t
    -
    1
    5
    .
    4
    .
    1
    /
    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
    $ t
    r
    e
    e
    .
    |
    -
    - e
    x
    a
    m
    p
    l
    e
    .
    j
    s
    |
    -
    - i
    n
    d
    e
    x
    .
    h
    t
    m
    l
    |
    -
    - b
    u
    i
    l
    d
    |
    -
    -
    - e
    x
    a
    m
    p
    l
    e
    .
    j
    s

    View full-size slide

  25. 25 / 34
    basic-jsx-
    precompile
    Vanilla JS after Build
    Testing: HTTP Server NOT Required

    View full-size slide

  26. 26 / 34
    basic-
    commonjs
    JS+JSX
    react & babel @dev NOT
    @browser
    basic-jsx
    index.html
    index.js
    package.json
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    b
    u
    n
    d
    l
    e
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >

    View full-size slide

  27. 27 / 34
    basic-
    commonjs
    index.html
    index.js
    <
    !
    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
    >
    <
    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
    , .
    .
    .
    <
    /
    p
    > <
    /
    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 .
    .
    .
    <
    /
    p
    >
    <
    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
    >
    '
    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 + ' s
    e
    c
    o
    n
    d
    s
    .
    '
    ;
    r
    e
    t
    u
    r
    n <
    p
    >
    {
    m
    e
    s
    s
    a
    g
    e
    }
    <
    /
    p
    >
    ;
    }
    }
    )
    ;
    .
    .
    .

    View full-size slide

  28. 28 / 34
    basic-
    commonjs
    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
    "
    ,
    "
    p
    r
    i
    v
    a
    t
    e
    "
    : t
    r
    u
    e
    ,
    "
    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
    -
    p
    r
    e
    s
    e
    t
    -
    e
    s
    2
    0
    1
    5
    "
    : "
    ^
    6
    .
    6
    .
    0
    "
    ,
    "
    b
    a
    b
    e
    l
    -
    p
    r
    e
    s
    e
    t
    -
    r
    e
    a
    c
    t
    "
    : "
    ^
    6
    .
    5
    .
    0
    "
    ,
    "
    b
    a
    b
    e
    l
    i
    f
    y
    "
    : "
    ^
    7
    .
    3
    .
    0
    "
    ,
    "
    b
    r
    o
    w
    s
    e
    r
    i
    f
    y
    "
    : "
    ^
    1
    3
    .
    0
    .
    0
    "
    ,
    "
    r
    e
    a
    c
    t
    "
    : "
    ^
    1
    5
    .
    0
    .
    2
    "
    ,
    "
    r
    e
    a
    c
    t
    -
    d
    o
    m
    "
    : "
    ^
    1
    5
    .
    0
    .
    2
    "
    ,
    "
    w
    a
    t
    c
    h
    i
    f
    y
    "
    : "
    ^
    3
    .
    7
    .
    0
    "
    }
    ,
    "
    s
    c
    r
    i
    p
    t
    s
    "
    : {
    "
    b
    u
    i
    l
    d
    "
    : "
    b
    r
    o
    w
    s
    e
    r
    i
    f
    y .
    /
    i
    n
    d
    e
    x
    .
    j
    s -
    t b
    a
    b
    e
    l
    i
    f
    y -
    o b
    u
    n
    d
    l
    e
    .
    j
    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
    "
    }
    }

    View full-size slide

  29. 29 / 34
    basic-
    commonjs
    b
    a
    s
    i
    c
    -
    c
    o
    m
    m
    o
    n
    j
    s
    $ n
    p
    m i
    n
    s
    t
    a
    l
    l
    b
    a
    s
    i
    c
    -
    c
    o
    m
    m
    o
    n
    j
    s
    $ n
    p
    m s
    t
    a
    r
    t
    > 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
    @ s
    t
    a
    r
    t /
    h
    o
    m
    e
    /
    e
    m
    /
    b
    a
    s
    i
    c
    -
    c
    o
    m
    m
    o
    n
    j
    s
    > 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
    7
    2
    1
    6
    4
    1 b
    y
    t
    e
    s w
    r
    i
    t
    t
    e
    n t
    o b
    u
    n
    d
    l
    e
    .
    j
    s (
    2
    .
    1
    8 s
    e
    c
    o
    n
    d
    s
    )
    b
    a
    s
    i
    c
    -
    c
    o
    m
    m
    o
    n
    j
    s
    $ t
    r
    e
    e -
    L 1
    .
    |
    -
    - b
    u
    n
    d
    l
    e
    .
    j
    s
    |
    -
    - i
    n
    d
    e
    x
    .
    h
    t
    m
    l
    |
    -
    - i
    n
    d
    e
    x
    .
    j
    s
    |
    -
    - n
    o
    d
    e
    _
    m
    o
    d
    u
    l
    e
    s
    |
    -
    - p
    a
    c
    k
    a
    g
    e
    .
    j
    s
    o
    n

    View full-size slide

  30. 30 / 34
    basic-
    commonjs
    Vanilla JS after Build
    Everything Bundled
    Testing: HTTP Server NOT Required

    View full-size slide

  31. 31 / 34
    That's All
    for the basics ...
    we'll continue
    later ... piece of
    cake, no?

    View full-size slide

  32. Refs
    1. A JavaScript library for building user interfaces | React
    2. facebook/react: A declarative, e cient, and exible JavaScript library for building user
    interfaces.
    3. acdlite/react- ber-architecture: A description of React's new core algorithm, React Fiber
    4. Intro and Concept - Learning React
    33 / 34

    View full-size slide

  33. 34 / 34
    END
    Eueung Mulyana
    https://eueung.github.io/112016/react-cont
    CodeLabs | Attribution-ShareAlike CC BY-SA

    View full-size slide