UdemyのじゃけえさんのモダンJavaSciptの基礎から始める挫折しないためのReact入門 
チュートリアルを一通り作りました。
まだまだReactが全然わからないんですけど、ちょっとでも何か追加してみようとして以下のことを行いました。
- 今日の日付を表示させる
- SNSのシェアボタン
- 見た目の変更
日付の表示
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>
これは簡単。 日付に関してはこれはもう書き方がこんな感じなんだなと記憶しておけばいいかなと思います。
SNSシェアボタン設置
こちらについてはReact-shareと言うライブラリを取得します。
- react-shareをinstallする
- jsxファイルのimport文を書く
- 表示させたい部分に表示させたいアイコンのものを入れる。
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制作の仕事が落ち着いてきたのでまたいろいろ勉強しようかなと思ってます。
１週間もついてる（多くのスクールは１回のメンタリングのみ、とか）
