Reactを学びはじめて1ヶ月半.....
やっとやっと本家リポジトリのコードの意味を理解できるようになってきました。
勉強する前は
「なんでreturnの前に関数入れてるんだろ?」
って部分が意外とモヤッとしておりました。
講座で解説を聞きながら手を動かして
作って消してを繰り返していくうちに
徐々に分かってきたのが....
JavaScriptなの?
Reactなの?
Next.jsなの?
TypeScriptなの?
って部分。
いきなりNext.js learnをやった数ヶ月前がお恥ずかしい限りですm(_ _)m
今回はNext.js learnの復習を兼ねながら、
じわりじわりとeasy-notion-blogに寄せていく演習をしてみました。
完全再現までにはまだまだ課題は多いものの、
まずはDBからデータを取ってくる前の
初々しい状態の実装工程を
紹介していきます\(^o^)/
▼ 出来上がったのはこれ
code sandboxで工程管理をしていったので、
PR内のコメントに追記したリンクへ飛ぶと画面遷移もいじれます🎶
No. | branchName | description | リンク |
---|---|---|---|
01 | 035iff | pageNation | https://github.com/herohoro/Blog_learn/pull/3 |
02 | p3b04x | easy-notion仕様にディレクトリ分け_ここでは途中/次のPRで完成してる | https://github.com/herohoro/Blog_learn/pull/2 |
03 | nods6y | typescript化 | https://github.com/herohoro/Blog_learn/pull/4 |
04 | xkt4in | contentを色分け_CSSで再現 | https://github.com/herohoro/Blog_learn/pull/6 |
05 | e9r66s | 全レイアウトの色分け+easy-notion仕様の見た目 | https://github.com/herohoro/Blog_learn/pull/7 |
06 | e8mfr5 | component化 footerとheader | https://github.com/herohoro/Blog_learn/pull/8 |
Next.jsのテンプレをインストール
すごくすごく何もない状態のから始めることにしました(´・ω・`)
▼ 画面遷移についてはこのページ
この情報を元に実装。
https://github.com/herohoro/Blog_learn/pull/3
▼ このページを見ながら修正。
tsxに変換するために整えることが意外とあり.....
tsconfig.json
next-env.d.ts
@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からデータを持ってくる.....
少しずつ調べながらスイッチ入った時に進めていこうかなと思っています(*^^*)
Twitterでは更新のお知らせを随時行っています
興味ある方はLet'sフォロー★▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね
RSSリーダーにatomのリンクを登録すると通知が行くよ🐌
https://herohoro.com/atom
やってみてね(*´ω`*)(*´ω`*)
フォロー大歓迎\(^o^)/
フォロー大歓迎\(^o^)/