Tweet
Tweet

Slide 1

Slide 1 text

react-rails React.js meetup #1

Slide 2

Slide 2 text

@hokaccha

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Mounting with view helper & UJS

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

<%= react_component('MyComponent', name: 'hokaccha') %> # =>
view helper

Slide 9

Slide 9 text

// ※ ίʔυ͸Πϝʔδ 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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Server Side Rendering

Slide 12

Slide 12 text

<%= react_component('MyComponent', { name: 'hokaccha' }, { prerender: true }) %> # =>
Name: hokaccha

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

DEMO

Slide 15

Slide 15 text

Performance

Slide 16

Slide 16 text

JT 4MJN &3# SFBDU )BNM

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Using with Turbolinks

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

DEMO

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

·ͱΊ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Thanks