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

# 初めに

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

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

https://main.d1veiz0ivmkx9t.amplifyapp.com/

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

https://github.com/quryu-1/reactapp-reactplotly-rategame

# メモ

## React Plotly について

グラフ描画ツールです。

https://plotly.com/javascript/react/

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);
```

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

https://github.com/plotly/react-plotly.js/issues/135

### 使い方

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

```react
<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 について

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

https://react-bootstrap-v4.netlify.app/getting-started/introduction/

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

```react
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 よりも後に書きます。

```js:index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
```

## Router、Link について

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

```react: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` に移動するリンクが作成されます。

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

以下を参考にしました。

https://reactrouter.com/web/api/Router

https://reactrouter.com/web/api/Route

https://reactrouter.com/web/api/Link

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

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

```react: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>
    );
  }
```

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

https://qiita.com/konojunya/items/cb026a2aa3df1837d587

# 参考記事

https://plotly.com/javascript/react/

https://github.com/plotly/react-plotly.js/issues/135

https://react-bootstrap-v4.netlify.app/getting-started/introduction/

https://reactrouter.com/web/api/Router

https://reactrouter.com/web/api/Route

https://reactrouter.com/web/api/Link

https://qiita.com/konojunya/items/cb026a2aa3df1837d587