강의

멘토링

커뮤니티

Programming

/

Front-end

React start with Next.js

Reactが初めてなら? Reactの基本概念をしっかりと固めながらも素早く学べる方法を考える必要があります。 Next.jsとJavaScriptで最小限の知識から始めてみてください。 実務での開発に必要な必須的な例題だけを厳選して開発してみましょう。 Todo例題はとても重要なので2回開発する必要があります。一度はコンポーネント中心で、次にはブラウザの経路に合わせて処理されるルーティング中心で! ログインはZustandを利用してください!本当に少ない量のコードでグローバル状態を処理できます。

  • zk202308a5410
react19
next.js15
신입프론트엔드
웹개발
네카라쿠배
JavaScript
React
Web Application
Ajax

受講後に得られること

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

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

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

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

  • Zustandで状態管理する

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

Reactを初めて学ぶなら?

  • コンポーネントのpropsとstateを適切に活用できる必要があります。

  • サーバーとの通信を通じて非同期処理する方法を知る必要があります。

  • ログインのようなアプリケーションのグローバル状態を処理できる必要があります。


最初はJavaScriptから.. フレームワークを利用して最小限の設定で

  • TypeScriptに慣れていない場合は、まずはJavaScriptから始めても大丈夫です。

  • Reactで複数のライブラリと設定が複雑であれば、Next.jsのようなフレームワークから始めてください。

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

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


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

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

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

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

実務で必要な例題を学びましょう!

  • Next.jsは基本的にパスに応じて特定のコンポーネントを表示するルーティング機能を提供しています。

  • Todo データは API サーバーと通信し、JSON データで処理してみてください。

  • React 19で

    タグを処理するuseActionState()を利用してみてください。

  • 独自のカスタムフックを作ることはできますか?

  • グローバル状態管理はZustandを利用して簡単に処理してください


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の概念を素早く学習したい人

  • フロントエンドとバックエンドの構造と役割を知りたい人

  • ZustandをReactに適用したい人

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

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

こんにちは
です。

2,136

受講生

153

受講レビュー

272

回答

4.8

講座評価

5

講座

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

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

 

2000년부터 개발을 시작하였고 벤처 기업, 중소 기업, 대기업 / 프리랜서 등의 개발 경험을 가지고 있습니다.

2010년대 부터는 주로 기업체 강의와 컨설팅을 주요 업무로 하고 있습니다.

ㄴ네이버 카페

 

주요 저서 

코드로 배우는 스프링 웹 프로젝트

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

React Native 인 액션(번역)

 

개발/강의

삼성 SDS 개발팀 근무

SK 고객행복 주식회사 근무

KT / SK / 포스데이터 / 교보 생명 / 신세계 / 아시아나 / 건강보험 관리공단 등등 기업체 강의

カリキュラム

全体

37件 ∙ (8時間 7分)

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

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

受講レビュー

全体

7件

4.9

7件の受講レビュー

  • 123ddd님의 프로필 이미지
    123ddd

    受講レビュー 5

    平均評価 5.0

    5

    32% 受講後に作成

    • c01님의 프로필 이미지
      c01

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      講義を聞いた後、React.jsにある程度自信がつきました。 (), {}, state, set, アロー関数, フックの基本機能...などをなぜ使うのかわかるような気がします。

      • codingbeer님의 프로필 이미지
        codingbeer

        受講レビュー 11

        平均評価 4.2

        修正済み

        5

        100% 受講後に作成

        シンプルな核心概念講義、良いですね。

        • zk202308a5410
          知識共有者

          お久しぶりです。😭😭

      • moomgyucha8486님의 프로필 이미지
        moomgyucha8486

        受講レビュー 2

        平均評価 5.0

        5

        32% 受講後に作成

        • wtkim님의 프로필 이미지
          wtkim

          受講レビュー 27

          平均評価 4.9

          5

          32% 受講後に作成

          ¥2,470

          zk202308a5410の他の講座

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

          似ている講座

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