강의

멘토링

커뮤니티

Programming

/

Front-end

React start with Next.js

New to React? You need to think about how to learn React's fundamental concepts solidly yet quickly. Start with Next.js and JavaScript with minimal knowledge. Let's develop by selecting only the essential examples needed for real-world development. The Todo example is so important that you should develop it twice. Once focusing on components, and then focusing on routing that handles browser paths! Use Zustand for login! You can handle global state with a really small amount of code.

(4.9) 9 reviews

114 learners

Level Beginner

Course period Unlimited

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

Reviews from Early Learners

What you will gain after the course

  • Methods for Composing Components

  • Component State and Props

  • React application integrated with API server

  • Routing with Next.js

  • Managing State with Zustand

Start building fast web apps
with React and Next.js!

Quickly master only the essential features needed for real-world work.


New to React and feeling overwhelmed?
Build a solid foundation from the basics with Next.js and JavaScript,
and strengthen your robust development fundamentals through practical, real-world examples.


Getting Started with React
A practical course to quickly learn React essentials with Next.js

JavaScript, React, Next.js 16, App Router, React 19, Zustand
Master components, state management, and routing through essential practical examples.



Based on what you learned in the course, you'll complete
a production-level web application with Todo list and login features.



JSONPlaceholder API integration, global state management using Zustand, Next.js routing practice
Experience the entire frontend development process and improve your skills.

React and Next.js
Curriculum for Beginners

Section 1 - Getting Started with React and Next.js

This course guides React beginners on how to start a project using the Next.js framework. Based on basic JavaScript knowledge and web development fundamentals, you'll learn React's core concepts including Components, Props, and State, and cover essential examples needed for actual development.

Section 2 - In-Depth Component Learning

You will learn in detail how to create and control functional components, utilize loops, and manage data through Props and State. Additionally, you will understand communication methods between components and the Container/Presentation component pattern, and improve your component design skills through practical counter component separation exercises.

Section 3 - Implementing a Single Page Todo Application

Develop a Todo list management application using React's array handling features (spread operator, filter). Implement functionality for registering, deleting, and modifying Todo items, and enhance the screen design to create a user-friendly UI. In this section, you'll experience practical application of component-based development.

Section 4 - Todo Application with External API Integration

Learn the concept of asynchronous communication and how to integrate with external RESTful APIs using the Fetch API. Strengthen your real-time data processing capabilities through implementing dynamic route handling, utilizing Link components, and performing data CRUD operations using POST, PUT, and DELETE methods.

Section 5 - Global State Management with Zustand

Learn how to efficiently manage global data such as login state using Zustand, a lightweight global state management library. Enhance your application's state management capabilities by creating stores, integrating with local storage using the Persist feature, designing component structures without dependencies, and implementing logout functionality.

Are you feeling overwhelmed about where to start with React and Next.js?
This course was created specifically for people like you.


✔️ Beginners who are new to React and Next.js

  • Those who want to solidify React fundamentals that theory alone couldn't cover, together with Next.js

  • For those who want to quickly start a React project with minimal knowledge

  • Those who want to learn core principles such as component structure, Props, and State in an easy and clear way

✔️ Learners who want to gain practical, hands-on web development experience

  • Those who want to focus intensively on learning only the essential examples frequently used in practical work

  • For those who want to implement features needed in real services, such as Todo lists and login functionality

  • Those who want to experience API integration and state management using Zustand

✔️ Those who want to pursue a career as a frontend developer

  • A person who can understand Next.js's routing system and handle dynamic route configuration

  • Learn design principles for writing clean code, including component separation and reusability

  • A person who gains experience in directly designing and implementing attractive UIs using Tailwind CSS


Don't hesitate any longer due to the difficulties of learning React.
Through this course, you can grow into a frontend developer with solid skills in Next.js.

Notes Before Taking the Course


Practice Environment

  • Operating System: Windows, macOS, and Linux are all supported.

  • Required Installation Programs: Node.js (latest LTS version recommended), VS Code or other code editor

  • Recommended Specifications: For a smooth development environment, we recommend SSD storage and at least 8GB of RAM.

Prerequisites and Important Notes

  • Understanding of JavaScript basic syntax (variables, functions, objects, arrays) is required.

  • Basic knowledge of web development will be helpful for learning.

  • You can start even without React framework experience.

  • We will learn based on Next.js version 15 and App Router.

Learning Materials

  • 알겠습니다. 강의 슬라이드 PDF 파일을 번역할 준비가 되었습니다. PDF 파일을 업로드해 주시면 다음과 같이 처리하겠습니다: 1. PDF 내용을 정확하게 한국어에서 영어로 번역 2. 슬라이드의 형식과 구조 유지 3.

  • You can write and run code directly through hands-on examples.

  • The API integration practice using JSONPlaceholder is included.


Recommended for
these people

Who is this course right for?

  • Someone who wants to try React for the first time

  • Someone starting Next.js for the first time

  • Someone who wants to quickly learn React concepts

  • Someone who wants to understand the structure and roles of frontend and backend

  • Someone who wants to apply Zustand to React

Need to know before starting?

  • Basic JavaScript Knowledge (variables, control statements, arrays, functions)

Hello
This is

2,192

Learners

159

Reviews

287

Answers

4.8

Rating

5

Courses

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

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

 

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

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

ㄴ네이버 카페

 

주요 저서 

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

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

React Native 인 액션(번역)

 

개발/강의

삼성 SDS 개발팀 근무

SK 고객행복 주식회사 근무

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

Curriculum

All

37 lectures ∙ (8hr 6min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

9 reviews

4.9

9 reviews

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

    Reviews 5

    Average Rating 5.0

    5

    32% enrolled

    • c01님의 프로필 이미지
      c01

      Reviews 1

      Average Rating 5.0

      5

      100% enrolled

      After taking the course, I've gained some confidence in React.js. I think I understand why we use (), {}, state, set, arrow functions, basic hook functions, and so on.

      • codingbeer님의 프로필 이미지
        codingbeer

        Reviews 11

        Average Rating 4.2

        Edited

        5

        100% enrolled

        Simple core concept lectures are great.

        • zk202308a5410
          Instructor

          It's been a long time. 😭😭

      • moomgyucha8486님의 프로필 이미지
        moomgyucha8486

        Reviews 2

        Average Rating 5.0

        5

        32% enrolled

        • wtkim님의 프로필 이미지
          wtkim

          Reviews 28

          Average Rating 4.9

          5

          32% enrolled

          $15.40

          zk202308a5410's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!