BEST

Programming

Front-end

Learning React A-Z by Following Along [Version 19 반영]

Name: Learning React A-Z by Following Along [Version 19 반영]
Price: 55000 KRW

In this course, you will learn React from basic to intermediate level. This single course is designed to help you learn the concepts, practice them, and acquire most of the knowledge you need for React all at once.

(4.7) 85 reviews

2,918 learners

johnahn

React

Next.js

TypeScript

TDD

Redux

Reviews from Early Learners

What you will learn!

React
Next.js
TypeScript
Automatic static site deployment
Docker

From React basic concepts to intermediate techniques
You can learn by creating your own app!

Learn by following
React AZ

In this course, you will learn React skills from basic to intermediate level .
Even those who are new to React can acquire most of the knowledge they need for React with just this one lecture.

I made it so that you can learn the concepts and practice in one lecture, and acquire most of the knowledge necessary for React at once. I hope that learning React, which is considered essential to become a front-end developer, will be of great help in getting a job.

Only for this lecture
Check out the benefits.

_{Helps with structural understanding
Diagram-centric
Easy and detailed explanation}

_{Directly the source code
While writing
Natural repetition learning}

_{Real world applications
Can be made
Practice-oriented lectures}

_{Learn the basics of JavaScript
If you are a beginner developer
Anyone OK!}

1-2. Step 2: Visual explanation through diagram + direct code writing!

Because it is easier to understand visually through diagrams than just listening to an explanation. Also, I think that learning through diagrams like this and then writing source code naturally has a reviewing effect.

3. Learn by doing, hands-on lectures.

First, learn the necessary concepts, and then practice to solidify the concepts.

4. Suitable for learners who know the basics of JavaScript.

If you know the basics of JavaScript, you will have no difficulty taking this course.

You will learn:

Section 1) You will learn about the concepts of React.

Section 2-3) Learn and use basic React concepts while creating a To-Do app.

Section 4-5) Learn and use more advanced concepts of React while creating a Netflix app.

Section 6-7) Learn the basics of React testing and create a simple button app through practice.

Section 8) Learn about NextJS and Typescript and create a blog app using them.

Section 9) Learn about the new features and APIs in React 18, the new version of React.

Section 10) Learn about Redux, React's representative state management library.

Section 11) Learn how to run React with Docker.

Expected Questions Q&A 💬

Q. Is this a lecture that non-majors can also take?

A. Since the lectures are given in detail from the basics, even non-majors can take the course.

Q. Why should I learn React?

A. I think learning React will be very helpful for getting a job, as it is the most used library as a front-end developer.

Q. Is there anything I need to prepare before attending the lecture?

A. It would be good to know and listen to basic JavaScript concepts.

Knowledge sharer's
Are you curious about other lectures?

32,000+ cumulative students, learn by following the web development series 📖

Recommended for
these people

Who is this course right for?

For those who are learning React for the first time
For those who want to become a front-end developer

Need to know before starting?

JavaScript

Hello
This is

83,952

Learners

2,685

Reviews

2,430

Answers

4.8

Rating

Courses

안녕하세요.

즐겁게 개발하고 있는 개발자입니다.

앞으로 많은 도움을 드릴 수 있었으면 좋겠습니다.

- 따라하며 배우는 도커와 CI환경 저자
- 카카오 기업 신입 공채 FE 교수자
- 패스트캠퍼스, 구름 강사
- 현대자동차 개발 기업 교육
- 신한은행 메타버스, 코빗 타운 풀스택 개발
- 여러 공공기관 SNS 풀스택 개발

Curriculum

All

162 lectures ∙ (24hr 16min)

Course Materials:

Lecture resources

Section 1. Lecture materials

3 lectures

1. Advice on taking lectures
2. Lecture chart data (Draw IO) (Recommended)
3. Lecture source code

Section 2. What is React?

5 lectures ∙ (26min)

Section 3. Learning React by Building a Simple To-Do App

13 lectures ∙ (1hr 14min)

9. Exploring the basic React structure installed with Vite.
04:13
10. Trying to run the React App (npm run dev)
02:33
11. What is a SPA (Single Page Application)?
04:35
12. Introduction to the to-do list app and understanding JSX
05:25
13. Starting to build a to-do list app
06:28
14. Creating a to-do list UI (writing JSX, CSS)
05:11
15. Listing a to-do list using the Map method
06:46
16. Understanding the JSX Key Attribute
06:13
17. Deleting to-do lists using the filter method
06:43
18. What is React State?
04:30
19. Add to-do list
10:58
20. Spread Operator
04:03
21. Marking completed tasks (conditional ternary operator)
06:32

Section 4. Optimizing Your To-Do App

10 lectures ∙ (1hr 29min)

Section 5. Starting to build a Netflix app

10 lectures ∙ (1hr 25min)

Section 6. Completing the Netflix App

15 lectures ∙ (2hr 57min)

Section 7. React TDD Basics

8 lectures ∙ (46min)

Section 8. Creating and deploying a simple app using React TDD

10 lectures ∙ (50min)

Section 9. Next.js with TypeScript

24 lectures ∙ (6hr 0min)

Section 10. React Version 18

3 lectures ∙ (18min)

Section 11. Redux

11 lectures ∙ (2hr 30min)

Section 12. Running React with Docker

13 lectures ∙ (1hr 17min)

Section 13. React 19

10 lectures ∙ (1hr 24min)

Section 14. Lectures scheduled for removal

27 lectures ∙ (3hr 33min)

Published:

Last updated:

Reviews

All

85 reviews

4.7

85 reviews

lgs4002
Reviews 13
∙
Average Rating 4.3
4
97% enrolled
React 부분과 달리 Nextjs, Typescript, Redux 부분이 살짝 아쉽다는 생각이 들었습니다. 좋은 강의였습니다.
gyuyoung park
Reviews 5
∙
Average Rating 5.0
5
6% enrolled
john ahn님의 강의는 대단하다고 생각합니다. 저렴한 강의 비용에 교재까지 손수 만들어 제공해주시고, contents들도 알찹니다. 타강의에 비해 내용도 풍부한데 가격도 착한 이런 강의를 두고 어떻게 다른 리액트 강의를 듣겠습니까
김일꾼
Reviews 2
∙
Average Rating 4.0
3
66% enrolled
배너 만들기에 css 파일 없고 코드도 없는데 질문사항에 검색해도 안나옴
원준
Reviews 1
∙
Average Rating 5.0
5
100% enrolled
1. 강의 자료 - 5점 탐나는 GIF 자료들이 많은데, PDF에 GIF가 담기지 않는 점, diagram앱에서 export시 페이지 분할되는 부분의 사진이 잘리는 점은 아쉽습니다 ㅠ 인프런에 문서 관련 표준이나 가이드라인도 있으면 좋을 것 같네요. 어떤 강사분은 한글 파일로 하시는 것도 본 적 있어서.. 그래도 강의자료 퀄리티가 만점이라 5점 2. 강의 전달력 - 5점 목소리 좋다는 평은 처음 남겨봅니다. 듣기 편해요. 리액트는 예전에 책으로 보거나 독학했을 때는 어려웠는데, 어려운 건 중요한 걸 더 알려주고, 그림판으로 대충 그리는게 아닌 제대로된 다이어그램이나 자료와 함께 친절하게 강의해주셔서 덕분에 잘 배웠습니다. 이거 듣다가 지인한테 다른 강의도 3개 추천 받았었는데 비교해보니 리액트 배우기에는, 프론트엔드 입문자에게는 이게 최고인 것 같습니다. 3. 강의 구성 - 리액트~TDD는 5점, 8강부터 4점 리액트와 테스트, 배포, 자동화까지는 엄청 잘 알려주셨는데, 타입스크립트, Next.js, 리덕스는 그만큼은 자세히 알려주지 않아 아쉽습니다! 강의가 부족한 게 아니라 후반 파트는 입문까지만 알려주셔서 그렇습니다. 중급 강좌도 있으면 좋을 것 같습니다~ 4. 총평 만점짜리 강의입니다. 퀄리티에 비해 가격이 다소 저렴한 편입니다.
osakapark
Reviews 9
∙
Average Rating 4.3
3
100% enrolled
1. 장점 교재 및 소스가 제공되어 복습하기 좋습니다. (제가 이 강의를 신청한 이유입니다.) 2.단점 강의가 교재 읽기 같은 부분이 있어서, 전달력이 떨어집니다. 코드 설명할 때, 타이핑하면서 코드를 단순히 읽는 경우가 많습니다. (집중 안됨, 복습시 시간낭비) 3.건의 사항 단순 코드 타이핑, 코드 읽기 시간은 줄여 주시고, 소스에 대한 설명 시간을 늘여 주셨으면 좋겠습니다. drawo io 는 읽기 불편하고, 보안때문에 회사에서 접속도 되지 않습니다.

$42.90

johnahn's other courses

Check out other courses by the instructor!

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

John Ahn

이 강의를 통해 도커에 대해서 배울 수 있으며, CI 환경을 구성할 수 있습니다.

Basic

GitHub, AWS, Docker

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

John Ahn

따라하며 배우는 자바스크립트 A-Z

John Ahn

웹 개발의 기초가 되는 자바스크립트의 기초부터 중급까지 배울 수 있습니다.

Beginner

JavaScript

따라하며 배우는 자바스크립트 A-Z

John Ahn

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

Basic

TypeScript, JavaScript

따라하며 배우는 타입스크립트 A-Z

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

John Ahn

이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

Basic

클론코딩, Node.js, React

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

John Ahn

이 강의를 통해서 쇼핑몰 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

Intermediate

React, Redux, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

John Ahn

따라하며 배우는 리액트 네이티브 기초

John Ahn

이 강의를 통해서 리액트 네이티브를 이용해서 애플리케이션 개발을 할 수 있습니다.

Basic

React Native, React, expo

따라하며 배우는 리액트 네이티브 기초

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

John Ahn

이 강의를 통해서 Google에서 제공하는 API를 사용해서 챗봇을 만들어 볼 수 있습니다.

Basic

React, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

John Ahn

이 강의를 통해 리액트와 노드의 개념을 익히는 것뿐만이 아닌 실질적으로 어떻게 웹사이트를 만들 수 있는지를 배울 수 있습니다.

Basic

React, Redux, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

John Ahn

따라하며 배우는 HTML, CSS

John Ahn

이 강의를 통해서 HTML, CSS 기본을 다질 수 있습니다.

Beginner

HTML/CSS

따라하며 배우는 HTML, CSS

John Ahn

따라하며 배우는 웹 게임

John Ahn

이 강의를 통해서 웹 게임을 어떻게 개발해야 하는지 알 수 있습니다.

Intermediate

React

따라하며 배우는 웹 게임

John Ahn

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

John Ahn

이 강의를 통해 리액트 애플리케이션을 테스트하는 법을 배우게 됩니다.

Basic

React, React Context, 웹앱

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

John Ahn

따라하며 배우는 NestJS

John Ahn

이 강의를 통해 NestJS에 대해서 배울 수 있습니다.

Basic

NestJS, PostgreSQL, TypeORM

따라하며 배우는 NestJS

John Ahn

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

Basic

React, Firebase, 웹앱

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

따라하며 배우는 TDD 개발 [2023.11 업데이트]

John Ahn

이 강의를 통해서 테스트 주도 개발(TDD)을 이용하여 Node.js 어플리케이션을 만들어 봅니다.

Basic

TDD, Node.js, Express

따라하며 배우는 TDD 개발 [2023.11 업데이트]

John Ahn

따라하며 배우는 데노(DENO) - 기본 강의

John Ahn

출시 전부터 많은 관심을 받았던 데노가 드디어 나왔습니다. 이 강의에서 데노가 노드와 어떻게 다르며 어떻게 데노를 다루는지를 배울 수 있습니다.

Basic

Deno

따라하며 배우는 데노(DENO) - 기본 강의

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

John Ahn

이 강의를 통해서 리액트와 노드를 어떻게 사용하는지 기본적인 내용들을 배울 수 있습니다.

Basic

React, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

John Ahn

이 강의를 통해 리액트와 노드등의 개념만이 아닌, 실질적으로 어떻게 웹 사이트를 만드는지를 배울 수 있습니다.

Basic

React, Node.js, 웹앱

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

John Ahn

Similar courses

Explore other courses in the same field!

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

John Ahn

이 강의를 통해 리액트 애플리케이션을 테스트하는 법을 배우게 됩니다.

Basic

React, React Context, 웹앱

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

John Ahn

[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]

영코디 킴쌤

리액트를 공부하다가 포기하셨나요? 코딩이 처음인 쌩초보, 비전공자도 자바스크립트부터 리액트까지, 포기하지 않고 React로 가는 길을 열어드립니다.

Beginner

JavaScript, React, jQuery

[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]

영코디 킴쌤

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

Basic

TypeScript, JavaScript

따라하며 배우는 타입스크립트 A-Z

John Ahn

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

짐코딩

최신 Next.js v15 App Router를 학습하며 노션 기반의 실용적인 개발자 블로그를 함께 구축하는 강의입니다. 추가로 커서 AI 활용법 등 다양한 인사이트도 얻을 수 있습니다.

Basic

React, 블로그, Next.js

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

짐코딩

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

Basic

React, Firebase, 웹앱

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

따라하며 배우는 웹 게임

John Ahn

이 강의를 통해서 웹 게임을 어떻게 개발해야 하는지 알 수 있습니다.

Intermediate

React

따라하며 배우는 웹 게임

John Ahn

[풀스택 입문] Firebase보다 10배 좋은 Supabase

로펀

풀스택 개발에 날개를 달아줄 Supabase! Firebase의 상위호환인 Supabase로 풀스택 개발을 2시간만에 완성합니다.

Basic

PostgreSQL, Next.js, TailwindCSS

[풀스택 입문] Firebase보다 10배 좋은 Supabase

로펀

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

John Ahn

이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

Basic

클론코딩, Node.js, React

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

John Ahn

[코드팩토리] [초급] 8시간만에 끝내는 코드팩토리의 Typescript 완전정복 풀코스

코드팩토리

TypeScript(타입스크립트)를 하나도 모르더라도 강의 하나로 Typescript 문법 고수로 만들어주는 고농축 Typescript 문법 강의입니다.

Basic

TypeScript

[코드팩토리] [초급] 8시간만에 끝내는 코드팩토리의 Typescript 완전정복 풀코스

코드팩토리

따라하며 배우는 TDD 개발 [2023.11 업데이트]

John Ahn

이 강의를 통해서 테스트 주도 개발(TDD)을 이용하여 Node.js 어플리케이션을 만들어 봅니다.

Basic

TDD, Node.js, Express

따라하며 배우는 TDD 개발 [2023.11 업데이트]

John Ahn

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

이정환 Winterlood

문법을 넘어 동작 원리와 개념 이해까지 배워도 배워도 헷갈리는 타입스크립트 이제 제대로 배워보세요! 여러분을 타입스크립트 마법사🧙🏻‍♀️로 만들어드립니다.

Basic

TypeScript

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

이정환 Winterlood

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리

자바스크립트, 타입스크립트 다음은 백엔드 개발! NestJS를 이용한 REST API 백엔드 개발, Socket IO 개발 및 배포를 할 수 있게 됩니다.

Basic

NestJS, REST API, backend

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

Intermediate

Next.js, React, GraphQL

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

Basic

React, Next.js, expo

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

Basic

React, Electron, GUI

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

입문강의 타입스크립트부터 ionic6 (앵귤러 기반)

깊알못nodeep

쉽게 안드로이드 앱, 윈도우 앱, ios 앱을 만들어보고 배포하는 방법까지 알고 싶은 분들에게 추천드립니다. 자바스크립트와 앵귤러보다는 타입스크립트의 기초부터 알려드립니다!

Beginner

TypeScript, IONIC, 하이브리드 앱

입문강의 타입스크립트부터 ionic6 (앵귤러 기반)

깊알못nodeep

바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기

ludgi

Whisper를 로컬에서 실행하고, FastAPI와 Next.js를 활용해 AI 음성 인식 앱을 빠르게 개발하는 실전 프로젝트 강의입니다. 실시간 음성 인식까지 구현하며, 짧은 시간 안에 간단한 포트폴리오로 활용할 수 있는 결과물을 완성할 수 있습니다.

Basic

Next.js, FastAPI, whisper

바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기

ludgi

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

딩코딩코

코딩 몰라도 OK! 당신의 아이디어를 단 4주 만에 실제 수익으로 바꿔보세요. AI와 최신 도구를 활용해, 웹사이트와 앱을 동시에 만들고 바로 서비스까지 연결합니다.

Beginner

Flutter, Next.js, cursor

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

딩코딩코

비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)

체험코딩

이 강의를 모두 들으시고, 응용하면 여러분만의 사이트, 앱을 만들 수 있어요. 이 강의는 Cursor AI 를 이용하여, 우리 가족만을 위한 단톡방을 Web사이트로 만들면서, 코딩의 흐름을 자연스럽게 익혀보는 바이브코딩 입문 강의입니다. App 개발자 계정이나 맥북 없이, 윈도우 환경만으로도 개발을 몰라도 누구나 쉽게 따라 할 수 있고, 실제 웹사이트로 배포하는 법도 배웁니다.

Beginner

Firebase, Next.js, vercel

비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)

체험코딩

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

Basic

React Native, React, ES6

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

Learning React A-Z by Following Along [Version 19 반영]

Reviews from Early Learners

What you will learn!

Learn by following React AZ

Only for this lecture Check out the benefits.

1-2. Step 2: Visual explanation through diagram + direct code writing!

3. Learn by doing, hands-on lectures.

4. Suitable for learners who know the basics of JavaScript.

You will learn:

Expected Questions Q&A 💬

Knowledge sharer's Are you curious about other lectures?

Recommended for these people

HelloThis is .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Curriculum

Reviews

johnahn's other courses

Similar courses

Learn by following
React AZ

Only for this lecture
Check out the benefits.

Knowledge sharer's
Are you curious about other lectures?

Recommended for
these people

Hello
This is