Reactに触れてみた
Download as PPTX, PDF0 likes109 views
2019/02/22に行われた勉強会で発表されたものです。
![出力部分を作成しよう
• 独自タグの属性値はPropsから受け取れる
export default class OutputTag extends React.Component
<{list: string[]}> {
public render() {
return (
<h1>TODO一覧：</h1>
<ul>{this.props.list.map((w,i)
=>(<li key={i}>{w}</li>))}</ul>
);
}
}
<OutputTag list={dataList}/>
定義
使用方法
レンダリング結果](https://image.slidesharecdn.com/20190222slide-17-190222090102/85/React-7-320.jpg)
Reactに触れてみた
- 3. Reactとは？ JSX記法、コンポーネント指向、仮想DOM、単方向データフ ロー、リアクティブプログラミング、関数型プログラミング 、Props、State、SFC、HOC、React Hooks、Redux…… • 新しい概念が多く、学習が大変そうなイメージ • でもいきなり全部を学ぶ必要はない • 関数型っぽくないアプローチでもコードは書ける • 自作したTODOアプリを例に解説します
- 5. 一番外側もコンポーネント • 全ての大本となるのがAppコンポーネント • それ以下に他のコンポーネントがぶら下がる export default class App extends React.Component { public render() { return (<> <h1>タイトル</h1> <p>文章</p> <OutputTag /> </>); } } 定義 ReactDOM.render( <App />, document.getElementById('root') as HTMLElement ); 使用方法 普通のタグや 独自タグを使える
- 6. 出力部分を作成しよう • コンポーネントをclassで表現してみる • まずは1つのタグだけ返すものを…… export default class OutputTag extends React.Component { public render() { return ( <h1>TODO一覧：</h1> ); } } <OutputTag /> 定義 使用方法 レンダリング結果
- 7. 出力部分を作成しよう • 独自タグの属性値はPropsから受け取れる export default class OutputTag extends React.Component <{list: string[]}> { public render() { return ( <h1>TODO一覧：</h1> <ul>{this.props.list.map((w,i) =>(<li key={i}>{w}</li>))}</ul> ); } } <OutputTag list={dataList}/> 定義 使用方法 レンダリング結果
- 8. 状態を管理しよう • classで作るコンポーネントの場合、その状態をLocal Stateと呼ばれる仕組みで管理する • Propsと同様、ただの連想配列と考えればいい export default class App extends React.Component<{}, {data: string}> { constructor(props:{}){ super(props); this.state = {data: “タイトル”}; } public render() { return ( <h1>{this.state.data}</h1> ); } }
- 9. 状態を管理しよう • PropsやLocal Stateは、中身を直接書き換えることができないこ とに注意(Stateは「全上書き」だけできる) data1: 3 data2: “abc” Local State data1: 4 data2: “abc”× data1: 4 data2: “abc” ○ ※赤枠と青枠は 違うインスタンス
- 10. 入力部分を作成しよう • 入力部分のコンポーネントにLocal Stateを作成する • 入力部分で操作した際のイベントでStateを更新する • 本当にこれぐらいしかやることがない • 変更内容の伝播は、関数オブジェクトをPropsで渡して バケツリレーさせて対処する ソースコードは省略
- 11. どこまで説明したっけ？ • 仮想DOM→実装アルゴリズ ムの話なので気にしなくても 一応書ける • 単方向データフロー→Viewは Modelの内容表示に徹し、 Modelの変更は別ルートで対 処する手法 • SFC、HOC、Hooks、Redux→関数型プログラミングで書く場合に よく使う概念。ただしオブジェクト指向とノリがかなり違うので、 ついていけない場合は無難にclass Componentで書こう