Archive– category –

今回は、Material UIを使って内容を展開できるCardを作成してみようと思います。Cardに表示したい内容が多い場合は、開閉式のCardを作成しておくと便利ですので、ぜひ試してみてください！ まだ、React TypeScriptの開発環境を未構築の方は、「ReactとType...

今回は、React TypeScriptのアプリケーションでMaterial UIのChipを使う方法を紹介していこうと思います。Chipは情報の入力、選択、コンテンツのフィルタリング、アクションのトリガーなど様々な使い道があり、コンパクトな要素なのでぜひ使ってみてくださ...

今回は、React TypeScriptのアプリにRechartsで円グラフを表示してみようと思います！Rechartを試してみたいと思っていた方は参考にしてみてください！ まだ、React TypeScriptの開発環境を未構築の方は、「ReactとTypeScriptとRedux Toolkitの開発環境構...

今回は、Material UIのCardに、AvatarやListを表示してみます！Cardを利用するにあたり、CardContentやCardHeadr、CardActionsなどの使い方も解説します。 CardはPaperを拡張したコンポーネントになっており、文字だけでなく画像なども表示できます。Avata...

今回は、Material UIのGridとCardを使ってレイアウトを調整していきます！Material UIには、レスポンシブレイアウトグリッドを実装するためのコンポーネントであるGridがあるのでこれをアプリに導入する方法を知ってもらえると良いかなと思います。 まだ、...

今回は、Reactアプリケーションにreact-router-domを導入して画面遷移を実装していきます。Reactのアプリケーションは、SPA（シングルページアプリケーション）と言って画面遷移の仕組みが特殊なので、その辺も理解しておくと良いと思います。 今回は「Mat...

今回は、ReactアプリケーションにMaterial UIを導入してヘッダーを実装していきます！Material UIを使ってみたいと思っていた方は、ぜひ参考にしてみてください！ 今回は、ReactとTypeScriptを前提としています。もし環境構築がまだの方は、「ReactとTypeS...

今回は、Reactアプリケーションにnode-sassを導入していきます！まだ、CSSを使ってスタイルを定義している方は、ぜひ参考にしてみてください！ まだReactアプリケーションの構築ができていない方は、「ReactとTypeScriptとRedux Toolkitの開発環境構築をし...

今回は、ReactとTypeScriptとRedux Toolkitのフォルダ構成を変更します。フォルダ構成の良し悪しで、開発効率が全然変わってきますので参考にしてみてください！ もし、まだReactとTypeScriptとRedux Toolkitの環境構築ができていない方は、「ReactとTypeS...

今回は、VSCodeの拡張機能のES7 React/Redux/GraphQL/React-Native snippetsを導入していこうといます！Reactからは少し脱線してしまいますが、便利な機能なのでぜひ導入してみてください。 まだ、Reactの開発環境の構築が終わっていない方は、「ReactとTy...