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

react-rails

 react-rails

18b12f8f7910445b2637f0f21f59d467?s=128

Kazuhito Hokamura

April 24, 2015
Tweet

Transcript

  1. react-rails React.js meetup #1

  2. @hokaccha

  3. None
  4. None
  5. Key Features • JSX compilation in the Rails asset pipeline

    • React component mounting with a view helper & UJS • Server-side rendering
  6. Mounting with view helper & UJS

  7. class MyComponent extends React.Component { render() { return <div>Name: {this.props.name}</div>;

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

    </div> view helper
  9. // ※ ίʔυ͸Πϝʔδ 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
  10. • Ϛ΢ϯτ͢ΔίʔυΛॻ͔ͳ͍͍ͯ͘ • APIϦΫΤετ͠ͳ͍෼ߴ଎

  11. Server Side Rendering

  12. <%= react_component('MyComponent', { name: 'hokaccha' }, { prerender: true })

    %> # => <div data-react-class="MyComponent" data-react-props='{"name":"hokaccha"}'> <div data-react-checksum="xxx">Name: hokaccha</div> </div>
  13. • ExecJSͰJSΛ࣮ߦ • therubyracerʢV8ʣਪ঑

  14. DEMO

  15. Performance

  16. JT      4MJN &3# SFBDU )BNM

       
  17. • ଞͷςϯϓϨʔτΤϯδϯͱࠞͥͯ࢖͏ͷͰ ୯७ͳൺֱ͸͋·Γҙຯ͕ແ͍ • ࢮ͵΄Ͳ஗͍Θ͚Ͱ͸ͳͦ͞͏ͱ͍͏ͷ͕
 Θ͔ΔͨΊͷϕϯνϚʔΫ • Railsͩͱଞͷ෦෼͕஗͍ͷͰશମͷ
 ύϑΥʔϚϯεͱͷׂ߹͕ॏཁ

  18. Using with Turbolinks

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

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

  21. DEMO

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

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

  24. ·ͱΊ

  25. • άϦϯάϦϯಈ͘SPAͱ͔ʹ͸ͨͿΜ޲͔ͳ͍ • ෦෼తʹಈతͳίϯςϯπ͕͋ΔΑ͏ͳ
 ΞϓϦέʔγϣϯͩͱ࢖͍Ͳ͜Ζ͋Δ͔΋ • Turbolinksʹϫϯνϟϯ͋ΔՄೳੑ

  26. Thanks