react-rails

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