一口サイズで食べるReact(React.js):基礎から実践まで
winterlood
基礎概念からユニークなプロジェクトまで一緒に取り組みながら、JavaScriptとReactをこの講座で一気にマスターしましょう。 学習は短く、応用は長く。18時間分のAll-in-one講座!
初級
JavaScript, React, Node.js
Zustand、TanStack Query、Tailwind CSSで、あなたのReactアプリをアップグレードしましょう!複雑なプロジェクトにも挑戦できるよう、さまざまなツールの基本概念と使い方をご案内します。
受講生 354名
難易度 初級
受講期間 無制限
学習した受講者のレビュー
5.0
ataraxia808
いい感じ……。別途のフロントエンドなしで、Reactでトイプロジェクト作りも余裕で可能。
5.0
현우권
現在、私が学びたいと思っている内容の核心ばかりが詰まっていてとても嬉しいですが、 内容まで理解しやすく説明してくださるので、より一層助けになっています。 いつも素晴らしい講義をありがとうございます^^!
5.0
ggomsoo
今回の講義を通じて、多くのことを得られた気がします。 - tailwindcss v3で止まっていた私に、v4で変わった部分を - すでに使用経験があるzustand、@tanstack/react-queryをより効率的に使用する方法を - 関心はあったものの、使いこなすのが難しそうだったshadcn/ui - プロジェクト内のファイルのディレクトリ構造 - 触り程度ですが、フロントエンドしかできない状況で気になっていたsupabaseの使い方(会員登録など) 講義を最初に撮影された時点と私が受講した時点が異なっていたため、講義に沿ってライブラリをインストールしたり適用したりする際に一部異なる部分があり、自分で調べたりしながら進めていきました。その過程で楽しさを感じ、完走することができました。素晴らしい講義をありがとうございました😊 学んだことを土台に、サイドプロジェクトを進めたり、以前のプロジェクトをブラッシュアップしたりしながら、自分のプロジェクトにしっかり落とし込んでいきたいと思います。
より複雑なReact.jsプロジェクトに挑戦できる自信
Zustandを利用した効率的なグローバル状態管理方法
Tanstack Queryを利用した効率的なサーバー状態管理方法(キャッシュ利用)
Tailwind CSSとShadcn/uiを使った、速くて手軽なスタイリング方法
本講義は"一口サイズに切って食べる実践プロジェクト -SNS編"講義の前半部分と同じ内容の講義です。該当講義をすでに受講された方は内容が重複する場合がありますので、あらかじめご了承ください。
複雑な機能をうまく扱うためには、私たちのツールも併せてアップグレードする必要があります。
本講義では、以下に挙げるツールの基本概念と使い方を、誰よりも楽しく学んでいきます。
Tailwind CSS
CSSのスタイリングをより便利にサポートするツール
スタイリングのための別途CSSファイルは不要です
Shadcn/ui
Tailwind CSSベースのデザインライブラリ
高品質なコンポーネントを提供(例:Input、Button、Dialogなど)
Zustand
小さく軽量なグローバル状態管理ライブラリ
従来のReduxに取って代わりつつある新興の有力候補
TanStack Query
サーバー状態管理ライブラリ
非同期データフェッチのローディングやエラー処理を支援します
百聞は一見に如かず、百回聞くよりも一度見るほうが勝るという意味です。
複雑な概念も簡単に整理できるよう、直感的なアニメーション視覚資料とともにお届けします。
講義の要点をわかりやすくまとめた、受講生限定のハンドブックをご用意しています。
ハンドブックのリンクとパスワードは、講義をご購入の際にすぐにご確認いただけます。
講義のハンドブックをウェブページではなくPDFでご覧になりたい方のために、
合計2種類のテーマのPDFまでご用意しました。
ライトテーマ
ダークテーマ
実践プロジェクトまで経験してみたい受講生の皆さまのために
本講義の内容を含め、実践プロジェクトまで進めるひとくち実践プロジェクト SNSの割引クーポンをプレゼントします。
📣 クーポンの割引額は本講義の価格と同額です(講義購入時にクーポンをご確認いただけます)
本講義はReact.jsとTypeScriptの基礎知識がある方を対象に制作されています。
もし上記の技術に慣れていない場合は、以下の前提講座を先に受講することをおすすめします。
同じ料理でも見た目が良いほうがよりおいしく感じられるように
同じ概念の説明でも、より直感的で魅力的な視覚資料のほうが理解しやすいと考えています。
そのため、アニメーションを含む直感的な視覚資料を作るために、たゆまぬ努力をしました。
新しい用語や概念が登場した際には、簡単に説明して済ませたり、すでにご存じだろうと決めつけたりしませんでした。講義を受講しながら、別途Google検索をしていただく必要がないよう、できる限り努めました。
受講生の皆さんの興味を維持するため、講義中に新しい内容が登場する際は、常に前の内容との関連性があるか、突然流れが途切れたように感じられないかを考えながら講義を作成しました。
長時間私の声をお聞きいただくことになるため、良い発声と滑舌を心がけています。
そのため、2倍速で再生してもすべて聞き取れるように講義を制作しました。
一度聞いてみてください!2倍速再生リンク
受講生専用コミュニティに集まり、お互いに知識や情報を共有しながら成長していきます。
オープンチャットルーム:授業資料で参加リンクを確認してください
何事もわかりやすく楽しく説明する方法があると信じる
フロントエンド開発者 & 教育者
📚 書籍
📹 講義
一口サイズでかじる実践プロジェクト - SNS編
一口サイズに切って食べるNext.js
一口サイズに切って食べるTypeScript
一口サイズで学ぶReact
学習対象は
誰でしょう?
一口シリーズの受講生の皆さん(React.js + TypeScript受講修了者)
React.jsとTypeScriptに関する知識をすでにお持ちの方々
チュートリアルレベルから一歩進んで、実践的なプロジェクトに挑戦してみたい方々
質問への回答が月曜から金曜まで毎日最低1回以上行われる講義をお探しの方々
知識共有者が直接運営する受講生コミュニティが活発な講座をお探しの方々
前提知識、
必要でしょうか?
React.js基礎(「ひとくちReact」講義受講者レベル)
TypeScript基礎(「一口TypeScript」講義の受講者レベル)
インフラン認証
キャリア認証
44,967
受講生
3,485
受講レビュー
1,787
回答
4.9
講座評価
34
講座
何でもわかりやすく説明する方法はある!
YouTube:https://link.onebitefe.com/r/8n6pxm
📚 書籍
🏆 アワード
2025年インフラン年末アワード ベストセラー受賞
2024年インフラン年末アワード 受講生PICK受賞
2023 인프런年末アワード 受講生PICK受賞
📹講義
一口サイズで切って食べるバイブコーディング
一口サイズでつまみ食いするReact.js実践プロジェクト - SNS編
ひと口サイズでかじって学ぶ Next.js
一口サイズに切って食べるTypeScript
一口サイズでかじるReact
全体
45件 ∙ (8時間 51分)
講座資料:
全体
15件
5.0
15件の受講レビュー
受講レビュー 2
∙
平均評価 5.0
受講レビュー 4
∙
平均評価 5.0
受講レビュー 5
∙
平均評価 5.0
修正済み
5
今回の講義を通じて、多くのことを得られた気がします。 - tailwindcss v3で止まっていた私に、v4で変わった部分を - すでに使用経験があるzustand、@tanstack/react-queryをより効率的に使用する方法を - 関心はあったものの、使いこなすのが難しそうだったshadcn/ui - プロジェクト内のファイルのディレクトリ構造 - 触り程度ですが、フロントエンドしかできない状況で気になっていたsupabaseの使い方(会員登録など) 講義を最初に撮影された時点と私が受講した時点が異なっていたため、講義に沿ってライブラリをインストールしたり適用したりする際に一部異なる部分があり、自分で調べたりしながら進めていきました。その過程で楽しさを感じ、完走することができました。素晴らしい講義をありがとうございました😊 学んだことを土台に、サイドプロジェクトを進めたり、以前のプロジェクトをブラッシュアップしたりしながら、自分のプロジェクトにしっかり落とし込んでいきたいと思います。
受講レビュー 1
∙
平均評価 5.0
受講レビュー 6
∙
平均評価 5.0
知識共有者の他の講座はこちら
同じ分野の他の講座を見てみましょう!