React入門資料を公開 ※ 株式会社GIGでは毎月社内勉強会を実施しています GIG inc. Good is good. We provide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする。小さなチームからスタートした多くの先人達が、世界をより豊かなモノに変革してきました。通信、UX、デバイス、技術の変化と共に世界はまだまだ加速度的に変わります。 Good is good. いいものはいい。GIGは、関わったユーザーやクライアントが前に進める“きっかけ”をつくりつづけます。 ■ お問い合せ https://giginc.co.jp/contact/

1. React
入門編

2. Reactとは
特徴
htmlの描画などに長けたライブラリ
言語
javascript
開発者（管理者）
Facebook

3. こんなところで使われています

4. Reactの優れているところ
● シングルページアプリケーションをシンプルで洗練されたコードでかける
●jqueryに比べると比較的スマートに書ける
●デザイナーもコードをhtml/cssに近い形で開発できる
○ HTMLの書き方に近いので、保守しやすい

5. とりあえずHello world
https://tsuchiyagig.github.io/reactsample/helloworld/

6. 解説
<div id="app"></div>
~ reactの読み込み ~
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('app')
);

7. コンポーネントでHelloworld
https://tsuchiyagig.github.io/reactsample/helloworld1.5/

8. 解説
class Welcome extends React.Component {
render() {
return <h1>Hello world!</h1>;
}
}
ReactDOM.render(<Welcome />, document.getElementById('app'));
先程との違いはrenderまでclassで定義し
てあり、htmlがパーツ化されている。
パーツが大きくなってきた場合こちらを
推奨

9. 名前つきHello world
https://tsuchiyagig.github.io/reactsample/helloworld2/

10. 解説
const user = {
name: 'react'
};
ReactDOM.render(
<h1> Hello, {user.name} World! </h1>,
document.getElementById('app')
);

11. props（値の受け渡し）
https://tsuchiyagig.github.io/reactsample/helloworld3/

12. 解説
function Welcome(props) {
return <h1>Hello, {props.name} World!</h1>;
}
const element = <Welcome name="react" />;
ReactDOM.render(
element,
document.getElementById('app')
);
htmlのエレメントを定義
この値が受け渡されたらここに表示する
を定義
propsを経由しnameに”react”をセットし
表示を行う

13. イベントでreactを発火しよう
https://tsuchiyagig.github.io/reactsample/button

14. 解説
function tick() {
const element = (
<h1>Hello, world!</h1>
);
ReactDOM.render(
element,
document.getElementById('app')
);
}
document.getElementById('btn').addEventListener('click', tick, false);
clickされたときに発火したいreactの描画
を格納しておく

15. 簡単なlistを作ってみる
https://tsuchiyagig.github.io/reactsample/list/

16. 解説
- 略 -
function UserGender(props){
var gender = props.gender ? '男' : '女';
return <span className="name">{gender}</span>;
}
function UserList(props) {
var listHtml = [];
for (var userObject of props.userObject) {
listHtml.push(<div key={userObject.id}>
名前 : <UserName name={userObject.name} />
年齢 : <UserAge age={userObject.age} />
性別 : <UserGender gender={userObject.gender} />
</div>);
}
return <div>{listHtml}</div>;
}
var userList = getUserList();
const element = <UserList userObject={userList} />;
ReactDOM.render(element, document.getElementById('app'));
各数値を可視化させるための定義
表示用のオブジェクトを定義
各値は定義してあるものを利用する
ユーザーリストを取得し受け渡す。

17. まとめ
●オブジェクトの分割はかなり設計を考えるとベスト
●現状ではjqueryを使用するのはマストだと思うので、reactとjqueryどちら
で組むかをよく考える
今日の勉強会のソースはここにあります、何かでご活用ください！
https://github.com/Tsuchiyagig/reactsample

18. Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.
テクノロジーとクリエイティブでセカイをより良くする
お問い合わせはこちらから
https://giginc.co.jp/contact/