Reactを学びはじめて１ヶ月半.....

やっとやっと本家リポジトリのコードの意味を理解できるようになってきました。

勉強する前は

「なんでreturnの前に関数入れてるんだろ？」

って部分が意外とモヤッとしておりました。

講座で解説を聞きながら手を動かして

作って消してを繰り返していくうちに

徐々に分かってきたのが....

JavaScriptなの？

Reactなの？

Next.jsなの？

TypeScriptなの？

って部分。

いきなりNext.js learnをやった数ヶ月前がお恥ずかしい限りですm(_ _)m

今回はNext.js learnの復習を兼ねながら、

じわりじわりとeasy-notion-blogに寄せていく演習をしてみました。

完全再現までにはまだまだ課題は多いものの、

まずはDBからデータを取ってくる前の

初々しい状態の実装工程を

紹介していきます＼(^o^)／

▼　出来上がったのはこれ

code sandboxで工程管理をしていったので、

PR内のコメントに追記したリンクへ飛ぶと画面遷移もいじれます🎶

Next.jsのテンプレをインストール

すごくすごく何もない状態のから始めることにしました(´・ω・`)

▼ 画面遷移についてはこのページ

この情報を元に実装。

https://github.com/herohoro/Blog_learn/pull/3

▼ このページを見ながら修正。

tsxに変換するために整えることが意外とあり.....

• tsconfig.json
• next-env.d.ts
• typescriptをインストール
• ＠types/react
• @types/node

内容は現段階では高度すぎるので本家リポジトリのコードを引用することにしました。(くやしー)

本家wikiを見ながらレイアウトを色分け。

https://github.com/herohoro/Blog_learn/pull/6

ここで気づいてきたのは、

_app.tsxがすごくいい仕事をしているっていうこと。

全ページを丸っと覆っている感じ。

ページごとに記述しなくてもheaderとfooterを表示してくれて便利(*^^*)

headerとfooterを本家に寄せてみました。

https://github.com/herohoro/Blog_learn/pull/6

今更ながら、

headerにページリンクを置いておくことで

各ページでリンクを追記しなくていいんだなということに

気付かされました。🤦🏻‍♀️

header・footerのみを実装。

見た目は変わりません.....(残念)

<div className={styles.header}>
      <h1>
        <Link href="/" passHref>
          <a>blog Title</a>
        </Link>
      </h1>
      <ul>
        <li>
          <Link href="/" passHref>
            <a>Home</a>
          </Link>
        </li>
        <li>
          <Link href="/blog" passHref>
            <a>Blog</a>
          </Link>
        </li>
        <li>
          <Link href="/about" passHref>
            <a>About</a>
          </Link>
        </li>
      </ul>
    </div>

この部分をcomponentにしたことで

<header /> って追記すればどこでも使えちゃう。

シールみたい(´・ω・`)

component化された要素のCSSはお抱えの**.module.css を作っておくって部分はいつ見ても素敵。

styles.~~ で装飾していく

stylesの出どころはcomponentによって

切り替わっているの！！！！！！(*´∀｀*)(*´∀｀*)

import styles from "../styles/header.module.css";
const Header = () => {
  return (
    <div className={styles.header}> 👉このstylesは header.moduleの中になる
      <h1>
        <Link href="/" passHref>
          <a>blog Title</a>
        </Link>

import styles from "../styles/footer.module.css";
const Footer = () => (
  <footer className={styles.footer}>👉このstylesは footer.moduleの中になる
    <span>Practiced by </span>
    <Link href="https://github.com/otoyo/easy-notion-blog">
      <a>easy-notion-blog</a>
    </Link>

https://github.com/herohoro/Blog_learn/pull/8

ここまで実装してみて感じたのは、

「こういうもの！」っていうのが

「こうなるからこうしてるの！」っていう

メッセージが伝わってきて

楽しかったってこと。

意味が分かるってやっぱ楽しい。

こんな質素な実装でもReactやNext.jsの復習になって有意義でした(*^^*)

ブログにするにはNotionからデータを連れてきたり、

そのデータを使いやすい状態に調整したり、

それに絡めてReactの関数が登場したりと

奥が深すぎるeasy-notion-blog。

https://github.com/herohoro/Blog_learn/wiki

DBからデータを持ってくる.....

• libディレクトリ内のデータ
  • カスタマイズしてるっぽい。。。(すごーー)
  • そこからgetStaticPropsとしてpropsを収集してる.....

• componentを一部変更するprops
  • Notionからのデータをlibで調整した後にpropsを当ててる.....
• [date].tsxあたりから本領発揮してるけど、難易度ヤバい。
  • useEffect(React)
  • useRouter(Nextjs)
  • slug.tsxから調査した方が良さそう。

少しずつ調べながらスイッチ入った時に進めていこうかなと思っています(*^^*)