Reactスターターキットの続きです。前回はOtherページをAboutページに変更し、ルーティング設定も変更しました。今回はこれまで後回しにしてきたCreate React App環境でのfavicon設定もしたく。推奨サイズやスマホ向けの設定方法などをおさらいできました。…
Reactの続きです。前回はstyled-componentsにフックの値を設定し、動的にスタイルを変更しました。ジャンプ率ジェネレーターが完成しました!この時、otherページをaboutページに作り替えたのですが、aboutページについては今後も使いそうなので、Reactスタ…
Reactジャンプ率ジェネレーターの続きです。前回は独自フックで関数を抽出し、全てのツマミが動いくようになりました。今回はこのツマミの値をstyled-componentsに埋め込んで、動的にCSSスタイルを変更させたく。それではいきましょう!
Reactジャンプ率ジェネレーターの続きです。前回はフックでonChangeイベントを設定しました。ようやく一つ目のinput(range)のツマミが動きました。今回は残りの二つも動かします。独自フックで共通した処理を関数として抽出しました。それではいきましょう!
Reactジャンプ率ジェネレーターの続きです。前回はAboutページ作成とinput(type="range")タグの配置を行いました。しかしinputタグに初期値valueを入れたらツマミが動かなくなりました。今回はこのツマミを動かすべく、onChange設定をしたいきたく思います…
Reactジャンプ率ジェネレーターの続きです。前回は環境構築編でした。今回からは具体的な内容に入っていきます。まずotherページをaboutページに変更し、メインページにinputタグ(type = range)を配置しました。それではいきましょう!
Reactの続きです。前回はReact + TypeScript + CSS in JS環境のスターターキットを作りました。今回からこれを元にアプリ作りに入っていきます。最初に作りたいのは文字ジャンプ率ジェネレーター!今回は初回ということで、既存のGitHubリポジトリをクローン…
Reactの続きです。前回まで、メタ言語(EJS + Sass(SCSS) + TypeScript)スターターキットの内容をReact + TypeScript + CSS in JS環境で再現してきました。今回はこれをリファクタリングして、今後ReactでWebアプリを作るためのスターターキットを作りたい…
Reactの続きです。以前作成したReact + CSS in JS + TypeScript環境にReact Routerを使ってルーティング設定をして複数ページを遷移できるSPAにします。helmetを使ってコンテンツだけでなくheadタグも動的に変更。さらに下層ページに直接アクセスすると404に…
Reactの続きです。前回はフック(React Hooks)とjson-serverをFetch APIで連携しました。今回はフックとRealtime DatabaseをFetch APIで連携します。Create React App環境にFirebaseをインストールしてクラウド上のRealtime Databaseのデータを読み込めるよう…