React入門

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

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

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

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

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

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

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

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

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

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

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

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

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

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

解説
- 略 -
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'));
各数値を可視化させるための定義
表示用のオブジェクトを定義
各値は定義してあるものを利用する
ユーザーリストを取得し受け渡す。

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

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

React入門

More Related Content

What's hot (20)

Similar to React入門 (20)

More from GIG inc. (20)

React入門