【React入門】初心者向けハンズオン勉強会 (with TanStack Query)

2025/01/05(日)16:00 〜 18:00 開催
ブックマーク

イベント内容

React 初心者向けの、ハンズオン形式のオンライン勉強会です👋

事前に作成した資料があるので、
それを参照しながら、ハンズオン形式で、Reactのミニアプリを構築します!

実際に手を動かして、その場で質問・相談しながら、楽しくReactを学んでいきましょうー!

今回のお題

ロゴ

作成するアプリ
書籍管理アプリ(with TanStack Query

レベル:初級〜中級

概要
このプロジェクトでは、Trello風の書籍管理アプリを構築します。

本を「欲しい本」「購入した本」「読み終えた本」の3つのステータスで管理し、ドラッグ&ドロップで本の状態を更新できます。

学習する内容

今回のメインは、TanStack Query(React Query)を使用したサーバーの状態管理です。
APIとの通信、データのキャッシュ管理、楽観的更新などの実装を確認してください。

  • viteを用いたReact環境構築
  • TypeScriptによる型チェック
  • TanStack Query を用いたサーバーの状態管理
  • JSON Server を用いたモックAPI
  • Drag and Drop API の活用

この勉強会を通して、Reactを使った成果物を1つ構築することを目指します

こんな初心者におすすめ!

  • Reactの基本的な扱いに慣れてきた方
  • TanStack Query について学びたい方
  • React/ Next.js アプリのデータフェッチ・キャッシュを知りたい方
  • Reactエンジニアとしての転職/就職を目指している方
  • Reactを使った簡単なプロジェクトにチャレンジしてみたい方

要件

  • Node.js 環境が構築されたPCが必要です
  • Git/ GitHub環境(アカウント)の用意
  • HTML/CSS/JavaScriptの基礎知識が必要です
  • Reactの基礎(Progateレベルの内容)は理解している前提の内容となっております

開催概要

➡️場所:Gather(オンライン開催)
音声のみでOKです!

申し込みが完了すると「参加者への情報」という場所に、GatherのURLが表示されます。
(Gatherは、スマートフォン・PCどちらからでも、登録なしで参加することが可能です。)

Gatherは、まだそこまでメジャーなサービスではないので、
会の始めに、Gatherの操作などについて不明な点があればご説明いたします!

➡️参加費
1000円 (当日 PayPay or stripeによるカード決済にて都合の良い方法で受け取ります。)

(初回のみ)この勉強会のレビューに、ご回答いただける場合は、参加費 500円(50% オフ)です!

注意事項

下記を、ご確認ください:

  • 登壇者の発表を視聴する形式の、セミナーではありませんのでご注意ください
  • 実際に手を動かして、一緒に作業をするハンズオン形式のワークショップです。
  • 無断欠席・遅刻は、ご遠慮ください。
  • 勧誘、迷惑行為、ハラスメント、マウンティング行為をはじめ、このイベントの趣旨にそぐわないと主催が判断した場合はご参加をお断りする場合がございます。

当日のスケジュールの流れ

ハンズオン中は、資料を見ながら一緒に作業を進めていければと思います!
(音声・チャットで、リアルタイムでリアクションや質問ができます)

時間 内容
16:00〜16:10 最初の挨拶
16:10〜16:20 仕様確認&開発準備
16:20〜17:50 ハンズオン開始
17:50〜 終わりの挨拶など

その他

  • 実際は、時間内で、進めるところまでタスクを進める形になります。
  • 時間内に完成しない場合でも、大まかな解説と手順を記載した資料を、配布いたします!
  • なので、勉強会中は、ゆっくり・たくさん質問して頂ければと思います!!

ハンズオンの最中は、たくさんリアクションをして、盛り上げていただけるとありがたいです
(進めるスピードなどの、進行に関するご意見も大歓迎です!)

参考キーワード

webアプリ開発, HTML, CSS, JavaScript,TypeScript, React.js, Node.js, Next.js, Github, コミュニティ, もくもく会, ハンズオンワークショップ

注意事項

※ こちらのイベント情報は、外部サイトから取得した情報を掲載しています。
※ 掲載タイミングや更新頻度によっては、情報提供元ページの内容と差異が発生しますので予めご了承ください。
※ 最新情報の確認や参加申込手続き、イベントに関するお問い合わせ等は情報提供元ページにてお願いします。
情報提供元ページ(connpass)へ

新規会員登録

このイベントに申し込むには会員登録が必要です。
アカウント登録済みの方はログインしてください。



※ ソーシャルアカウントで登録するとログインが簡単に行えます。

※ 連携したソーシャルアカウントは、会員登録完了後にいつでも変更できます。

関連するイベント