React勉強中 TwitterとかLINEとかみたいな、新しい情報が徐々に追加されるサービスに 有用そうなツールっぽい。
簡単なサンプルコードを置いておく。 ul ← li ← 配列の中身 と入れていくのをプログラムで書ける。
||
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
<script>
var contacts = [
{key:1, name: "Twitter", link: "https://twitter.com/"},
{key:2, name: "Facebook", link: "https://ja-jp.facebook.com/"}
]
var listElements = contacts
//要素が足りないときに、はじく
.filter(function(contact) { return contact.link; })
//ここで書く .map(function(contact) { return React.createElement('li', {key:contact.key}, React.createElement('p', {}, contact.name), React.createElement('a', {href:contact.link}, contact.link) ) })
var rootElement = React.createElement('div', {}, React.createElement('h1', {}, "リンク"), //listElements->createElementの順 React.createElement('ul', {}, listElements) )
ReactDOM.render(rootElement, document.getElementById('react'))
||<