react-rails

Transcript

1. react-rails React.js meetup #1
2. @hokaccha
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