Reactを初めて触ってみました(tutorialその②)
前回もお話したとおり社内で別チームの人から自分の市場価値を上げたい、今のまま自分の業務をやっていては駄目なのではないかとということで私も業務没頭型で世間の波に乗り遅れている手前こんな話は救いの意見。前回に引き続きやっていきましょう！
やっとreactを触るの巻ですね。
まずReactを調べて（実際にざっくりしか知らなかったもので。。）
Reactのサイトからとりあえずtake the tutorialに進んでみて理解していこうかなと思います。
話は脱線しますが、PHPエンジニアとして長くやっていてWEBで検索して誰かの書いている同様な例を参考にやってまいりましたが、ひしひしと公式を理解できないと他の作業で理解が深まらなくて駄目だなと思っていて公式から手をつけた次第です。
早速スタートしていきます。
どうやら簡単なゲームに触れるらしいとのこと。
HTMLとjavascriptの知識はあったほうがいいらしくES6とやらも？（しらない。。）
始めるにあたってはブラウザでコードを編集するか環境を作ってやれとのこと
今回はいつもどおりdockerで環境を構築して試していこうと思う・・・っと作り始めたんですが触れるだけならIDEとローカルだけで理解をまずはしたほうがいいのでは？と思い手軽に触れる環境を
前回構築しています。ですのでlocalhost:3000でブラウザから参照できているところまでできているところからですね。
では先に進みます
次はReact.Componentのサブクラスから始めましょうとのことです。
componentはpropsと呼ばれるパラメータを取り込みrenderメソッドを返して表示するビューの階層を返します。
とのこと
実際にはやらないのですが理解のために概要で説明に書いてあることを実行してみました。ShoppingListをレンダリングしているところをちょっと試してみますね。
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
上と下は同等であって興味があれば
APIリファレンスで説明しているよとのこと
return React.createElement('div', {className: 'shopping-list'},
React.createElement('h1', /* ... h1 children ... */),
React.createElement('ul', /* ... ul children ... */)
);
下の使い方はよく調べなかったので説明できませんが上のほうはShoppingListというクラスを作り、その中に何をレンダリングしたいか指示を書けばいいんですということらしいです。
でもShoppingListクラスを追加しただけではブラウザに何も表示されません。
初心者なもので関係性を理解していこうと思い調べていくと理解できました。
tutorialのベースソースで追加してShoppingListを表示しようとしてみたんですが
ReactDOM.render(
<Game />,
document.getElementById('root')
);
ReactDOM.render(
<ShoppingList />,
document.getElementById('shopping-list')
);
ReactDOM.render
レンダリングしますよ、第一引数？がクラス名、第二引数？が操作対象の要素ID
上で言えばGameクラスの指示をid=rootにレンダリングします、ShoppingListの指示をid=shopping-listにレンダリングします
ということになるわけですね。※はじめここが理解できずになぜ表示されない？！となりました。
しかし、index.htmlにはid=shopping-listはありませんので追記してみました。
コメント
コメントを投稿