ReactJS

since 2018-08-16

nodejs に書いた手順で WSL Ubuntu に環境構築してからのメモ。

TODO: 過去の仕事で使った angularjs との比較、移行に関する個人的な考察。

npx create-react-app my-app

• npx は npm のパッケージランナー。
• https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b
• create-react-app というパッケージをインストールして、利用可能になるコマンド create-react-app を引数 my-app で実行する。
• https://github.com/facebook/create-react-app

完了すると my-app フォルダができている。

$ ls my-app/
node_modules  package.json  package-lock.json  public  README.md  src

$ du -s my-app
157866  my-app

ちゃんと .gitignore があるので、ここで git init して initial commit しておく。

$ cd my-app/
$ git init
$ git add .
$ git commit -am "initial"

開発サーバーの動作を確認する

$ npm start

WSL で作業していたら、ブラウザが開けませんエラーではなく、ちゃんと Windows の Chrome が localhost:3000 を開いてくれる。

この作業フォルダは Windows から編集できる場所に作っておいて、Visual Studio Code のターミナルから WSL の bash をひらいて npm start しておく。

npm start をやり直すたびに localhost:3000 タブが増えてしまうので、基本は動かしっぱなしがよい。

ちなみに npm run build すると静的ファイルを build フォルダに作る。

コンポーネントの概念とファイル分割の話を切り離して考えたい。

そこで App.js のインポートをやめて index.js だけでできることを模索してみる。

Visual Studio Code で my-app フォルダを開いて index.js を編集する。

エディタで編集を保存するたびにコンパイルされ、ブラウザがリロードされる。

import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
  render() {
    return (
      <Fragment>
        <h1>hello</h1>
        <div className="text">hello</div>
      </Fragment>
    );
  }
}
ReactDOM.render(<App/>, document.getElementById('root'));

とにかく既存の HTML を丸ごと突っ込んでみたい場合は、これが出発点と思われる。

XML を埋め込む記述 (JSX) は Visual Studio Code で快適に扱える。

• 複数の要素を並べて書くことができないので、必要な場合は Fragment というダミー要素を使う。
• HTML の class 属性は className と書く

なお、Chrome 開発者ツールでこのコンテンツを調べていたら、Chrome のアドオンをインストールせよと言われる。

React 開発者ツールを入れておくと React コンポーネントを Chrome で確認できる。

JavaScript で評価される値の埋め込みは {} で行う。

import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
  render() {
    const msg = 'world';
    return (
      <Fragment>
        <h1>hello</h1>
        <div className="text">{msg}</div>
      </Fragment>
    );
  }
}
ReactDOM.render(<App/>, document.getElementById('root'));

テンプレートエンジンの条件分岐やループ、あるいは ng-if / ng-show / ng-repeat のような処理は、JavaScript で記述。

import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
  render() {
    const items = ['dog', 'cat', 'monkey'];
    const content = items.map(item => {
      return <li>{item}</li>;
    });
    return (
      <Fragment>
        <h1>hello</h1>
        <ul>
          {content}
        </ul>
      </Fragment>
    );
  }
}
ReactDOM.render(<App/>, document.getElementById('root'));

複雑になるとリファクタリングしようということになる。

ここでようやく新しいクラスを定義。

import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
 
class Animals extends Component {
  render () {
    const animalNames = ['dog', 'cat', 'monkey'];
    const content = animalNames.map(item => {
      return <li>{item}</li>;
    });
    return (
      <ul>
        {content}
      </ul>
    );
  }
}
class App extends Component {
  render() {
    return (
      <Fragment>
        <h1>hello</h1>
        <h2>animals</h2>
        <Animals/>
      </Fragment>
    );
  }
}
ReactDOM.render(<App/>, document.getElementById('root'));

しかし items は Animals の外にあったほうがいいという話が出る。

一般的には state と props の話が出てくる。

ここではいきなり、状態はグローバルに管理したい、という前提で redux をオレオレ流に突っ込んでみる。