「はじめてのReact」の感想・忘備録

Kindle本「はじめてのReact」のまとめ。

点数

75点

感想

全体的に内容が浅い感じがするが、react-modalやreact-datesといったサードパーティのコンポーネントを扱っている点は良かった。
ただし、いくつか不親切と感じる点があった。

  • コンポーネントのメリットに「CSSの名前空間を汚染を防ぐ」と書いているのにその記述がない。
  • CDNで読み込んで実行していたはずなのに、途中からwebpackによるトランスパイルが必要となる。
  • 2018年の書籍だが、著者のサイトが消えている。

フォーム

送信ボタンは使わない

Reactではフォームの送信ボタンは画面遷移を伴うので通常は使わない。

formのonSubmitで任意の処理を実行するのが一般的。

ファイルアップロードの例

handleFileChange = (e) => {
  const formData = new FormData();
  const files = e.target.files;
  for (let i = 0; i < files.length; i++) {
    formData.append(`image${i}`, files[i]);
  }
  fetch('./index.html', {
    method: 'POST',
    body: formData
  }).then(res => res.text())
    .then(html => {
      console.log(html);
    });
};
// HTMLは以下のようにイベントをセット
// <input type="file" onChange={this.handleFileChange} multiple/>

async/await

fetch APIで複数の非同期通信を順番に実行する場合などは、コールバックがネストしてしまう。
ES7のasync/awaitを使うと、コードが見やすくなる。
※非対応ブラウザには@babel/polyfillが必要。

handleFileChange = async (e) => {
  const formData = new FormData();
  const files = e.target.files;
  for (let i = 0; i < files.length; i++) {
    formData.append(`image${i}`, files[i]);
  }
  const res = await fetch('./index.html', {
    method: 'POST',
    body: formData
  });
  const html = await res.text();
  console.log(html);
};

サードパーティコンポーネント

Reactのエコシステム

Reactを使用した開発では、第三者が作成したサードパーティのコンポーネントを使うことが一般的。

サードパーティのコンポーネントはnpmで簡単にインストールできる。
たとえば、カレンダー機能であれば、Airbnbが作成したreact-datesを使用する。

react-modal

  1. インストール
    yarn add react-modal
  2. import文を追加
    import Modal from 'react-modal';
  3. HTMLを追加
    <Modal isOpen={this.state.isOpen} onRequestClose={this.closeModal}></Modal>
  4. classの前にModal.setAppElement('#xxx');がないと警告が表示される
    ⇒モーダル以外のコンテンツとの関係をはっきりさせるための設定とのこと

react-dates

  • react-datesとmoment.jsのバージョンを合わせるために、以下のコマンドでインストール
(
  export PKG=react-dates;
  npm info "$PKG" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g; s/ *//g' | xargs npm install --save "$PKG"
)
  • 初期化&ピッカー、moment.js、CSSのimport
import 'react-dates/initialize';
import { SingleDatePicker } from 'react-dates';
import moment from 'moment';
import 'react-dates/lib/css/_datepicker.css';
// react-datesではDateオブジェクトの代わりにmoment.jsを日にちの管理に使う
  • HTMLを追加
<SingleDatePicker onFocusChange={({focused})=>this.setState({focused})} 
  focused={this.state.focused} onDateChange={date=>this.setState({date})} date={this.state.date} />

※constructorで以下のstateの初期化をしておく
focused: false,
date: moment(new Date()),

CSS

Materialize

マテリアルデザインを簡単に作ることができるCSSフレームワーク。

  1. インストール
    yarn add materialize-css@next
  2. import文を追加
    import 'materialize-css/dist/css/materialize.css'
  3. HTMLを追加
<nav>
  <div className="nav-wrapper">
    <ul>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
    </ul>
    <ul className="right">
      <li><a href="#">HTML5</a></li>
      <li><a href="#">CSS</a></li>
    </ul>
  </div>
</nav>

Materializeのドロップダウンメニュー

  1. import文を追加
    import M from 'materialize-css';
  2. 初期化用メソッドをコール
    M.Dropdown.init(document.querySelector('.dropdown-trigger'));
    ※Reactの場合はcomponentDidMountに書くとよい
  3. HTMLを追加
<nav>
  <div className="nav-wrapper">
    <ul>
      <li><a href="#" className="dropdown-trigger" data-target="submenu1">ドロップダウン</a></li>
    </ul>
    <ul id="submenu1" className="dropdown-content">
      <li><a href="#">サブメニュー1</a></li>
      <li className="divider" tabIndex="-1"></li>
      <li><a href="#">サブメニュー2</a></li>
    </ul>
  </div>
</nav>

CSSモジュールを使う

Vue.jsではスコープの限定されたCSSを使うことができるが、ReactはグローバルなCSSのみをサポートしている。

ただし、create-react-appのversion2以降では、hoge.cssをhoge.module.cssにしてインポートするだけでcss moduleを使えるようになる。
https://kapu-kapu.hatenablog.com/entry/2018/11/19/132655

import ChildCss from './Child.module.css';
でインポートし、
<p className={ChildCss.body} id={ChildCss.title}>Child</p>
のようにクラスやIDを使うことができる。

以前は、npm run ejectでwebpackのcss-loader設定をmodules: trueにしなければならなかった。
https://www.yoheim.net/blog.php?q=20180312


【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。