Mastodonを読む/Reactが動く仕組み
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
[[Mastodonを読む]]
#contents
*はじめに [#kaf93939]
前回までで、「/」にアクセスしたときに返されるHTMLがわかり...
&ref(mastodon-sample.jpg);
これを行っているのがReactのようです。では読解を始めましょ...
*app/assets/javascripts/application.js [#fe35250a]
Reactについては[[「5分で理解する React.js」>http://qiita....
#code{{
React.render(
<CommentBox />,
document.getElementById('content')
);
}}
のように書くことでReactで定義したコンポーネントが描画され...
ちなみに、これを読んでたちょうどそのころぐらいにJavascrip...
ビューにリンクされるJavascriptファイルのルートはapplicati...
#code(javascript){{
//= require jquery2
//= require jquery_ujs
//= require components
}}
念のため。「//」はJavascriptではコメントですが、Railsでは...
*app/assets/javascripts/components.js [#pd31dd8d]
components.jsに移動。
#code(javascript){{
//= require_self
//= require react_ujs
window.React = require('react');
window.ReactDOM = require('react-dom');
window.Perf = require('react-addons-perf');
if (!window.Intl) {
require('intl');
require('intl/locale-data/jsonp/en.js');
}
//= require_tree ./components
window.Mastodon = require('./components/containers/mastod...
}}
Reactの記述が出てきました。Mastodonの文字も出てきましたが...
*react-rails/lib/assets/javascripts/react_ujs.js [#k913f4...
Rails的にrequireされているreact_ujsに進みましょう。ここか...
#code(javascript){{
//= require react_ujs_mount
//= require react_ujs_turbolinks
//= require react_ujs_turbolinks_classic
//= require react_ujs_turbolinks_classic_deprecated
//= require react_ujs_pjax
//= require react_ujs_native
//= require react_ujs_event_setup
}}
たくさんrequireされていますが、turbolinks～nativeは実はバ...
**react_ujs_turbolinks.js [#tcd9927b]
react_ujs_turbolinks.jsを見てみましょう。
#code(javascript){{
;(function(document, window) {
window.ReactRailsUJS.Turbolinks = {
// Turbolinks 5+ got rid of named events (?!)
setup: function() {
ReactRailsUJS.handleEvent('turbolinks:load', functi...
ReactRailsUJS.handleEvent('turbolinks:before-render...
}
};
})(document, window);
}}
初めのセミコロン何なんだろうと思ったのですが、前のファイ...
**react_ujs_event_setup.js [#d5e91e89]
react_ujs_event_setup.js。前半でhandleEventを定義し、後半...
#code(javascript){{
;(function(document, window) {
// jQuery is optional. Use it to support legacy browsers.
var $ = (typeof window.jQuery !== 'undefined') && windo...
if ($) {
ReactRailsUJS.handleEvent = function(eventName, callb...
$(document).on(eventName, callback);
};
} else {
ReactRailsUJS.handleEvent = function(eventName, callb...
document.addEventListener(eventName, callback);
};
}
// Detect which kind of events to set up:
if (typeof Turbolinks !== 'undefined' && Turbolinks.sup...
if (typeof Turbolinks.EVENTS !== 'undefined') {
// Turbolinks.EVENTS is in classic version 2.4.0+
ReactRailsUJS.TurbolinksClassic.setup();
} else if (typeof Turbolinks.controller !== "undefine...
// Turbolinks.controller is in version 5+
ReactRailsUJS.Turbolinks.setup();
} else {
ReactRailsUJS.TurbolinksClassicDeprecated.setup();
}
} else if ($ && typeof $.pjax === 'function') {
ReactRailsUJS.pjax.setup();
} else {
ReactRailsUJS.Native.setup();
}
})(document, window);
}}
**react_ujs_mount.js [#affe04d8]
ではここまでわかったところで飛ばしたreact_ujs_mount.jsを...
#code(javascript){{
;(function(document, window) {
// jQuery is optional. Use it to support legacy browsers.
var $ = (typeof window.jQuery !== 'undefined') && windo...
window.ReactRailsUJS = {
// This attribute holds the name of component which s...
// example: `data-react-class="MyApp.Items.EditForm"`
CLASS_NAME_ATTR: 'data-react-class',
// This attribute holds JSON stringified props for in...
// example: `data-react-props="{\"item\": { \"id\": 1...
PROPS_ATTR: 'data-react-props',
}}
data-react-class属性は前回見たhome#indexの出力に含まれて...
#code(html){{
<body class='app-body'>
<div data-react-class="Mastodon" data-react-props="{"...
</body>
}}
mountComponentsの定義
#code(javascript){{
mountComponents: function(searchSelector) {
var nodes = window.ReactRailsUJS.findDOMNodes(searc...
for (var i = 0; i < nodes.length; ++i) {
var node = nodes[i];
var className = node.getAttribute(window.ReactRai...
var constructor = this.getConstructor(className);
var propsJson = node.getAttribute(window.ReactRai...
var props = propsJson && JSON.parse(propsJson);
if (typeof(constructor) === "undefined") {
var message = "Cannot find component: '" + clas...
if (console && console.log) { console.log("%c[r...
var error = new Error(message + ". Make sure yo...
throw error
} else {
ReactDOM.render(React.createElement(constructor...
}
}
},
}}
renderありました。findDOMNodesは省略してgetConstructor
#code(javascript){{
// Get the constructor for a className
getConstructor: function(className) {
// Assume className is simple and can be found at t...
// Fallback to eval to handle cases like 'My.React....
// Also, try to gracefully import Babel 6 style def...
//
var constructor;
// Try to access the class globally first
constructor = window[className];
// If that didn't work, try eval
if (!constructor) {
constructor = eval.call(window, className);
}
// Lastly, if there is a default attribute try that
if (constructor && constructor['default']) {
constructor = constructor['default'];
}
return constructor;
},
}}
いろいろやっていますが、components.jsで
#code(javascript){{
window.Mastodon = require('./components/containers/mastod...
}}
と初期化されていたものが使われていると思われます。
*おわりに [#p5eb7873]
今回はReactで画面描画がされる前段階として、そもそもReact...
次回はいよいよMastodonコンポーネントの中に踏み込んでいっ...
終了行:
[[Mastodonを読む]]
#contents
*はじめに [#kaf93939]
前回までで、「/」にアクセスしたときに返されるHTMLがわかり...
&ref(mastodon-sample.jpg);
これを行っているのがReactのようです。では読解を始めましょ...
*app/assets/javascripts/application.js [#fe35250a]
Reactについては[[「5分で理解する React.js」>http://qiita....
#code{{
React.render(
<CommentBox />,
document.getElementById('content')
);
}}
のように書くことでReactで定義したコンポーネントが描画され...
ちなみに、これを読んでたちょうどそのころぐらいにJavascrip...
ビューにリンクされるJavascriptファイルのルートはapplicati...
#code(javascript){{
//= require jquery2
//= require jquery_ujs
//= require components
}}
念のため。「//」はJavascriptではコメントですが、Railsでは...
*app/assets/javascripts/components.js [#pd31dd8d]
components.jsに移動。
#code(javascript){{
//= require_self
//= require react_ujs
window.React = require('react');
window.ReactDOM = require('react-dom');
window.Perf = require('react-addons-perf');
if (!window.Intl) {
require('intl');
require('intl/locale-data/jsonp/en.js');
}
//= require_tree ./components
window.Mastodon = require('./components/containers/mastod...
}}
Reactの記述が出てきました。Mastodonの文字も出てきましたが...
*react-rails/lib/assets/javascripts/react_ujs.js [#k913f4...
Rails的にrequireされているreact_ujsに進みましょう。ここか...
#code(javascript){{
//= require react_ujs_mount
//= require react_ujs_turbolinks
//= require react_ujs_turbolinks_classic
//= require react_ujs_turbolinks_classic_deprecated
//= require react_ujs_pjax
//= require react_ujs_native
//= require react_ujs_event_setup
}}
たくさんrequireされていますが、turbolinks～nativeは実はバ...
**react_ujs_turbolinks.js [#tcd9927b]
react_ujs_turbolinks.jsを見てみましょう。
#code(javascript){{
;(function(document, window) {
window.ReactRailsUJS.Turbolinks = {
// Turbolinks 5+ got rid of named events (?!)
setup: function() {
ReactRailsUJS.handleEvent('turbolinks:load', functi...
ReactRailsUJS.handleEvent('turbolinks:before-render...
}
};
})(document, window);
}}
初めのセミコロン何なんだろうと思ったのですが、前のファイ...
**react_ujs_event_setup.js [#d5e91e89]
react_ujs_event_setup.js。前半でhandleEventを定義し、後半...
#code(javascript){{
;(function(document, window) {
// jQuery is optional. Use it to support legacy browsers.
var $ = (typeof window.jQuery !== 'undefined') && windo...
if ($) {
ReactRailsUJS.handleEvent = function(eventName, callb...
$(document).on(eventName, callback);
};
} else {
ReactRailsUJS.handleEvent = function(eventName, callb...
document.addEventListener(eventName, callback);
};
}
// Detect which kind of events to set up:
if (typeof Turbolinks !== 'undefined' && Turbolinks.sup...
if (typeof Turbolinks.EVENTS !== 'undefined') {
// Turbolinks.EVENTS is in classic version 2.4.0+
ReactRailsUJS.TurbolinksClassic.setup();
} else if (typeof Turbolinks.controller !== "undefine...
// Turbolinks.controller is in version 5+
ReactRailsUJS.Turbolinks.setup();
} else {
ReactRailsUJS.TurbolinksClassicDeprecated.setup();
}
} else if ($ && typeof $.pjax === 'function') {
ReactRailsUJS.pjax.setup();
} else {
ReactRailsUJS.Native.setup();
}
})(document, window);
}}
**react_ujs_mount.js [#affe04d8]
ではここまでわかったところで飛ばしたreact_ujs_mount.jsを...
#code(javascript){{
;(function(document, window) {
// jQuery is optional. Use it to support legacy browsers.
var $ = (typeof window.jQuery !== 'undefined') && windo...
window.ReactRailsUJS = {
// This attribute holds the name of component which s...
// example: `data-react-class="MyApp.Items.EditForm"`
CLASS_NAME_ATTR: 'data-react-class',
// This attribute holds JSON stringified props for in...
// example: `data-react-props="{\"item\": { \"id\": 1...
PROPS_ATTR: 'data-react-props',
}}
data-react-class属性は前回見たhome#indexの出力に含まれて...
#code(html){{
<body class='app-body'>
<div data-react-class="Mastodon" data-react-props="{"...
</body>
}}
mountComponentsの定義
#code(javascript){{
mountComponents: function(searchSelector) {
var nodes = window.ReactRailsUJS.findDOMNodes(searc...
for (var i = 0; i < nodes.length; ++i) {
var node = nodes[i];
var className = node.getAttribute(window.ReactRai...
var constructor = this.getConstructor(className);
var propsJson = node.getAttribute(window.ReactRai...
var props = propsJson && JSON.parse(propsJson);
if (typeof(constructor) === "undefined") {
var message = "Cannot find component: '" + clas...
if (console && console.log) { console.log("%c[r...
var error = new Error(message + ". Make sure yo...
throw error
} else {
ReactDOM.render(React.createElement(constructor...
}
}
},
}}
renderありました。findDOMNodesは省略してgetConstructor
#code(javascript){{
// Get the constructor for a className
getConstructor: function(className) {
// Assume className is simple and can be found at t...
// Fallback to eval to handle cases like 'My.React....
// Also, try to gracefully import Babel 6 style def...
//
var constructor;
// Try to access the class globally first
constructor = window[className];
// If that didn't work, try eval
if (!constructor) {
constructor = eval.call(window, className);
}
// Lastly, if there is a default attribute try that
if (constructor && constructor['default']) {
constructor = constructor['default'];
}
return constructor;
},
}}
いろいろやっていますが、components.jsで
#code(javascript){{
window.Mastodon = require('./components/containers/mastod...
}}
と初期化されていたものが使われていると思われます。
*おわりに [#p5eb7873]
今回はReactで画面描画がされる前段階として、そもそもReact...
次回はいよいよMastodonコンポーネントの中に踏み込んでいっ...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
