React

React

create-react-appへのTailwind CSSの設定方法と簡単な拡張方法

とりあえずReactにTailwind CSSを導入したいcyan、greenなどの色の追加方法がわからないCSSフレームワークといえば、BootstrapやMATERIAL-UIなどが有名ですが、誰が作っても同じようなデザインになることか...
React

ReactからGoogleapis の Youtube Data APIを呼び出す方法 ~Search APIを呼び出して動画の検索ページと再生ページを作成する~

React から外部のAPIを呼び出すサンプルを作成してみました。外部APIの題材としてYoutubeのData APIのSearchを利用し、動画の検索ページと再生ページも作成していきます。システム構成今回はAPI部分を中心に説明しますが...
React

javascriptのwindow.matchMediaでreactのカスタムフック(useMediaQuery)を作成してレスポンシブ対応

Webページをレスポンシブ対応する場合に、cssの@media クエリを利用する以外にjavascriptのwindows.matchMedia()を利用する方法があります。javascriptのwindow.matchMedia()の使用...
React

reactのデザインをmaterial-ui + styled components (CSS in JS)を組み合わせて利用する

react のデザインで styled components (CSS in JS)で行う場合、「全てのスタイルを1から作成するのは嫌だ」というときに、material-uiと組み合わせて利用することで省エネでデザインすることができます。 ...
Docker

Reactの開発環境(WSL2+docker)構築から本番環境(DockerHub+kubernetes)へのデプロイ手順まとめ

最近は、開発環境をDockerで構築することが多くなってきたので、Reactアプリの開発環境構築手順をまとめました。また、本番デプロイ用にDockerHubへのPushとkubernetesへのデプロイ用YAMLの作成手順についてもまとめま...