강의

멘토링

로드맵

NEW
Programming

/

Web Development

React start with Next.js

ReactはNext.jsフレームワークから始めましょう! 実務で開発に必要な必須的な例題だけを厳選して開発してみましょう。 Todo例題はとても重要なので2回開発する必要があります。一度はコンポーネント中心で、次にはブラウザの経路に合わせて処理されるルーティング中心で! ログインはzustandを利用してください!本当に少ない量のコードでグローバル状態を処理できます。

  • zk202308a5410
예제중심
react19
next.js15
신입프론트엔드
웹개발
JavaScript
React
Next.js
Ajax
Web Application

こんなことが学べます

  • コンポーネントとコンポーネントを構成する方法

  • コンポーネントの状態(state)と属性(props)

  • APIサーバーと連携するReactアプリケーション

  • Next.jsを利用したルーティング処理

Reactを今すぐフレームワークで始めましょう!

Reactはライブラリからフレームワークを使用する段階に移行しています。


最初からNext.jsを学んでおきましょう!

  • Next.jsは、ブラウザで動作するクライアントコンポーネントとサーバーで動作するサーバーコンポーネントの両方をサポートしています。

  • 初めて学習される方は、クライアントコンポーネントを優先的に学習し、その後にサーバーコンポーネントを学習することをお勧めします。


例題を通して学びましょう!

  • 「百聞は一見に如かず」であり、「百見は一打に如かず」です。

  • 簡単な例題を様々な方法で変形するだけでも、多くの勉強になります。

  • 知識ではなくノウハウを例題を通して学習する必要があります。


Easygoing React 簡単に始めましょう!

  • 最初はJavaScriptから始めても大丈夫です。

  • 最初はデザインなしで始めても大丈夫です。

  • 最初は完成された構造から始めていただいても構いません。

学習内容

  • コンポーネントとは何かを学びます。

  • コンポーネントのプロパティ/状態などについて学習します。

  • 外部サービスと連携する機能を作ってみます。

  • 状態管理はZustandを使うのが最近のトレンド

セクション (1) 開発環境

Next.jsを利用する開発環境設定と実行

Next.jsを使用すると、プロジェクトの基本設定がすべて完了した状態で開発が可能になります。

セクション (2) コンポーネント!コンポーネント!コンポーネント!

コンポーネントで希望する機能を作成してみます。

コンポーネントをどのように分割すべきか?

コンポーネント間の通信はどのように行うべきでしょうか?

実装に必要な基礎的なJavaScript文法も一緒に学習しましょう。

最初のTodoサンプルにAIを利用してデザインを適用します。

セクション (3) コンテナとプレゼンテーション

複数のコンポーネントが通信しながら結果を作成する必要がある場合は?

  • コンポーネントの状態

  • コンポーネントの属性

  • JavaScriptの配列とfilter

  • 分割代入

  • スプレッド演算子

セクション (4) ルーティング処理されるTodo

より現実的な例を作るには、ブラウザのアドレスバーに合った画面を作る「ルーティング(Routing)」が必要です。


  • Next.jsはルーティングを基本的に提供しています。

  • Next.jsはレイアウトも基本で提供しています。

  • Fetch APIを使用する習慣を身につけましょう。

  • だけを利用しなければならない理由を把握しておきましょう。


セクション (5) Zustandを活用してみましょう。

Zustandは現場で最も人気のあるグローバル状態管理ライブラリです。数行のコードだけでグローバル状態を管理することができます。

  • ローカルストレージに結果を保管することもできます。

  • 他のライブラリよりも使用方法が簡単です。

React初心者のための講義です。

Reactを学びたい方のための入門用講義です。

  • JavaScriptの変数を宣言できる必要があります。

  • 制御文と繰り返し文について知っておく必要があります。

  • 関数と配列について知っておく必要があります。

  • ブラウザでHTMLとJSを利用してイベント処理をしたことがある必要があります。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Reactを初めてやってみたい人

  • Next.jsを初めて始める人

  • Reactの概念を素早く学習したい人

前提知識、
必要でしょうか?

  • JavaScript基礎知識(変数、制御文、配列、関数)

こんにちは
です。

2,001

受講生

130

受講レビュー

263

回答

4.8

講座評価

5

講座

구멍가게코딩단은 2015년부터 개발과 관련된 직종의 사람들의 모임을 위해 만들어진 커뮤니티입니다.

강의의 진행은 현재 구멍가게 코딩단을 운영하고 있는 쿠키 담당자가 진행하고 있습니다.

2015년 부터 '코드로 배우는 ..' 시리즈를 집필하고 있습니다.

ㄴ네이버 카페

 

カリキュラム

全体

37件 ∙ (8時間 7分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

2件

5.0

2件の受講レビュー

  • 차문규님의 프로필 이미지
    차문규

    受講レビュー 2

    平均評価 5.0

    5

    32% 受講後に作成

    • 개탱이피스님의 프로필 이미지
      개탱이피스

      受講レビュー 24

      平均評価 5.0

      5

      32% 受講後に作成

      期間限定セール

      ¥9,900

      50%

      ¥2,375

      zk202308a5410の他の講座

      知識共有者の他の講座を見てみましょう!

      似ている講座

      同じ分野の他の講座を見てみましょう!