ReactのTodoリストに日付を表示させる

f:id:simpledancer:20210815172832p:plain

UdemyのじゃけえさんのモダンJavaSciptの基礎から始める挫折しないためのReact入門チュートリアルを一通り作りました。

まだまだReactが全然わからないんですけど、ちょっとでも何か追加してみようとして以下のことを行いました。

const today = new Date()
const year = today.getFullYear()
const month = today.getMonth() + 1
const date = today.getDate()

まず、こうして日付を取得してきます。はっきり言ってあまり分かってないんですReactここで取得したものをappの中で表示させます。

returnの（内に記述していきます。

<div className="date">
{year}年{month}月{date}日
</div>

これは簡単。　日付に関してはこれはもう書き方がこんな感じなんだなと記憶しておけばいいかなと思います。

こちらについてはReact-shareと言うライブラリを取得します。

import {

TwitterShareButton,
TwitterIcon,
} from 'react-share'

ひとまずtwitterアイコンのみです。海外の主要なSNSはコードがgithubに載ってます

<TwitterShareButton
url={['url']}
title={['タイトル']}
>
<TwitterIcon size={32} round />
</TwitterShareButton>

そうするとtwitterアイコンからシェアが可能に。タイトル部分は日本語にするとうまく表示されないので、英語で！

その他フォントはgoogleフォントから可愛いものをチョイス。

色味や大きさもちょっと変えてみました。サーバーに普通にアップしようとしたら、時間がかかりすぎてなかなかできなかったのでherokuでデプロイしてみました。

データはDBが無いので保持されません。リロードすれば消えます。

一応udemyのtutorialだからgithubの公開は控えます！

vanillaJSとの違いを比べながら学べるのでオススメのUdemyです。

大幅に機能追加して、元とわからないくらいになったらgithub公開してもいいのかなと思いますが。

8月18日までUdemyが1270円〜のsale中です。

最近はWeb制作の仕事が落ち着いてきたのでまたいろいろ勉強しようかなと思ってます。

アラフォーからのプログラミングとデザイン