React 入門したのでアプリケーションを作ってみた

初めに

React に入門したのでアウトプットとして簡単なアプリケーションを作りました（正確には入門中です。React 難しいです）。作成中にもたくさんインプットしたので、アプリケーションのリンクとともに学んだことをメモとして投稿します。

アプリケーションは以下になります。AWS Amplify を使用してデプロイしています。

ソースコードはこちらに置きました。

メモ

React Plotly について

グラフ描画ツールです。

React Ploty をインストールした後、アプリケーションを起動しようとしたら、以下のようなメッセージが表示されて起動できませんでした。

JavaScript heap out of memory

次の手順で解決しました。

react-plotly のみインストールします。

npm install react-plotly.js

CDN を使用します。

index.html

<body>
  <div id="root"></div>

  <!-- CDN を使用 -->
  <script crossorigin src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</body>

Home.js

import createPlotlyComponent from 'react-plotly.js/factory';

const Plotly = window.Plotly;
const Plot = createPlotlyComponent(Plotly);

こちらの方法は以下を参考にしました。

使い方

以下のように要素を作ります。クリックイベントやホバーイベントに対応しています。

<Plot
  data={[
    {
      mode: "markers",
      x: [1, 2, 3],
      y: [3, 7, 4],
      marker: { color: "red" }
    }
  ]}
  layout={
    { title: "Sample" }
  }
  onClick={(e) => this.sampleClickHandler(e)}
  onHover={(e) => this.sampleHoverHandler(e)}
  onUnhover={(e) => this.sampleUnhoverHandler(e)}
/>

React BootStrap について

インストール方法は以下を参考にしました。

以下のように使用するコンポーネントをインポートして使います。

import { Container, Row, Col } from "react-bootstrap";

const Example = () => {
  return (
    <Container>
      <Row>
        <Col>Yah!</Col>
        <Col xs={6}>OK!</Col>
        <Col>Foo!</Col>
      </Row>
      <Row>
        <Col>react</Col>
        <Col xs={5}>hello</Col>
        <Col>column</Col>
      </Row>
    </Container>
  );
}

自分の css でスタイルを上書き

以下のように css ファイルを BootStrap を css よりも後に書きます。

index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';

Router、Link について

以下のように Router 要素の中に Route 要素を作成し、属性に割り当てるパスと、そのパスにアクセスしたときのコンポーネントを指定します。

App.js

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Router>
          <div>
            <Route path="/" exact component={Home} />
            <Route path="/Introduction" exact component={Introduction} />
          </div>
        </Router>
      </div>
    );
  }
}

/ にアクセスすると、Home コンポーネントを表示し、見出しの下に /Introduction に移動するリンクが作成されます。

Home.js

class Home extends React.Component {
  render() {
    return (
      <div className="Home">
        <h1>Hello World</h1>
        <Link to="/Introduction" className="IntroLink">
          Introduction
        </Link>
      </div>
    );
  }
}

以下を参考にしました。

ループでリスト要素を作成する

JavaScript のリストを使用します。属性にキーを指定します。

RecentResult.js

class RecentResult extends React.Component {
  createList(list) {
  // リストに <li>...</li>を格納するメソッド
  // key={...} を指定しないとエラーになる
    const listElement = [];
    for (let i = 0; i < list.length; i++) {
      listElement.push(
        <li key={i}>
          <GraphData graph={this.props.graphList[i]} />
        </li>
      );
    }
    return (
      <ul className="List">
        {listElement}
      </ul>
    );
  }

上記の方法は以下を参考にしました。

参考記事