メインカテゴリーを選択しなおす
![[Next.js] 学習記録アプリ Firebase認証・DB実装 Zennで書籍化してみました](https://img.blogmura.com/sites/1282896/post-images/70343477.webp/crop/435x435)
[Next.js] 学習記録アプリ Firebase認証・DB実装 Zennで書籍化してみました
以前、お送りしてきた、以下の、Next.jsとFirebaseの認証・DBを利用した、学習記録アプリのチュート…
![[React] 学習記録アプリ with Firebase、Zennで書籍化してみました](https://img.blogmura.com/sites/1282896/post-images/70082622.webp/crop/435x435)
[React] 学習記録アプリ with Firebase、Zennで書籍化してみました
これまで、ブログ記事としてお届けしていた、ReactとFirebaseによる学習記録アプリのチュートリアルです…
Next.jsでPropsを分割代入で記述する方法を解説！分割代入の基本からしっかり解説しているので仕組みを理解できます。
HTMLとJavascriptの組み合わせではなく、Reactを使うメリットは何ですか。
HTMLとJavaScriptの組み合わせでは、JavaScriptを使って動的なウェブページを作成することが可能ですが、Reactを使用することにはいくつかのメリットがあります。 ### 1. コンポーネントベースの開発 Reactはコンポーネントベースのライブラリであり、UIを小さな再利用可能なコンポーネントに分割することができます。これにより、コードの再利用性が高まり、メンテナンスが容易になります。 ### 2. 仮想DOM（Virtual DOM…
Next.js 入門｜ Props でコンポーネントに値を渡す
Next.js(React)のPropsを使ったコンポーネント間のデータ受け渡しを解説！初心者でもわかりやすく、具体例とデバッグ方法も紹介します。
CodeSandboxや、StackBlitz など優れたWebブラウザ上でWebアプリケーションを開発できる…
Next.js入門｜App Routerで簡単ページ追加＆遷移を解説！
Next.jsのApp Routerを使って、ページの追加や遷移を初心者でも簡単に学べる方法を解説します。新しいルーティング機能を理解しよう！
Next.js入門｜プロジェクトの新規作成からMUIの導入まで
初心者向けNext.js 15入門！MUIを導入してCSSの知識がなくてもモダンなUIを簡単に構築。手順を画像付きで丁寧に解説します。
![[React] チュートリアル 学習記録アプリ Firebaseで認証・DB実装してみた （後編）](https://img.blogmura.com/sites/1282896/post-images/67842423.webp/crop/435x435)
[React] チュートリアル 学習記録アプリ Firebaseで認証・DB実装してみた （後編）
Reactのチュートリアル、学習記録アプリ Firebase認証・DB実装の後編となります。前編では、Reac…
[React] チュートリアル 学習記録アプリ Firebaseで認証・DB実装してみた （前編）
これまで、Supabaseの活用を中心に、色々と試行してきた、学習記録アプリのチュートリアルですが、今回は、ホ…
![[React] チュートリアル 名刺アプリ Supabase連携 （拡張編）](https://img.blogmura.com/sites/1282896/post-images/66499457.webp/crop/435x435)
[React] チュートリアル 名刺アプリ Supabase連携 （拡張編）
Reactのチュートリアル記事です。Supabase連携や、カスタムフック、useContextなど
[React] チュートリアル 名刺アプリ Supabase連携 （後編）
Reactのチュートリアル記事です。名刺アプリ Supabase連携 （後編）です。本記事は、以下の記事をモチ…
[React] チュートリアル 名刺アプリ Supabase連携 （前編）
Reactのチュートリアル記事です。今回の記事も、以下の記事をモチーフに作成した名刺アプリのチュートリアルです…
[React] チュートリアル 学習記録アプリ 3 ユーザー認証実装 （後編）
Reactチュートリアル、学習記録アプリのユーザー認証実装、後編です。Supabaseの認証機能を利用したユー…
[React] チュートリアル 学習記録アプリ 3 ユーザー認証実装 （前編）
チュートリアル 学習記録アプリ、3回目です。前回まででSupabaseを活用したDBデータの読み込み・編集・削…
![[React]チュートリアル 学習記録アプリ 2 Supabase編](https://img.blogmura.com/sites/1282896/post-images/65912939.webp/crop/435x435)
[React]チュートリアル 学習記録アプリ 2 Supabase編
前回に続き、学習記録アプリのチュートリアルの2回目です。今回は、学習記録データの格納に、BaaS（Backen…
少し前からReactの勉強をしてます。本日ご紹介するのは、よくある、Todoリストの作成です。こちらの記事を参…
[React]Todoリストの作成 – 初学者向け、その2です。前回は基本的に元の参考記事に準じた内容でしたが…
今回の記事は、以下の記事をモチーフに作成した学習記録アプリのチュートリアルです。 こちらの3-3. 課題3をベ…
【Hello World】TypeScript + React Native for Web + Webpack
今度はTypeScript + React Native for Web + webpack + github pages templateを作ってみました。
ReactのuseEffectでデータ渡し時の1回だけコンポーネント動作させる
ReactのuseEffectフックは、コンポーネントがマウントされた後や更新された後に特定の副作用を実行するために使用されます。本記事では、useEffectを使ってデータが渡された時に1回だけ動作するコンポーネントの作成方法を紹介します
6月8日にスタートした、大人のコソ勉が180時間を越えました。 大人のコソ勉についてはこちらから↓ ふと思い立って始めましたが、「思っていたよりも難しく」「思うようにコードが動かず」「自分がバカのように感じる」なかなかにフラストレーションが
Reactで確認ダイアログ（confirm）を表示させる3つの方法
ある画面でボタンを押した時や、現在のページから離脱する場合に「本当によろしいですか？」みたいなアラート（警告）表示をよく見かけることがあると思います。今回は、そんな確認ダイアログをReactで表示させる方法をご紹介します！ Reactで確認
React: 子コンポーネント内部の関数を、親コンポーネントから操作する（useImperativeHandle）
React、useImperativeHandleの使い方
React.js : create-react-appでアプリを作成することが出来ない場合の解決法
本記事では、React.jsにて、create-react-appコマンドを用いて、新規のアプリを作成しようとした際に発生したエラーの解消法について、何故エラーが発生したのかも含めてご紹介させて頂いております。 特に、少し古い記事などを参考に特定のバージョンでReactの環境を作った方が遭遇しやすいエラーになります。
【React hooks】useState・propsの基礎を習得 – カウンターアプリ
本記事内では、React hooksで提供される関数の一つである「useState」とpropsの基礎的な使い方をカウンターアプリを作成しながら解説していきます。 加えて、公式ページの内容にも少し触れていきたいと思います […]
【React hooks】useReducerの基礎を習得 – カウンターアプリ
※ 本記事は、以下の記事の続きになります。 【React hooks】useState・propsの基礎を習得(カウンターアプリ作成) 【React hooks】useState・propsの基礎を習得 - カウンターア […]
【React hooks】useContextの基礎を習得 – カウンターアプリ
※ 本記事は、以下の記事の続きになります。 【React hooks】useReducerの基礎を習得 – カウンターアプリ作成 【React hooks】useReducerの基礎を習得 - カウンターアプ […]
React + JavaScript – 開発環境構築方法(Windows & Mac)
JavaScriptのライブラリとして、React.jsが2013年に公開されるようになってから現在まで9年以上が経過しましたが、今や多くの現場で使用されているライブラリとなりました。 しかし、まだ扱える人材がJavaや […]
![[React] Sass(.scss)を導入する方法 (検証用のサンプルコードあり)](https://img.blogmura.com/sites/1192007/post-images/49465063.webp/crop/435x435)
[React] Sass(.scss)を導入する方法 (検証用のサンプルコードあり)
本記事では、Reactの環境へSassを導入する方法についてご紹介してます。 現在のReactのバージョンですと、これまでの方法が非推奨となっているので、これからReactを学んでいかれる方やReactのバージョンを更新するうえで、Sassを適切に使っていきたい方にオススメの内容になっておりますので参考になれば嬉しいです。
![[React] Marerial UI – Material Iconsを導入する方法 + 使い方](https://img.blogmura.com/sites/1192007/post-images/49482083.webp/crop/435x435)
[React] Marerial UI – Material Iconsを導入する方法 + 使い方
Reactの現場でもよく用いられているCSSフレームワークは、BootstrapやBulma…など, UIフレームワークといえば、 Chakra UIやMarerial UIが挙げられます。 今回は、その中で […]
![[React+Tailwind] Carousel を TypeScript に書き直してみた 心を無にして始める React](https://static.blogmura.com/image/no-image-07d9f35fd786d693ec0205a760f8cf63.webp)
[React+Tailwind] Carousel を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Carousel コンポーネントです。 JavaScript ベースの Carousel.js です。 import { forwardRef }...
[React+Tailwind] Flowbite で Carousel を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Carousel コンポーネントをつくる ./src/components 配下に Carousel.js を作ります...
[React+Tailwind] Card を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Card コンポーネントです。 JavaScript ベースの Card.js です。 import { forwardRef } from 'r...
[React+Tailwind] Flowbite で Card を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Card コンポーネントをつくる ./src/components 配下に Card.js を作ります。 import...
[React+Tailwind] ButtonGroup を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Button コンポーネントです。 JavaScript ベースの Button.js です。 import { forwardRef } fro...
[React+Tailwind] Flowbite で ButtonGroup を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 ButtonGroup コンポーネントをつくる ./src/components 配下の Button.js を編集し...
[React+Tailwind] Button を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Button コンポーネントです。 JavaScript ベースの Button.js です。 import { forwardRef } fro...
[React+Tailwind] Flowbite で Button を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Button コンポーネントをつくる ./src/components 配下に Button.js を作ります。 im...
[React+Tailwind] Breadcrumb を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Breadcrumb コンポーネントです。 JavaScript ベースの Breadcrumb.js です。 import { forwardR...
[React+Tailwind] Flowbite で Breadcrumb を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Breadcrumb コンポーネントをつくる ./src/components 配下に Breadcrumb.js を...
[React+Tailwind] Badge を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Badge コンポーネントです。 JavaScript ベースの Badge.js です。 import { forwardRef } from ...
[React+Tailwind] Flowbite で Badge を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Badge コンポーネントをつくる ./src/components 配下に Badge.js を作ります。 impo...
[React+Tailwind] Avatar を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Avatar コンポーネントです。 JavaScript ベースの Avatar.js です。 import { forwardRef } fro...
[React+Tailwind] Flowbite で Avatar を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Avatar コンポーネントをつくる ./src/components 配下に Avatar.js を作ります。 im...
[React+Tailwind] Accordion を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Accordion コンポーネントです。 JavaScript ベースの Accordion.js です。 import { forwardRef...
[React+Tailwind] Alert を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Alert コンポーネントです。 JavaScript ベースの Alert.js です。 import { forwardRef } from ...
[React+Tailwind] Flowbite で Accordion を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Accordion コンポーネントをつくる ./src/components 配下に Accordion.js を作り...
