Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
react-rails
Search
Kazuhito Hokamura
April 24, 2015
Programming
12
6k
react-rails
Kazuhito Hokamura
April 24, 2015
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
4.7k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.6k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.5k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
440
RailsエンジニアのためのNext.js入門
hokaccha
7
20k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.2k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.9k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
1k
Web Frontend Improvement in Cookpad
hokaccha
1
1.1k
Other Decks in Programming
See All in Programming
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
240
rage against annotate_predecessor
junk0612
0
170
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
Improving my own Ruby thereafter
sisshiki1969
1
160
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
330
Namespace and Its Future
tagomoris
6
700
OSS開発者という働き方
andpad
5
1.7k
AIコーディングAgentとの向き合い方
eycjur
0
280
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
Design Foundational Data Engineering Observability
sucitw
3
200
Testing Trophyは叫ばない
toms74209200
0
890
Featured
See All Featured
Side Projects
sachag
455
43k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
BBQ
matthewcrist
89
9.8k
Being A Developer After 40
akosma
90
590k
Faster Mobile Websites
deanohume
309
31k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
RailsConf 2023
tenderlove
30
1.2k
Typedesign – Prime Four
hannesfritz
42
2.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
Transcript
react-rails React.js meetup #1
@hokaccha
None
None
Key Features • JSX compilation in the Rails asset pipeline
• React component mounting with a view helper & UJS • Server-side rendering
Mounting with view helper & UJS
class MyComponent extends React.Component { render() { return <div>Name: {this.props.name}</div>;
} } MyComponent.jsx
<%= react_component('MyComponent', name: 'hokaccha') %> # => <div data-react-class="MyComponent" data-react-props='{"name":"hokaccha"}'>
</div> view helper
// ※ ίʔυΠϝʔδ 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
• Ϛϯτ͢ΔίʔυΛॻ͔ͳ͍͍ͯ͘ • APIϦΫΤετ͠ͳ͍ߴ
Server Side Rendering
<%= 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>
• ExecJSͰJSΛ࣮ߦ • therubyracerʢV8ʣਪ
DEMO
Performance
JT 4MJN &3# SFBDU )BNM
• ଞͷςϯϓϨʔτΤϯδϯͱࠞͥͯ͏ͷͰ ୯७ͳൺֱ͋·Γҙຯ͕ແ͍ • ࢮ͵΄Ͳ͍Θ͚Ͱͳͦ͞͏ͱ͍͏ͷ͕ Θ͔ΔͨΊͷϕϯνϚʔΫ • Railsͩͱଞͷ෦͕͍ͷͰશମͷ ύϑΥʔϚϯεͱͷׂ߹͕ॏཁ
Using with Turbolinks
<%= react_component('MyComponent', { name: 'hokaccha' }, { prerender: !turbolinks_request? })
%>
• αʔόʔαΠυϨϯμϦϯά͕࠷ॳͷ ϦΫΤετ͚࣌ͩʹͳΔ • ΫϥΠΞϯταΠυͰͷϧʔςΟϯά͕ෆཁ • UJS͕Mount/Unmountͷ໘Λݟͯ͘ΕΔ
DEMO
• વAPIϕʔεͷ΄͏͕Cool͍ͩ͠ • ࡉ͔͍ભҠͷ੍ޚͰ͖ͳ͍ʢͨͿΜʣ • Ϩʔϧʹ͔ͬΔ͜ͱͰ؆୯ʹͰ͖Δ Α͏ʹͳΔͱ͍͏ͷ͕ॏཁ
αʔόʔαΠυίϯςΩετ ڞ༗ʢ͕࣌ؒ͋Εʣ
·ͱΊ
• άϦϯάϦϯಈ͘SPAͱ͔ʹͨͿΜ͔ͳ͍ • ෦తʹಈతͳίϯςϯπ͕͋ΔΑ͏ͳ ΞϓϦέʔγϣϯͩͱ͍Ͳ͜Ζ͋Δ͔ • Turbolinksʹϫϯνϟϯ͋ΔՄೳੑ
Thanks