React 復習メモ(その 1)

なにこれ

以前、少し囓ったときに、メインの日記の方に多少学習の進捗を 1 つ 2 つ書いた。
tercel-tech.hatenablog.com

しかし記事化コストが高すぎて、学習の足を引っ張りかねなくなったのでやめてしまった。

最近、再び React 熱が再燃したので、自分用の思い出しメモとして、ここに書き捨てておこうと思う。 ──と考えていたのもはるか昔のことである。

本来、この記事はかなり以前に書いたものである。 少なくともこの辺の話をする前に公開しておきたかった。 しかし、書いているうちにだんだん何の役に立つのか分からなくなってしまい、モチベーションが大幅に低下したので放置していた。

今更こんな記事を投稿して何になるのか分からんが、記事数を稼ぐために置いておく。

create-react-app

突然だが、我々の業界には「ヤクの毛刈りYak Shaving」という格言(?)がある。 これは「本来の問題を解決しようとする過程で新たな問題に直面し、それに対処しようとすると、さらに別の問題が発生する」ことのたとえである。

React が流行り出した当初、興味本位で囓ってはみたものの、「はじめの一歩」がとてつもなく遠かったことを覚えている。 React を動かすために、周辺ツール(Babel や Gulp など)をちまちま導入したり、設定をガリガリ書いたり……。

早く React を書きたいはずなのに、いつの間にかヤクの毛を刈っていた。

そんな中、満を持して颯爽と登場したのが create-react-app である。こいつは React プロジェクトのボイラープレートを手っ取り早く用意するためのツールである。

導入は非常に簡単で、ターミナルに以下のコマンドを実行するだけでよい。 Mac の場合、コマンドの先頭に sudo が必要かも知れない。

インストール
$ npm install -g create-react-app

ちなみに create-react-app のバージョンは、8月21日現在の最新版である 1.4.0 を使用した。

$ create-react-app --version
1.4.0
プロジェクトの作成

適当なディレクトリに cd して、プロジェクトの作成を行う。

npm init のときとは違い、事前に [プロジェクトディレクトリ] を mkdir しておく必要はない。

$ create-react-app [プロジェクトディレクトリ]
$ cd [プロジェクトディレクトリ]

[プロジェクトディレクトリ] に cd した状態で npm start を叩くと、アプリ(の雛形)を実行できる。

$ npm start

Hello, World

src/App.js を以下のように書き換えて npm start すると、とりあえず「Hello, World」が表示されるようになる。

src/App.js
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (<div>Hello, World</div>);
  }
}

export default App;

ただし、コンポーネントrender() メソッドのみをオーバーライドしている場合、コンポーネントはクラスではなくアロー関数で簡略化できる。

src/App.js
import React from 'react';

const App = () => <div>Hello, World</div>;
export default App;

変数の埋め込み

JSX のタグ内に変数を埋め込むには、 { 変数名 } を使用する。

src/App.js
import React from 'react';

const name = 'Tercel';
const App = () => <div>Hello, {name}.</div>;
// => Hello, Tercel.

export default App;

プロパティの使用

JSX のタグ属性に、プロパティを指定可能である。

src/App.js
import React from 'react';

const Hello = (props) => (
  <h3>Hello {props.name}.</h3>);

const App = () => (
  <div>
    <Hello name="Tercel" />
    <Hello name="Linehat" />
  </div>);

export default App;

メモ

  • setState() は、componentWillReceiveProps() から呼び出す。