おはおはの民～ぱちおです！

この度ホームページを一気に改変しました！そして、ずっと触る触るといって触ってなかったReactを使って作り替えようと思い、色々学習した記録を備忘録として残しておきます。

正直フロントエンジニアとしてどうなのみたいな技術力ですが、この4年間「恥をかきたくない」みたいな感覚でなんもしてなかったな、と。恥をかいていこう恥って思いました。
作り替えたサイト↓
patiopatimon.com

備忘録的情報

Reactの基本的なページ表示(part 1 ←ここ)

Flux（情報取得/表示のみ程度）

GASを使ったAPI作成

これはpart 1でReact Router触った話

備忘録的情報
React RouterでHello Worldしたい
- わかったメモ
SFC(Stateless Functional Component)で書きなおす

Reactはコンポーネントの出し分けが良い感じできてなんかFacebook製の～みたいなふんわり知識レベルです。ちょっとVueは触ったかもしれないし、触ってないかもしれない程度

まぁあくまで自分用備忘録なので、説明用ブログという感じではないです。

Webpackの設定とかnpm環境作るとかはぐぐってください。 f:id:patioglass:20191109221855p:plain

React RouterでHello Worldしたい

Reactでまずただのテキスト表示みたいなことをしたい！わけですので、Hello Worldを出します。
（基本的書き方をやってみてるだけで最終的に次節のSFCの章の書き方に変える）

なんか触る前から「Reactではこういう書き方で～」というのがまったくもってどこから入ればいいかわからない感じがあるの強いイメージあるんですけどわかりますか？
あと単ページ表示だとなんか違うなと思ったので実際にルーティングを作る時のものでHello Worldしようと思った。

イメージ的HelloWorld（変数とかそういうのは後回し）
f:id:patioglass:20191109212823j:plain

React Routerを使ってルーティング設定とかをするらしい。
react-routerのpackege.jsonは"^5.1.2"でした

src/js/pages/Layout.js

import React from 'react';

export default class Layout extends React.Component {
    render() {
        return (
            <div class="wrapper">
                {this.props.children}
            </div>
        );
    }
}

src/js/components/top/TopComponent

import React from "react";
import { Link } from "react-router-dom";

import TestComponent from "src/js/components/top/TestComponent";

export default class TopComponent extends React.Component {
    render() {
        return (
            <div class="contents">
                <h1>ぱちお</h1>
                <Link to="something">something</Link>
                 { TestComponent }
            </div>
        );
    }
}

src/client.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from "react-router-dom"; // react-router

import Layout from "./src/js/pages/Layout";
import TopComponent "./src/js/components/top/TopComponent";
import SomethingComponent "./src/js/components/top/SomethingComponent";

const app = document.getElementById('app');

ReactDOM.render(
<Router>
       <Layout>
            <Route exact path="/top" component={TopComponent}></Route>
            <Route exact path="/something" component={SomethingComponent}></Route>
        </Layout>
    </Router>,
app);

src/index.html

<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <div id="app"></div>
  <script src="./build/client.min.js"></script>
</body>
</html>

webpackでビルドしてbuild/client.min.js作成する方法とかは別途ぐぐってください

わかったメモ

ルートとなるclient.jsは基本この書き方でよさそう

読み込みたい部品をimportで持ってきての形で展開されるっぽい

Routeタグ属性のexactをつけると完全マッチの時に有効になる（つけないとデフォでどのページでも読み込まれるコンポーネントになる？っぽい）

「React内」のaタグでページ遷移するときはLinkを使う

入れ子構造にすると入れ子の親タグ側で「this.props.children」に展開される

なるほどね、こんな感じで共通となる親レイアウトを作ってそこにさらにimportで追加して～とやっていきページが作られていく感じ。これでじゃんじゃかパーツ作って組み合わせていくだけってのがわかりを得た。Hello World終わり

SFC(Stateless Functional Component)で書きなおす

ここまでよくある感じで実際こんな感じで開発を進めて、デプロイまでしました。
そしたらある助言をいただいて（2個目の指摘）
f:id:patioglass:20191109215702j:plain

なんと

とどのつまりコンポーネントをReact.Componentの継承でクラスで作っていたけど、最近のReactだと関数で書く方がもろもろclassでコンポーネント作るよりすっきりする（ていうかした）
qiita.com

これあとあとリファクタリングとかしようとすると死んだので、できるなら最初からSFCで書いていくのが吉でした。

例えばさっきのTopComponentを書き換えるなら
src/js/components/top/TopComponent

import React from "react";
import { Link } from "react-router-dom";

import TestComponent from "./TestComponent";

export default class TopComponent extends React.Component {
    render() {
        return (
            <div class="contents">
                <h1>ぱちお</h1>
                <Link to="something">something</Link>
                 { TestComponent }
            </div>
        );
    }
}

↓
SFCにする
src/js/components/top/TopComponent

import React from "react";
import { Link } from "react-router-dom";

import TestComponent from "./TestComponent";

export default function TopComponent() {
        return (
            <div class="contents">
                <h1>ぱちお</h1>
                <Link to="something">something</Link>
                 { TestComponent }
            </div>
        );
}