React + Redux 開発用のディレクトリ構造を作った

先を見据えて丁寧に作っていきたいが先がどうなるか分からない。

作成したもの

React + Redux 開発用のディレクトリ構造

期待する動き

結果

成功

手順など

ROOT_DIRECTORY/
  + node_modules/
  + build/
  + source/
  |   + renderer/
  |   |   + components/
  |   |   |   + app/
  |   |   |   |   + view.js
  |   |   |   |
  |   |   |   + header/
  |   |   |       + view.js
  |   |   |
  |   |   + renderer.js
  |   |
  |   + index.html
  |
  + gulpfile.babel.js
  + .babelrc
  + package.json

source/index.html

React 描画エリアと React 描画ファイルを配置する。

<!DOCTYPE html>
<html>
<head>
  <title>Nukindex</title>
</head>
<body>
  <div id="app"></div>

  <script src="./renderer/bundle.js"></script>
</body>
</html>

source/renderer/renderer.js

React コンポーネントと DOM を結びつける。

React クラスは処理部分で使用していないが、これを削除するとブラウザ実行時にエラーになる。

import React from "react";
import ReactDOM from "react-dom";

import App from "./components/app/view";

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

source/renderer/components/header/view.js

各コンポーネントは components 以下に配置していく。コンポーネント毎に MVC を用意していく予定なので js ファイルではなくディレクトリにまとめる。

import React from "react";

export default class HeaderComponent extends React.Component {
  render() {
    return (
      <header>
        <h1>
          <a href="/">Nukindex</a>
        </h1>

        <p>毎日のおかずを提供するサイトです</p>
      </header>
    );
  }
}

source/renderer/components/app/view.js

コンポーネントは別コンポーネントを呼び出し、使用することができる。

import React from "react";

import HeaderComponent from "../header/view";

export default class App extends React.Component {
  render() {
    return (
      <div>
        <HeaderComponent />
      </div>
    );
  }
}