サイトアイコン 上尾市のWEBプログラマーによるブログ

「速習React」の感想・備忘録1

Kindle本「速習React」のまとめ。

点数

93点

感想

とてもわかりやすかった。
JSX、コンポーネント、イベント、ルーティング、などReactを使う際に最低限必要な説明はすべて網羅されていたと思う。

まとめ

JSX

その他

基本

インストール

  1. CDN
  2. npm
  3. create-react-app

1は実行時にトランスコンパイルされるため、低速になるので非実用的。学習用と考えてよい。
2はnpmコマンドで必要なツールのみをインストールする方法。
本格的に開発するならば、3がお勧め。本書でも採用している。
create-react-appはNode.js上で動くコマンドラインツール。必要なライブラリ、ビルドツール(webpack, Babel)、開発サーバまでまとめて用意してくれる。

CDNを使用しての実行

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
  ReactDOM.render(<h1>hello</h1>, document.getElementById('root'));
</script>

※本番環境では、reactとreact-domのdevelopment.jsをproduction.min.jsとする

scriptタグのcrossorigin属性

外部スクリプト読み込み時のリクエストにクッキーや証明書を送らないことを意味する。通常はクッキーなどは不要なので、原則としてcrossorigin属性を付けるべき。crossorigin="anonymous"としても同じ意味。

create-react-appでのアプリ作成

  1. npm -y init
  2. npm install --save-dev create-react-app
    ※2019年12月よりグローバルインストールはできなくなった。 ※TypeScriptを使う場合は–typescriptをつける。tsconfig.jsonが作成される。
  3. npx create-react-app アプリ名
    ※デフォルトではyarnが使用されyarn.lockが生成される。npmにしたい場合は–use-npmを付ける。
    ※TypeScriptを使う場合は–typescriptを付ける
  4. cd アプリ名
  5. 各種実行方法
    npm start:開発サーバで実行(start, stop, restartはrunを省略可能)
    npm run build:/buildディレクトリに本番環境用ソースをビルド
    npm run test:テスト実行
    npm run eject:webpack/babelの設定情報を出力⇒カスタマイズが必要な場合だけ行う。
    ※一度ejectしたら戻すことはできないので注意

strictモード

create-react-appで生成されたアプリは、<React.StrictMode>で囲まれている。
これは開発モードの場合に様々な警告を表示してくれるものであり、本番ビルドには影響を与えない。
strictモードではconstructor, render, setStateの引数に渡した関数、が2回ずつ実行されるので注意。
https://ja.reactjs.org/docs/strict-mode.html
https://qiita.com/jkr_2255/items/b154f502d714a3b32e86

処理の流れ

public/index.htmlsrc/index.jssrc/App.js

index.html

<div id="root"></div>がReactアプリを表示する領域=ルート要素
※scriptタグは存在しない。ビルドして生成されるHTMLにはscriptが存在する。

index.js

Reactアプリ実行時に最初に呼び出されるファイル。
ReactDOM.render(<App />, document.getElementById('root'));がアプリ本体。
※末尾のserviceWorker.unregister();はオフラインキャッシュを無効にしている。通常はこのままでOK。

App.js

Reace16.8.6からコンポーネント定義がクラスから関数ベースに変わった。
(class App extends Component{}だったのがfunction App() {}に変わった)
コンポーネントで利用するCSS、画像はimport文で読み込んでおく。
import './App.css';
import img1 from './img1.jpg';
※画像は、<img src="{img1}">とするだけでインラインイメージ(バイナリのbase64)となる。

ReactDOM.renderメソッド

第1引数にコンポーネントを指定するのが基本的な使い方。
ReactDOM.render(<App />, document.getElementById('root'));
通常はすべての出力はコンポーネントで生成するので、ReactDOM.renderメソッドはルートコンポーネントを呼び出すためだけに使われる。

コンポーネントではないJSXを渡すこともできるが、使うことはあまりない。
ReactDOM.render(<p>hoge</p>, document.getElementById('root'));

JSX

JSXのルール

{}でJSXにJavaScript式を埋め込む

const itemName = 'リンゴ<br>です。';
function MyList() {
  return (
    <p>{itemName}</p>
  );
}

{}内はHTMLエスケープされる。 HTMLを有効にしたい場合は、オブジェクトの__htmlプロパティに文字列をセットし、dangerouslySetInnerHTML属性に指定する。
<p dangerouslySetInnerHTML={{ __html: "リンゴ<br>です。" }}></p>
※dangerouslySetInnerHTML属性を指定した場合、空要素にしないとエラーになる

// React要素の配列を渡すこともできる。ループ処理でよく使われる。
function MyList() {
  return (
      <div>{[<p>11</p>, <p>22</p>]}</div>
  );
}
// これは以下と同じ意味。
function MyList() {
  return (
      <div>
      <p>11</p>
      <p>22</p>
      </div>
  );
}

React.createElementメソッド

JSXは内部的にはトランスパイルでReact.createElementメソッドに変換される。
React.createElement(タグ, 属性, 子要素1, 子要素2, ...)
第1引数:タグ名 or コンポーネント(クラスまたは関数)
第2引数:属性の連想配列
第3引数以降:テキスト or ReactElementオブジェクト
ex)
React.createElement('div', { className: 'hoge' }, 'テスト', React.createElement('h1', null, 'Hello'));

コンポーネント

コンポーネントのルール

著者は「関数にしてもコード量をそこまで節約できない」「記法をどちらかに統一した方が読みやすい」などからクラスコンポーネントで統一することをオススメしている。
一般的には、Stateやライフライクルメソッドを使う場合はクラス、それ以外は関数、として混在させることが多いらしい。

コンポーネントへパラメータを渡す

プロパティ(Props)を利用する。
タグの属性値は、コンポーネントクラス内ではthis.props.xxxで取得できる。
<MyList items={['apple', 'orange']}/>
という属性値は
<p>{this.props.items[0]}</p>のように取得できる。
※属性をまとめて設定する場合はオブジェクトのスプレッド構文が便利
<p {...obj}>
<p hoge={obj}>だと、参照時はthis.props.hoge.xxxになってしまう(スプレッド構文だとthis.props.xxx

タグボディの取得

テキストまたはReactコンポーネントを渡すことができる。
コンポーネント内ではthis.props.childrenで取得できる。

<App>hoge</App>this.props.childrenに文字列hogeがセットされる。
<App>{[100, 200]}</App>this.props.children[0]のように取得できる。
<App><hr /></App>とすると、<hr />は文字列ではなくReactコンポーネントとなるので注意。
<App>{"<hr />"}</App>は文字列なので、{this.props.children}はHTMLエスケープされる

prop-typesによるプロパティの型チェック

npm install --save-dev prop-typesでインストール

import PropTypes from 'prop-types';
// 〜省略〜
App.propTypes = {
  name: PropTypes.string.isRequired,
  items: PropTypes.array.isRequired,
  children: PropTypes.string.isRequired,
};

プロパティのデフォルト値

defaultPropsで定義する。

App.defaultProps = {
  name: 'defaultName'
};
// クラスコンポーネントの場合はstaticプロパティでも可
static defaultProps = {
  name: 'defaultName'
};
モバイルバージョンを終了