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

react-rails

 react-rails

Kazuhito Hokamura

April 24, 2015
Tweet

More Decks by Kazuhito Hokamura

Other Decks in Programming

Transcript

  1. react-rails
    React.js meetup #1

    View full-size slide

  2. Key Features
    • JSX compilation in the Rails asset pipeline
    • React component mounting with a view helper & UJS
    • Server-side rendering

    View full-size slide

  3. Mounting with
    view helper & UJS

    View full-size slide

  4. class MyComponent extends React.Component {
    render() {
    return Name: {this.props.name};
    }
    }
    MyComponent.jsx

    View full-size slide

  5. <%= react_component('MyComponent', name: 'hokaccha') %>
    # =>
    data-react-class="MyComponent"
    data-react-props='{"name":"hokaccha"}'>

    view helper

    View full-size slide

  6. // ※ ίʔυ͸Πϝʔδ
    findAll('[data-react-class]').forEach((el) => {
    var reactClass = el.dataset.reactClass;
    var reactProps = el.dataset.reactProps;
    var component = window[reactClass];
    var props = JSON.parse(reactProps);
    var reactElement = React.createElement(component, props);
    React.render(reactElement, el);
    });
    react_ujs

    View full-size slide

  7. • Ϛ΢ϯτ͢ΔίʔυΛॻ͔ͳ͍͍ͯ͘
    • APIϦΫΤετ͠ͳ͍෼ߴ଎

    View full-size slide

  8. Server Side Rendering

    View full-size slide

  9. <%= react_component('MyComponent',
    { name: 'hokaccha' }, { prerender: true }) %>
    # =>
    data-react-class="MyComponent"
    data-react-props='{"name":"hokaccha"}'>
    Name: hokaccha

    View full-size slide

  10. • ExecJSͰJSΛ࣮ߦ
    • therubyracerʢV8ʣਪ঑

    View full-size slide

  11. JT





    4MJN &3# SFBDU )BNM




    View full-size slide

  12. • ଞͷςϯϓϨʔτΤϯδϯͱࠞͥͯ࢖͏ͷͰ
    ୯७ͳൺֱ͸͋·Γҙຯ͕ແ͍
    • ࢮ͵΄Ͳ஗͍Θ͚Ͱ͸ͳͦ͞͏ͱ͍͏ͷ͕

    Θ͔ΔͨΊͷϕϯνϚʔΫ
    • Railsͩͱଞͷ෦෼͕஗͍ͷͰશମͷ

    ύϑΥʔϚϯεͱͷׂ߹͕ॏཁ

    View full-size slide

  13. Using with Turbolinks

    View full-size slide

  14. <%= react_component('MyComponent',
    { name: 'hokaccha' },
    { prerender: !turbolinks_request? }) %>

    View full-size slide

  15. • αʔόʔαΠυϨϯμϦϯά͕࠷ॳͷ

    ϦΫΤετ͚࣌ͩʹͳΔ
    • ΫϥΠΞϯταΠυͰͷϧʔςΟϯά͕ෆཁ
    • UJS͕Mount/Unmountͷ໘౗Λݟͯ͘ΕΔ

    View full-size slide

  16. • ౰વAPIϕʔεͷ΄͏͕Coolͩ͠଎͍
    • ࡉ͔͍ભҠͷ੍ޚ͸Ͱ͖ͳ͍ʢͨͿΜʣ
    • Ϩʔϧʹ৐͔ͬΔ͜ͱͰ؆୯ʹͰ͖Δ

    Α͏ʹͳΔͱ͍͏ͷ͕ॏཁ

    View full-size slide

  17. αʔόʔαΠυίϯςΩετ
    ڞ༗໰୊ʢ͕࣌ؒ͋Ε͹ʣ

    View full-size slide

  18. • άϦϯάϦϯಈ͘SPAͱ͔ʹ͸ͨͿΜ޲͔ͳ͍
    • ෦෼తʹಈతͳίϯςϯπ͕͋ΔΑ͏ͳ

    ΞϓϦέʔγϣϯͩͱ࢖͍Ͳ͜Ζ͋Δ͔΋
    • Turbolinksʹϫϯνϟϯ͋ΔՄೳੑ

    View full-size slide