강의

멘토링

로드맵

NEW
Programming

/

Web Development

React start with Next.js

Start React with the Next.js framework! Let's develop by condensing only the essential examples needed for practical development work. Todo examples are so important that we need to develop them 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.

38 learners are taking this course

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

What you will learn!

  • How to compose components and components

  • Component state and props

  • React application that integrates with API server

  • Routing handling using Next.js

Start with React as a framework now!

React is moving from being a library to using frameworks.


Learn Next.js from the very beginning!

  • Next.js supports both client components that run in the browser and server components that run on the server.

  • For beginners, it's recommended to learn client components first and then study server components afterwards.


Learn through examples!

  • "Seeing once is better than hearing a hundred times" and "doing once is better than seeing a hundred times."

  • Simply transforming simple examples in various ways can be very educational.

  • You need to learn know-how, not just knowledge, through examples.


Get started with Easygoing React easily!

  • You can start with JavaScript at first, and that's perfectly fine.

  • It's okay to start without a design at first.

  • You can start with a completed structure at first.

Learning Content

  • Let's learn what components are.

  • We'll learn about component properties/state and more.

  • Let's create a feature that integrates with external services.

  • State management using Zustand is the current trend these days

Section (1) Development Environment

Setting up and running a development environment using Next.js

Using Next.js allows you to start development with all the basic project configurations already completed.

Section (2) Components! Components! Components!

Write the desired functionality as a component.

How should we divide components?

How should components communicate with each other?

Let's also learn the basic JavaScript syntax needed for implementation.

We'll apply design to the first Todo example using AI.

Section (3) Container and Presentation

What if multiple components need to communicate to produce a result?

  • Component State

  • Component Properties

  • JavaScript Arrays and filter

  • Destructuring Assignment

  • Spread Operator

Section (4) Todo with Routing Handling

To create more realistic examples, you need 'Routing' that creates screens matching the browser's address bar.


  • Next.js provides routing by default.

  • Next.js also provides layouts by default.

  • Get into the habit of using the Fetch API.

  • Learn why you should only use it.


Section (5) Let's utilize Zustand.

Zustand is the most popular global state management library in the field. You can manage global state with just a few lines of code.

  • You can also store the results in local storage.

  • It's simpler to use than other libraries.

This is a course for React beginners.

This is an introductory course for those who want to learn React.

  • You need to know how to declare variables in JavaScript.

  • You need to learn about control statements and loops.

  • You need to know about functions and arrays.

  • You should have experience handling events using HTML and JS in a browser.

Recommended for
these people

Who is this course right for?

  • People who want to try React for the first time

  • A person starting Next.js for the first time

  • Someone who wants to quickly learn React concepts

Need to know before starting?

  • JavaScript Fundamentals (Variables, Control Statements, Arrays, Functions)

Hello
This is

1,976

Learners

129

Reviews

263

Answers

4.8

Rating

5

Courses

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

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

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

ㄴ네이버 카페

 

Curriculum

All

37 lectures ∙ (8hr 7min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

Limited time deal

$9,900.00

50%

$15.40

zk202308a5410's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!