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
- インストール
yarn add react-modal - import文を追加
import Modal from 'react-modal'; - HTMLを追加
<Modal isOpen={this.state.isOpen} onRequestClose={this.closeModal}></Modal> 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フレームワーク。
- インストール
yarn add materialize-css@next - import文を追加
import 'materialize-css/dist/css/materialize.css' - 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のドロップダウンメニュー
- import文を追加
import M from 'materialize-css'; - 初期化用メソッドをコール
M.Dropdown.init(document.querySelector('.dropdown-trigger'));
※Reactの場合はcomponentDidMountに書くとよい - 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
コメント