各パーツのコンポーネント化をしてみる。【ver.1.3】

Reactでのビルドと描画が無事成功したので、次はコンポーネントを作ってみたい。

Header, Main, Footerの3つのコンポーネントに分けようと思う。

エラー出て修正したところは赤太字

コンポーネントを意識したディレクトリ構成へ

[ROOT]/
  + node_modules/
  + build/
  + source/
  |   + images/
  |   |   + main.jpg
  |   |
  |   + renderer/
  |   |   + components/
  |   |   |   + index/
  |   |   |       + components/
  |   |   |       |   + header/
  |   |   |       |   |   + view.jsx
  |   |   |       |   |
  |   |   |       |   + main/
  |   |   |       |   |   + view.jsx
  |   |   |       |   |
  |   |   |       |   + footer/
  |   |   |       |       + view.jsx
  |   |   |       |
  |   |   |       + view.jsx
  |   |   |
  |   |   + renderer.jsx
  |   |
  |   + index.html
  |   + style.css
  |
  + .babelrc
  + webpack.config.js
  + gulpfile.js
  + package.json

Webpack設定ファイルを修正する。

  • ファイルの場所が変わったのでrenderer.jsxのパスを修正する。
  • 拡張子を解決する設定を追加する。

webpack.config.js

var path = require("path");

module.exports = {
  "entry": "./source/renderer/renderer.jsx",
  "output": {
    "filename": "bundle.js",
    "path": path.resolve(__dirname, "build")
  },
  "resolve": {
    "extensions": ["*", ".js", ".jsx"]
  },
  "module": {
    "loaders": [
      {
        "test": /\.jsx$/,
        "exclude": /node_modules/,
        "loader": "babel-loader"
      }
    ]
  }
};

各ファイルの中身

パスは長いので一部省略。

renderer.jsx

前回と比べてだいぶすっきりした。

var React = require("react");
var ReactDOM = require("react-dom");

var IndexComponent = require("./components/index/view");

var AppComponent = React.createClass({
  "render": function() {
    return (
      <IndexComponent />
    );
  }
});

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

index/view.jsx

Header, Main, Footerそれぞれのコンポーネントを読み込み、ページ単位の見た目を作成する。

var React = require("react");

var HeaderComponent = require("./components/header/view");
var MainComponent = require("./components/main/view");
var FooterComponent = require("./components/footer/view");

module.exports = React.createClass({
  "render": function() {
    return (
      <div>
        <HeaderComponent />

        <MainComponent />

        <FooterComponent />
      </div>
    );
  }
});

header/view.jsx

var React = require("react");

module.exports = React.createClass({
  "render": function() {
    return (
      <header className="header">
        <h1 className="header-title">Kazma Arakaki</h1>

        <p className="header-description">Student</p>
      </header>
    );
  }
});

main/view.jsx

どうにかマークダウンで書けないか。次回以降の課題。

var React = require("react");

module.exports = React.createClass({
  "render": function() {
    return (
      <main className="main">
        <h2 className="topic">
          <span className="underlay">I LIKE</span>
        </h2>

        <ul className="list">
          <li>Manga, Anime</li>

          <li>JavaScript</li>
        </ul>

        <h2 className="topic">
          <span className="underlay">FIND ME</span>
        </h2>

        <ul className="list">
          <li>on <a href="mailto:twi1ightmessenger1988@gmail.com">Gmail</a></li>

          <li>on <a href="https://twitter.com/KazmaArakaki" target="_blank">Twitter</a></li>

          <li>on <a href="https://www.facebook.com/kazma.arakaki" target="_blank">Facebook</a></li>
        </ul>
      </main>
    );
  }
});

footer/view.js

var React = require("react");

module.exports = React.createClass({
  "render": function() {
    return (
      <footer className="footer">
        <p className="footer-paragraph">
          <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"
              title="This work is licensed under a Creative Commons Attribution 4.0 International License.">
            <img alt="Creative Commons License"
                style={{"borderWidth": 0}}
                src="https://i.creativecommons.org/l/by/4.0/88x31.png" />
          </a>
        </p>
      </footer>
    );
  }
});

今回は割とスムーズにうまくいった。

ところで前回気づかなかったが、描画した際に下のようなエラーが表示された。

f:id:KazmaArakaki:20170518203509j:plain

Warning: exports: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you’re not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

React.createClassは非推奨なのでJavaScriptのクラス宣言を使用するようにとのことだ。

せっかくなので次回はコードを全体的にES2015+にしてみたいと思う。