| ページ一覧 | ブログ | twitter |　 書式 | 書式(表) |

MyMemoWiki

React

提供: MyMemoWiki
2024年10月5日 (土) 08:54時点におけるPiroto (トーク | 投稿記録)による版 (→‎ファイル拡張子)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
ナビゲーションに移動 検索に移動

目次

React

Node.js | Next.js |

4873117887.09.MZZZZZZZ.jpg link

4815619484.09.MZZZZZZZ.jpg link

スケルトン作成

  1. 開発の全体像を把握しつつ開発環境を整える
  2. React の単純なサンプルに React Router を適用する
  3. React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用する
  4. React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用したものからAjax通信を組み込む
  5. React環境->React Router->Redux-Saga->SuperAgent に Bootstrapを適用する

導入

Create React App

  • Reactアプリ開発のためのコマンドラインツール。トランスパイラ、バンドラ、開発サーバーなどを含むツールチェーン
  • Facebook本家が提供。他にもNext.js、Vite、Gatsby、Parcelなどのツールチェーンがある。
  • より高度な環境としてNext.jsも存在

Next.js

  • Next.js
  • Reactは、あくまでUI部分のみ
  • 本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
  • Reactベースのフレームワークとしてデファクトスタンダードと言える存在
  • 主なライブラリ
    • ファイルシステムベースの設定レスルーター
    • サーバーコンポーネント
    • データ取得用fetchメソッド
    • リソース組み込みの自動最適化
    • CSSフレームワーク、Tailwind　CSSへの標準対応

Node

Node.js のインストール

npx

  • ローカルにインストールされたツールを実行するためのパッケージランナー

Next.jsアプリの作成

Next.js


TypeScriptの導入

ファイル拡張子

JSX
Module

型アサーション

導入(旧)

  1. npm install -g create-react-app
  1. npx create-react-app my-app
  2. cd my-app
  3. npm start
  • Reactはバックエンドロジックやデータベースを持たないが、使いたいものを使えばよい。
  • Babelやwebpackのようなビルドツールも設定なしに利用できる。
  1. PS C:\workspaces\vscode\reactlesson> create-react-app react-lesson
  2. Creating a new React app in C:\workspaces\vscode\reactlesson\react-lesson.
  3.  
  4. Installing packages. This might take a couple minutes.
  5. Installing react, react-dom, and react-scripts...
  6.               :
  • アプリケーションが作成されたら実行
  1. PS C:\workspaces\vscode\reactlesson> cd react-lesson
  2. PS C:\workspaces\vscode\reactlesson> npm start
  • 実行された

1086 react01.jpg

  • /src/App.js を書き換えてみる
  1. import React, { Component } from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4.  
  5. const element = (<h1>Hello,world</h1>);
  6. class App extends Component {
  7.   render() {
  8.     return (
  9.       element
  10.     );
  11.   }
  12. }
  13.  
  14. export default App;
  • 反映された

1087 react02.jpg

  • リリース準備ができたら、以下を実行することで、buildフォルダ以下に最適化されたアプリケーションを作成する
  1. npm run build

クイックスタート

JSX

  1. const element = <h1>Hello,world!</h1>;
  • 文字列でも、HTMLでもなく、JSX
  • JavaScriptの拡張文法
  • テンプレートと思われるかもしれないが、完全なJavaScript
  • JSXはReactの要素を生成する

JSX表現

  • どのようなJavaScriptの表現も、中括弧で囲むことでJSXに埋め込むことができる
  • const element = (<h1>Hello, {formatName(user)}!</h1>);
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Hello World</title>
  6.     <script src="https://unpkg.com/react@latest/dist/react.js"></script>
  7.     <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
  8.     <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  9.   </head>
  10.   <body>
  11.     <div id="root"></div>
  12.     <script type="text/babel">
  13.     function formatName(user) {
  14.         return user.firstName + ' ' + user.lastName;
  15.     }
  16.     const user = {firstName:'Hiroto', lastName:'Yagi'};
  17.     const element = (<h1>Hello, {formatName(user)}!</h1>); 
  18.     ReactDOM.render(
  19.         element,
  20.         document.getElementById('root')
  21.     );
  22.     </script>
  23.   </body>
  24. </html>
  • コンパイルされたJSXは通常のJavaScriptオブジェクト
  • JSXをif文やforループ、変数への割り当て、引数や戻り値に利用できる
  1. function greeting(user) {
  2.    var now = new Date();
  3.    if (5 <= now.getHours() && now.getHours() <= 12) {
  4.        return <h1> Good morning {user.firstName + ' ' + user.lastName}.</h1>;
  5.    } else {
  6.        return <h1> Hello {user.firstName + ' ' + user.lastName}.</h1>;
  7.    }
  8. }

属性に利用

  • 中括弧を利用して、二重引用符なし(使用すると文字列リテラルとして扱われる)で直接利用できる。
  1. <div id="root"></div>
  2. <script type="text/babel">
  3. function greeting(user) {
  4.     var now = new Date();
  5.     if (5 <= now.getHours() && now.getHours() <= 12) {
  6.         return <h1> Good morning <a href={user.webpageUrl}>{user.firstName + ' ' + user.lastName}</a>.</h1>;
  7.     } else {
  8.         return <h1> Hello <a href={user.webpageUrl}>{user.firstName + ' ' + user.lastName}</a>.</h1>;
  9.     }
  10. }
  11. const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
  12. const element = (<h1>{greeting(user)}</h1>); 
  13. ReactDOM.render(
  14.     element,
  15.     document.getElementById('root')
  16. );

1089 react04.jpg

子要素

  • 子要素がない場合、XML同様　/> で閉じる
  • 子要素を含む
  • JSXはHTMLよりJavaScriptにより近い。ReactDOMはキャメルケースプロパティ(HTMLでは、class がclassName、HTMLではtabindexがtabIndexなど)を持つ
  1. function greeting(user) {
  2.     return <div>
  3.             <h1> Good morning {user.firstName + ' ' + user.lastName}.</h1>
  4.             <h2><a href={user.webpageUrl}>webpage</a></h2>
  5.            </div>
  6.            ;
  7. }
  8. const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
  9. const element = (greeting(user)); 
  10. ReactDOM.render(
  11.     element,
  12.     document.getElementById('root')
  13. );

1090 react05.jpg

インジェクション攻撃の予防

  • デフォルトでReact DOMは、JSXに埋め込まれた値をレンダリング前にエスケープする
  • 明示的にアプリケーションに記述しなくてもインジェクションされないことを保証する
  • XSS攻撃の予防を助ける
  1. function greeting(user, title) {
  2.     return <div>
  3.              <h1>{title}</h1>
  4.              <h2> Good morning {user.firstName + ' ' + user.lastName}.</h2>
  5.              <h2><a href={user.webpageUrl}>webpage</a></h2>
  6.            </div>
  7.            ;
  8. }
  9. const title = "<input type='button'>";
  10. const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
  11. const element = (greeting(user,title)); 
  12. ReactDOM.render(
  13.     element,
  14.     document.getElementById('root')
  15. );

1091 react06.jpg

JSX Represent オブジェクト

  • Babelは、React.createElement()を呼び出しコンパイルを行う
  • 以下の2つは同じ意味
  1. const element1 = (<h1 className='greeting'>hello</h1>);
  2. const element2 = React.createElement('h1',{className:'greeting'},'hello');
  • React.createElement()は、バグを防ぐ手助けをするが、本質的には以下のようなオブジェクトを生成する
  1. // 簡易表現
  2. const element = {type:'h1',props:{className:'greeting',children:'hello'}};
  • これらの要素を"React elements"と呼ぶ
  • 画面に表示させたいものの記述と考えることができる
  • Reactはこれらのオブジェクトを読み、DOMの構築と最新化に利用する

Elementsのレンダリング

  • Elements はReact アプリケーションの最小のビルディングブロック
  • 1つの要素は、画面上に表示するものを表現する
  • ブラウザのDOM要素と異なり、React Elements はプレーンなオブジェクトで生成のコストは小さい
  • React DOMは、DOMをReact Elementsに一致するように取り扱う

1つの要素をDOMの中にレンダリング

  • HTMLどこかに記述する、以下のDIV要素をroot DOM ノードと呼ぶ
  • React DOM が管理するすべてが、この要素の中にある
  1. <div id="root"></div>

React要素の更新

  • React要素は不変。一旦生成したら、子要素、属性などは変更できない。
  • UIを更新するには、新しい要素を作成し、ReactDOM.rendar()に引き渡す。
  1. function tick() {
  2.   const element = (<div>{(new Date()).toLocaleTimeString()}</div>);
  3.   ReactDOM.render(
  4.       element,
  5.       document.getElementById('root')
  6.   );
  7. }
  8. setInterval(tick,1000);

1092 react07.jpg <blockquote>通常のReact アプリケーションでは、ReactDOM.rendar()は 一度しか呼びださない。</blockquote>

Reactは必要なもののみ更新する

  • React DOMは、要素および子要素を前の状態と比較し、DOMの更新が必要な個所にのみ適用する。
  • ブラウザツールで、上記のソースコードを確認する

1093 react08.jpg <blockquote>毎tick()の呼び出しで、すべてのUIツリーを生成するよう記述してるが、変更が発生したテキストノードのみReact DOMにより更新されている。</blockquote>

コンポーネントと Props

  • コンポーネントはUIを独立し再利用可能な部分に分割する。
  • 概念的にコンポーネントはJavaScriptの関数のようなもの。
  • コンポーネントはpropsと呼ばれる任意の入力を受け付け、React Elementを返す。

コンポーネントの機能とクラス

  • JavaScriptの関数としてコンポーネントを定義する
  • この関数は有効なReactコンポーネント、なぜなら、単一のprops引数を引数として取り、React Elementを返す。
  • このようなコンポーネントを"functional"と呼ぶ。
  1. function Welcome(props) {
  2.     return <h1>Hello,{props.name}</h1>;
  3. }
  • ES6のクラスをコンポーネントの定義として利用できる
  1. class Welcome extends React.Component {
  2.     render() {
  3.         return <h1>Hello,{props.name}</h1>;
  4.     }
  5. }
  • 上記2つのコンポーネントはReactの視点からは同じ

コンポーネントのレンダリング

  • Elementは、ユーザー定義コンポーネントも表すことができる
  1. function Welcome(props) {
  2.  return <h1>Hello,{props.name}</h1>;
  3. }
  4. const element = <Welcome name='Hiroto' />
  5. ReactDOM.render(
  6.     element,
  7.     document.getElementById('root')
  8. );
  • Reactがユーザー定義コンポーネントを表示するときに、JSXの属性からコンポーネントへ"props"としてオブジェクトが渡される。

<blockquote>コンポーネント名はいつも大文字から始める。DOM タグは、<div /> だが、<Welcome /> はコンポーネントを表現する。Welcomeがスコープに存在すること。</blockquote>

コンポーネントの構成

  • コンポーネントはその出力において、他のコンポーネントに影響を与えることができる
  • 同じコンポーネントをどんなレベルの詳細にも抽象的に利用できる、ボタン、フォーム、ダイアログ、スクリーン
  • Reactでこれらは、一般にコンポーネントで表現される
  1. function Welcome(props) {
  2.   return <h1>Hello,{props.name}</h1>;
  3. }
  4. function App() {
  5.   return ( <div>
  6.       <Welcome name="Yagi"/>
  7.       <Welcome name="Kaela"/>
  8.       <Welcome name="Hiroto"/>
  9.     </div> );
  10. }
  11. ReactDOM.render(
  12.     <App />,
  13.     document.getElementById('root')
  14. );
  • 一般的に新しいReactアプリケーションは、一つのAppコンポーネントを最上位に持つ。既存のアプリケーションにReactを統合する場合は、小さなコンポーネント、例えばButtonなど、ボトムアップから開始し、徐々にView階層の最上位にいたる。

<blockquote>コンポーネントは、一つのroot要素を返さなければならない。上記で、Welcome要素を div に含めたのはこのため</blockquote>

Propsは読み取り専用

    • Reactはかなりフレキシブルだが、1つ厳格なルールがある。function だろうと class だろうとコンポーネントはpropsを編集できない。

状態とライフサイクル

  • 次のClockコンポーネントを再利用可能にカプセル化する
  1. function Clock(props) {
  2.   return (
  3.     <div>
  4.       <h2>{props.date.toLocaleTimeString()}</h2>
  5.     </div>
  6.   );
  7. }
  8. function tick() {
  9.   ReactDOM.render(
  10.       <Clock date={new Date()} />,
  11.       document.getElementById('root')
  12.   );
  13. }
  14. setInterval(tick, 1000);

1094 react09.jpg

  • 実装のために、Clockコンポーネントにstateを追加する。
  • 状態は、propsと同様だが、private かつ、コンポーネントから完全に制御される
  • クラス宣言したコンポーネントにはいくつかの追加的な機能があるが、local state はこれにあたる

関数をクラスに変更する

  1. React.Component を継承して同名のES6クラスを作成する
  2. render()メソッドを作成し、処理を移動、functionを削除
  3. propsをthis.propsに変更
  1. class Clock extends React.Component {
  2.   render() {
  3.     return (
  4.       <div>
  5.         <h2>{this.props.date.toLocaleTimeString()}</h2>
  6.       </div>
  7.     );
  8.   }
  9. }

クラスにローカル状態を追加する

  • date を props から state へ移動する
  1. render()メソッドの中の、this.props.date を this.state.date に変更
  2. クラスにコンストラクタを追加し、this.stateの初期状態を記述する
  3. <Clock date={new Date()} /> から dateを削除
  1. class Clock extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.state = {date : new Date()};
  5.   }
  6.   render() {
  7.     return (
  8.       <div>
  9.         <h2>{this.state.date.toLocaleTimeString()}</h2>
  10.       </div>
  11.     );
  12.   }
  13. }

クラスにライフサイクルメソッドを追加する

  • 多くのコンポーネントを使用するアプリケーションでは、破棄されたコンポーネントのリソースの解放が重要
  • ClockがDOMに最初にレンダリングされるときには、必ずタイマーをセットアップしたい。これをReactでは、"mounting" という
  • また、ClockがDOMから取り除かれるときには、タイマーをクリアしたい。これをReactでは、"unmounting"という
  • コンポーネントが、mount/unmount されるときに実行される特別なメソッドをクラスに宣言できる
  • componentDidMount()、componentWillUnmount() これらのメソッドはライフサイクルフックと呼ばれる
  • どのようにtimer IDを thisに保存するか
    • this.propsがReactによりセットアップされる間、this.stateは特別な意味を持つ
    • 表示に使用しないならば、クラスに自由にフィールドを追加できる
    • render()の中では、それらは利用できないし、ステートも持たない
  • 最後に、毎秒実行されるtick()メソッドを実装する。
  • this.setState()でローカルコンポーネントの状態を更新する
  1. class Clock extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.state = {date : new Date()};
  5.   }
  6.   componentDidMount() {
  7.     this.timerID = setInterval(
  8.       () => this.tick(),1000
  9.     );
  10.   }
  11.   componentWillUnmount() {
  12.     clearInterval(this.timerID);
  13.   }
  14.   tick() {
  15.     this.setState({
  16.       date: new Date()
  17.     });
  18.   }
  19.   render() {
  20.     return (
  21.       <div>
  22.         <h2>{this.state.date.toLocaleTimeString()}</h2>
  23.       </div>
  24.     );
  25.   }
  26. }
  27. ReactDOM.render(
  28.   <Clock />,
  29.   document.getElementById('root')
  30. );

状態を正しく使う

stateを直接操作しない
  1. // まちがい
  2. this.state.comment = 'Hello';
  • 上記の代わりに、setState() を利用する
  1. // 正しい
  2. this.setSatate({comment:'Hello'});

<blockquote>this.stateを割り当てることができるのは、コンストラクタのみ</blockquote>

stateは、非同期に更新される
  • Reactは、複数のsetState() をパフォーマンスのためにまとめて一度に処理する。
  • このため、this.propsとthis.stateは非同期に更新される
  • これらの値を信頼して、次の状態への計算を行うべきではない
  1. // まちがい
  2. this.setState({
  3.   counter: this.state.counter + this.props.increament,
  4. });
  • 修正するには、オブジェクトではなく関数を受け取る、setState()を使用する
  • 関数は、ひとつ前の状態(state)を最初の引数として、更新時のpropsを2つ目の引数として取る
  1. // 正しい
  2. this.setState((prevState, props) => ({
  3.   counter: prevState.counter + prpos.increament
  4. }));
  • 通常の関数でもよい
  1. // 正しい
  2. this.setState(function(prevState, props) {
  3.   return { counter: prevState.counter + props.increament };
  4. });
状態の更新はマージされる
  • setState()を呼び出すと、Reactは、現在のstateに提供したオブジェクトをマージする
  • 例えば、いくつかの独立した変数を含む場合
  1. constructor(props) {
  2.   super(props);
  3.   this.state = {
  4.     posts: []
  5.     comments: []
  6.   };
  7. }
  • これらを別のsetState() で更新
  1. componentDidMount() {
  2.   fetchPosts().then(response => { this.setState({ posts: response.posts }); });
  3.   fetchComments().then(response => { this.setState({ commentss: response.comments }); });
  4. }
  • マージはシャローなので、setState({comment}) は、this.state.posts を損なわずに、this.state.comments を置き換える

データは下へ流れる

  • 親だけでなく子コンポーネントも確実にステートフルかステートレスか知ることはできない。
  • 状態はしばしばローカルから呼び出されるかカプセル化されていて、他からアクセスできない。
  • コンポーネントは、自身の状態をpropsを通して子コンポーネントに渡す
  1. <h2>It is {this.state.date.toLocalTimeString()}.</h2>
  • これは、ユーザー定義コンポーネントでも動作する

<FormattedDate date={this.state.date} />

  • FormattedDateコンポーネントは、propsにdateを受け取り、Clockの状態が何かは知らない。
  1. function FormatterDate(props) {
  2.   return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
  3. }
  • これは一般的に、トップダウン、もしくは、ユニディレクショナル データフローという
  • 状態は常に特定のコンポーネントに属する。
  • データやUIは状態に由来し、ツリーのより下のコンポーネントにのみ影響を与えることができる

イベントの処理

  • React 要素のイベント処理は、DOMでの処理ととても似ているが、いくつかシンタックスの差異がある。
    • Reactイベントは、ロウアーケースではなく、キャメルケース
    • JSXでは、stringではなく、関数をイベントハンドラーとして渡す。
HTML
  1. <button onclick="test()" />
React
  1. <button onClick={test} />
  • もう一つの違いは、Reactでは、falseを返しデフォルトのふるまいを防止することができない。
  • 明示的に、preventDefault を呼び出す必要がある。
HTMLでデフォルトの新しいページを開くリンクのふるまいを防止する
  1. <a href="#" onclick="console.log('hoge'); return false" >Click</a>
React
  1. function ActionLink() {
  2.   function handleClick(e) {
  3.     e.preventDefault();
  4.     console.log('hoge');
  5.   }
  6.   return (
  7.     <a href="#" onClick={handleClick} >Click</a>
  8.   )
  9. }
  • e は、本物ではないイベント。Reactでは、W3Cに合わせるために定義している。
  • なので、ブラウザの互換性を心配する必要はない。リファレンスを参照
  • Reactでは、addEventListenerを通常呼び出す必要はない。要素が最初にレンダリングされるときに提供される
  • ES6のクラスを使用するときの一般的なパターン、例えば、Toggle ボタン
  1. class Toggle extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.state = {isToggleOn: true};
  5.     this.handleClick = this.handleClick.bind(this);
  6.   }
  7.   handleClick() {
  8.     this.setState(prevStae => ({
  9.       isToggleOn: !prevStae.isToggleOn
  10.     }));
  11.   }
  12.   render() {
  13.     return (
  14.       <button onClick={this.handleClick} >
  15.         {this.state.isToggleOn?"ON":"OFF"}
  16.       </button>
  17.     );
  18.    }
  19. }
  20. ReactDOM.render(
  21.   <Toggle />,
  22.   document.getElementById('root')
  23. );
  • この文法の問題点は、LoggingButtonがレンダリングされるたびに、異なったコールバックが生成されること
  • 多くのケースで、これは問題ないが、このコールバックが下位のコンポーネントにpropとして渡される場合、コンポーネントは余分にレンダリングすることになる。
  • コンストラクタでバインドするか、プロパティイニシャライザでバインドすることを推奨する。

条件付きのレンダリング

  • Reactでは、必要なら、振る舞いがカプセルかされた他と異なったコンポーネントを作成できる。
  • Reactの条件付きレンダリングは、JavaScriptの条件が動作するのと同じ方法で動作する。
  • JavaScriptのifのような演算子もしくは、条件演算子は、現在の状態を表した要素を作成するための、ReactがUIをそれに一致させることを許す。
以下の2つのコンポーネントについて考える
  • ユーザーがログインしているか否かによって使い分けたい。
  • isLoggedIn により、異なるレンダリングがなされる。
  1. function UserGreeting(props){
  2.    return <h1>Welcome to back!</h1>
  3. }    
  4. function GuestGreeting(props) {
  5.    return <h1>Please Sign up!</h1>
  6. }
  7. function Greeting(props) {
  8.    const isLoggedIn = props.isLoggedIn;
  9.    if (isLoggedIn) {
  10.      return <UserGreeting />
  11.    } else {
  12.      return <GuestGreeting />
  13.    }
  14. }    
  15. ReactDOM.render(
  16.   <Greeting isLoggedIn={true} />,
  17.   document.getElementById('root')
  18. );

要素変数

  • 要素を保持するのに変数を利用できる。
  • これは、出力結果が変わらない間に、条件によりコンポーネントの一部をレンダリングするのを助ける。
  1. function LoginButton(props) {
  2.    return (
  3.      <button onClick={props.onClick} >
  4.        Login      
  5.      </button>
  6.    );
  7. }
  8. function LogoutButton(props) {
  9.    return (
  10.      <button onClick={props.onClick} >
  11.        Logout      
  12.      </button>
  13.    );
  14. }
  15. class LoginControl extends React.Component {
  16.    constructor(props) {
  17.      super(props);
  18.      this.handleLoginClick = this.handleLoginClick.bind(this);
  19.      this.handleLogoutClick = this.handleLogoutClick.bind(this);
  20.      this.state = {isLoggedIn: false};
  21.    }
  22.    handleLoginClick() {
  23.      this.setState({isLoggedIn: true});
  24.    }
  25.    handleLogoutClick(){
  26.      this.setState({isLoggedIn: false});
  27.    }
  28.    render() {
  29.      const isLoggedIn = this.state.isLoggedIn;
  30.      let button = null;
  31.      if (isLoggedIn) {
  32.        button = <LogoutButton onClick={this.handleLogoutClick} />
  33.      } else {
  34.        button = <LoginButton onClick={this.handleLoginClick} />
  35.      }
  36.      return (<div>{button}</div>);
  37.    }
  38. }
  1. ReactDOM.render(
  2.   <LoginControl />,
  3.   document.getElementById('root')
  4. );

1085 react debug.jpg

インラインif と 論理 && 演算子

  • true && 演算子の場合評価され、false && の場合、falseとなりReactは無視する
  1. function MailBox(props) {
  2.    const unreadMessages = props.unreadMessages;
  3.    return  (
  4.      <div>
  5.        <h1>Hello!</h1>
  6.        {unreadMessages.length > 0 &&
  7.          <h2>
  8.            You have {unreadMessages.length} unread messages.
  9.          </h2>
  10.        }
  11.      </div>
  12.    );
  13. }
  14. const messages = ['message1','message2'];
  15. ReactDOM.render(
  16.   <MailBox unreadMessages={messages} />,
  17.   document.getElementById('root')
  18. );

インライン if-else とコンディション演算子

  • 条件 ? true : false
  1. function UserGreeting(props){
  2.     return <h1>Welcome to back!</h1>
  3. }    
  4. function GuestGreeting(props) {
  5.     return <h1>Please Sign up!</h1>
  6. }
  7. function Greeting(props) {
  8.     const isLoggedIn = props.isLoggedIn;
  9.     return (
  10.       <div>
  11.       {isLoggedIn ? (
  12.           <UserGreeting />
  13.         ) : (
  14.           <GuestGreeting />
  15.         )
  16.       }
  17.       </div>
  18.     );
  19. }    
  20. ReactDOM.render(
  21.   <Greeting isLoggedIn={false} />,
  22.   document.getElementById('root')
  23. );

コンポーネントのレンダリングさせない

  • 他のコンポーネントからレンダリングされたとしてもコンポーネントを隠したい場合、render出力の代わりにnullを返す
  1. function WarningBanner(props){
  2.   if(!props.warn) {
  3.     return null;
  4.   }
  5.   return (
  6.     <div>Warning!</div>
  7.   );
  8. }
  9. class Page extends React.Component {
  10.   constructor(props) {
  11.     super(props);
  12.     this.state = {showWarning : true}
  13.     this.handleToggleClick = this.handleToggleClick.bind(this);
  14.   }
  15.   handleToggleClick() {
  16.     this.setState(prevState =>({showWarning : !prevState.showWarning}));
  17.   }
  18.   render() {
  19.     return (
  20.       <div>
  21.         <WarningBanner warn={this.state.showWarning} />
  22.         <button onClick={this.handleToggleClick}>
  23.           {this.state.showWarning ? 'Hide' : 'Show'}
  24.         </button>
  25.       </div>
  26.     );
  27.   }
  28. }
  29.  
  30. ReactDOM.render(
  31.   <Page />,
  32.   document.getElementById('root')
  33. );

1095 react10.jpg

リストとキー

JavaScriptでリストの変換には、map()を利用する
  1. const numbers = [1,2,3,4,5];
  2. const doubled = numbers.map((number)=> number * 2);
  3. console.log(doubled)
  4. > [2, 4, 6, 8, 10]
  • React では同様に配列をリストに変換する

複数のコンポーネントをレンダリングする

  1. const fruits = ['apple','orange','grape','banana'];
  2. const listItems = fruits.map((fruit) => <li>{fruit}</li>);
  3. ReactDOM.render(
  4.   <ol>{listItems}</ol>,
  5.   document.getElementById('root')
  6. );

1096 react11.jpg

基本的なリストコンポーネント

  • 通常リストはコンポーネントに含まれる
Keys
  • keyを指定しないと警告がでる
  • keyは、Reactが、どのアイテムが登録、変更、削除されたのか特定するのに役立つ
  • 文字列で兄弟間でユニークな値を設定するのが望ましい
  1. function FruitList(props) {
  2.   const fruits = props.fruits;
  3.   const listItems = fruits.map((fruit) => <li key={fruit}>{fruit}</li>);
  4.   return (
  5.     <ol>{listItems}</ol> 
  6.   );
  7. } 
  8. const fruits = ['apple','orange','grape','banana'];
  9. ReactDOM.render(
  10.   <FruitList fruits={fruits}/>,
  11.   document.getElementById('root')
  12. );

コンポーネントをKeyと取り出す

  • Keyが意味を持つのは、配列を囲むコンテキストにおいて
  • 兄弟間で同じKeyを持つとエラーとなる
  1. function ListItem(props) {
  2.   // この<li> にKeyを設定するのは、ここがルートになるため間違い
  3.   return <li>{props.value}</li>
  4. }
  5. function FruitList(props) {
  6.   const fruits = props.fruits;
  7.   // <ListItem>の配列となるため、ここでKeyを指定するのが正しい
  8.   const listItems = fruits.map((fruit) => <ListItem key={fruit} value={fruit} />);
  9.   return (
  10.     <ol>{listItems}</ol> 
  11.   );
  12. } 
  13. const fruits = ['apple','orange','grape','banana'];
  14. ReactDOM.render(
  15.   <FruitList fruits={fruits}/>,
  16.   document.getElementById('root')
  17. );

JSXでmap()を埋め込む

  • 中括弧のインラインにmap()を置くことができる
  1. function ListItem(props) {
  2.   return <li>{props.value}</li>
  3. }
  4. function FruitList(props) {
  5.   const fruits = props.fruits;
  6.   return (
  7.     <ol>{fruits.map((fruit) => <ListItem key={fruit} value={fruit} />)}</ol> 
  8.   );
  1. } 
  2. const fruits = ['apple','orange','grape','banana'];
  3. ReactDOM.render(
  4.   <FruitList fruits={fruits}/>,
  5.   document.getElementById('root')
  6. );

Form

  • HTML Formは、Reactでは、少し他のDOMとは動作が異なる。
  • なぜなら Fromは通常内部状態をもつから。

コントロールされたコンポーネント

  • HTMLでFormは、自身の状態を維持しユーザー入力に基づいて状態を更新する。
  • Reactでは、変化可能な状態はコンポーネントのstateプロパティに保持し、setState()からのみ更新される。
  • "single source of truth"としてReact stateを作成することにより2つを結びつけることができる。
  • ReactコンポーネントはFormまたコントロールでユーザー入力により、何が起きたかを描画する。
  • input Form 要素の値は、Reactによりこの方法で制御される。
  • これは、「コントロールされたコンポーネント」と呼ばれる。
  1. class NameForm extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.state = {value : };
  5.     this.handleChange = this.handleChange.bind(this);
  6.     this.handleSubmit = this.handleSubmit.bind(this);
  7.   }
  8.   handleChange(event) {
  9.     this.setState({value : event.target.value });
  10.   }
  11.   handleSubmit(event) {
  12.     alert('A name was submitted ' + this.state.value);
  13.     event.preventDefault();
  14.   }
  15.   render() {
  16.     return(
  17.       <form onSubmit={this.handleSubmit}>
  18.          <label>Name: <input type="text" value={this.state.value} onChange={this.handleChange} /></label>
  19.          <input type="submit" value="Submit"/>
  20.       </form>
  21.     );
  22.   }
  23. }
  24. ReactDOM.render(
  25.   <NameForm />,
  26.   document.getElementById('root')
  27. );

1097 react12.jpg

  • valueが、Form要素に設定されると、表示されるvalueは、常にthis.state.valueとなる
  • すべてのキーストロークで、handleChangeが起動し、Reactのstateを更新する
  • 表示されるvalueも更新される
  1. handleChange(event) {
  2.   this.setState({value : event.target.value.toUpperCase() });
  3. }

textarea/select タグ

  1. class SelectParts extends React.Component {
  2.   constructor(props){
  3.     super(props);
  4.     this.state = {value: 'coconuts'};
  5.     this.handleChange = this.handleChange.bind(this);
  6.   }
  7.   handleChange(event) {
  8.     this.setState({value: event.target.value});
  9.   }
  10.   render(){
  11.     return(
  12.       <label>Select:
  13.         <select value={this.state.value} onChange={this.handleChange}>
  14.           <option value="grapefruit">Grape Fruit</option>
  15.           <option value="lime">Lime</option>
  16.           <option value="coconuts">Coconuts</option>
  17.           <option value="mango">Mango</option>
  18.         </select>
  19.       </label>
  20.     );
  21.   }
  22. }
  23. class TextareaParts extends React.Component {
  24.   constructor(props){
  25.     super(props);
  26.     this.state = {
  27.       value : 'なにか書いて'
  28.     };
  29.     this.handleChange = this.handleChange.bind(this);
  30.   }
  31.   handleChange(event) {
  32.     this.setState({value : event.target.value});
  33.   }
  34.   render(){
  35.     return (
  36.         <label>Textarea:<textarea value={this.state.value} onChange={this.handleChange} /></label>
  37.     );
  38.   }
  39. }
  40. ReactDOM.render(
  41.   <div>
  42.     <SelectParts />
  43.     <TextareaParts />
  44.   </div>,
  45.   document.getElementById('root')
  46. );

複数入力項目の処理

  • 複数のコントロールされた入力要素を処理したい場合、name属性を各要素に追加する
  • ハンドラー関数で、event.target.name の値に基づいて、どの要素か判定
  • ES6 計算されたプロパティ名構文をkey状態を更新するのに使用
  1. class Reservation extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.state = {
  5.       isGoing: true,
  6.       numberOfGuests: 2
  7.     };
  8.     this.handleInputChange = this.handleInputChange.bind(this);
  9.   }
  10.   handleInputChange(event) {
  11.     const target = event.target;
  12.     const value = (target.type == 'checkbox') ? target.checked : target.value;
  13.     const name = target.name;
  14.     this.setState({[name]: value});
  15.   }
  16.   render(){
  17.     return (
  18.       <form>
  19.         <label>Is going:<input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange}/></label>
  20.         <br />
  21.         <label>Number of guests:<input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange}/></label>
  22.       </form>
  23.     );
  24.   }
  25. }
  26. ReactDOM.render(
  27.   <div>
  28.     <Reservation />
  29.   </div>,
  30.   document.getElementById('root')
  31. );

1098 react13.jpg

コントロールされたコンポーネント以外の方法

状態を持ち上げる

  • いくつかのコンポーネントは同じ変更をデータに反映させることを必要とする。
  • 共有状態をそれらの、最も近い共通の祖先に持ち上げることを推奨する。
水が沸騰しているかどうかの計算を行う。
  1. function BoilingVerdict(props) {
  2.   if (props.celsius >= 100) {
  3.     return <p>The water would boil.</p>;
  4.   }
  5.   return <p>The water would not boil.</p>
  6. }
  7. class Calculator extends React.Component {
  8.   constructor(props) {
  9.     super(props);
  10.     this.handleChange = this.handleChange.bind(this);
  11.     this.state = {temprature: };
  12.   }
  13.   handleChange(e){
  14.     this.setState({temprature: e.target.value});
  15.   }
  16.   render(){
  17.     const temprature = this.state.temprature;
  18.     return (
  19.       <fieldset>
  20.         <legend>Enter temprature in Celsius:</legend>
  21.         <input value={temprature} onChange={this.handleChange} />
  22.         <BoilingVerdict celsius={parseFloat(temprature)} />  
  23.       </fieldset>
  24.     );
  25.   }
  26. }
  27. ReactDOM.render(
  28.   <div>
  29.     <Calculator />
  30.   </div>,
  31.   document.getElementById('root')
  32. );

1099 react14.jpg

2つ目の入力を追加する

  • 華氏の入力を追加し同期させる
  • Reactでstateを共有するには、共通の祖先に移動させることで実現でき、「状態の持ち上げ」という
  • TempratureInputのローカルstateをCalcuratorへ移動させる
  • Calucratorの共有stateは、「真の情報源」となる
  • TempratureInputにとって、tempuratureがローカルの場合、propsは読み取り専用となるので、this.setState()とするしかないが、tempratureが、親のpropsなので、管理する必要はなくなる。
  1. const scaleName = {
  2.   c: '摂氏',
  3.   f: '華氏'
  4. };
  5. function BoilingVerdict(props) {
  6.   if (props.celsius >= 100) {
  7.     return <p>The water would boil.</p>;
  8.   }
  9.   return <p>The water would not boil.</p>
  10. }
  11. function toCelsius(fahrenheit) {
  12.   return (fahrenheit - 32) * 5/9;
  13. }
  14. function toFahrenheit(celsius) {
  15.   return (celsius * 9/5) + 32;
  16. }
  17. function tryConvert(temprature, convert) {
  18.   const input = parseFloat(temprature);
  19.   if (Number.isNaN(input)) {
  20.     return ;
  21.   }
  22.   const output = convert(input);
  23.   const rounded = Math.round(output * 1000) / 1000;
  24.   return rounded.toString();
  25. }
  26. class TempratureInput extends React.Component {
  27.   constructor(props) {
  28.     super(props);
  29.     this.handleChange = this.handleChange.bind(this);
  30.     this.state = {temprature: };
  31.   }
  32.   handleChange(e){
  33.     // before:this.setState({temprature: e.target.value});
  34.     this.props.onTempratureChange(e.target.value);
  35.   }
  36.   render(){
  37.     // before:const temprature = this.state.temprature;
  38.     const temprature = this.props.temprature;
  39.     const scale = this.props.scale;
  40.     return (
  41.       <fieldset>
  42.         <legend>Enter temprature in {scaleName[scale]}:</legend>
  43.         <input value={temprature} onChange={this.handleChange} />
  44.         <BoilingVerdict celsius={parseFloat(temprature)} />  
  45.       </fieldset>
  46.     );
  47.   }
  48. }
  49. class Calculator extends React.Component {
  50.   constructor(props) {
  51.     super(props);
  52.     this.handleCelsiumChange = this.handleCelsiumChange.bind(this);
  53.     this.handlFahrenheitChange = this.handlFahrenheitChange.bind(this);
  54.     this.state = {scale:'c', temprature:};
  55.   }
  56.   handleCelsiumChange(temprature) {
  57.     this.setState({scale:'c', temprature});
  58.   }
  59.   handlFahrenheitChange(temprature) {
  60.     this.setState({scale:'f', temprature});
  61.   }
  62.   render() {
  63.     const scale = this.state.scale;
  64.     const temprature = this.state.temprature;
  65.     const celsius = scale == 'f' ? tryConvert(temprature, toCelsius) : temprature;
  66.     const fahrenheit = scale == 'c' ? tryConvert(temprature, toFahrenheit) : temprature;
  67.     return (
  68.       <div>
  69.         <TempratureInput scale="c" temprature={celsius} onTempratureChange={this.handleCelsiumChange} />
  70.         <TempratureInput scale="f" temprature={fahrenheit} onTempratureChange={this.handlFahrenheitChange}/>
  71.         <BoilingVerdict celsius={parseFloat(celsius)} />
  72.       </div>
  73.     );
  74.   }
  75. }
  76. ReactDOM.render(
  77.   <div>
  78.     <Calculator />
  79.   </div>,
  80.   document.getElementById('root')
  81. );

1100 react15.jpg

コンポジションと継承

  • Reactは強力なコンポジションモデルをもつ。コンポーネントの再利用には継承よりコンポジションを推奨する

封じ込める

  • 一部のコンポーネントは自身の子供を事前に知ることができない
  • これは、特にサイドバーやダイアログなどボックスを表現するコンポーネント共通
  • このようなコンポーネントには特別な子供propを使用し直接その要素に出力する
  • <FancyBorder>の内側に何があっても、JSXタグはFancyBorderコンポーネントをprops.children として経由する
  1. <style type="text/css">
  2.   div.FancyBorder {
  3.     border : 2px dashed;
  4.   }
  5.   div.FancyBorder-blue {
  6.     border-color: blue;
  7.   }
  8. </style>
  1. function FancyBorder(props) {
  2.   return (
  3.     <div className={'FancyBorder FancyBorder-' + props.color}>
  4.       {props.children}
  5.     </div>
  6.   );
  7. }
  8. function WelcomDialog() {
  9.   return (
  10.     <FancyBorder color="blue">
  11.       <h1 className="Dialog-title">Welcome</h1>
  12.     </FancyBorder>
  13.   );
  14. }
  15. ReactDOM.render(
  16.   <div>
  17.     <WelcomDialog />
  18.   </div>,
  19.   document.getElementById('root')
  20. );

1101 react16.jpg

特殊化

  • コンポーネントを他のコンポーネントの特殊なものとして考えることがある、例えば、WelcomDialogはDialogの特殊な例として。
  • Reactでは、コンポジションを使って実現する
  • クラスを用いても同様に記述できる
  1. function Dialog(props) {
  2.   return (
  3.     <FancyBorder color="blue">
  4.       <h1 className="Dialog-title">{props.title}</h1>
  5.     </FancyBorder>
  6.   );
  7. }
  8. function FancyBorder(props) {
  9.   return (
  10.     <div className={'FancyBorder FancyBorder-' + props.color}>
  11.       {props.children}
  12.     </div>
  13.   );
  14. }
  15. function WelcomDialog() {
  16.   return (
  17.     <Dialog title="Welcome" />
  18.   );
  19. }

React Router

Redux

Tips

テンプレート:Ref example.zip

ビルド

「https://www.typea.info/tips_/index.php?title=React&oldid=35332」から取得

© 2006 矢木浩人