初心者向け React/Next.js ハンズオン勉強会【③ / 全3回】

2024/12/29(日)16:00 〜 18:00 開催
ブックマーク

イベント内容

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

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

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

今回のお題

ロゴ

作成するアプリ
ショーケースアプリ(GitHub リポジトリのまとめサイト)

レベル:中級

概要
このプロジェクトでは、GitHub リポジトリのショーケースアプリを構築します。

個人のポートフォリオから、特定の技術に基づいたまとめサイトまで、
多岐にわたって、組み込まれることが多い、一般的なショーケースです!

GitHub API を使用して、リポジトリのデータを取得し、一覧と詳細を表示します。

全3回のシリーズについて

毎週開催している、2時間のハンズオン勉強会では、
1つの技術トピックにフォーカスして、簡単なミニアプリを構築しています。

今シリーズでは、2時間では作りきれない、より実践的なアプリを3週(2時間×3回)で、構築します
一般に公開し、実運用していくアプリのクローンです!

日程は下記を予定しています:
(2,3回目から参加される方は、最初にその時点までのソースコードをクローンする形で進めます!)

  • 第1回:12/15(日) 16時〜18時
  • 第2回:12/22(日) 16時〜18時
  • 第3回:12/29(日) 16時〜18時

React 開発の基本を、実践的に振り返りたい方におすすめです!

学習する内容

  • Next.js v15/ App Router の使用
  • TypeScriptによる型チェック
  • shadcn/ui によるデザインの導入
  • GitHub API の使用
  • md ファイルの取り扱い
  • supabase を使用したデータベース連携
  • Cloudflare Pages へのデプロイ

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

こんな方におすすめ!

  • React 開発に慣れてきた方
  • React 開発の基本を、全体的に振り返りたい方
  • React/ Next.js アプリの開発・公開の流れを知りたい方
  • Reactエンジニアとしての転職/就職を目指している方
  • Reactを使ったプロジェクトにチャレンジしてみたい方

参加要件

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

開催概要

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

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

➡️参加費
各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)へ

新規会員登録

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



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

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

関連するイベント