강의

N
챌린지

멘토링

N
클립

로드맵

BEST
Programming

/

Front-end

(2025 Latest Update) React: The Last Step to Becoming a Front-End Developer

For those who aspire to become front-end developers, this is an essential course to learn React and even create a portfolio project.

(4.7) 30 reviews

355 learners

  • codingnuna10082706
React
Redux
Web API

Reviews from Early Learners

What you will learn!

  • React (router, lifecycle, state ...)

  • Redux (Redux middleware)

  • Zustand state management

  • Tanstack Query (Asynchronous Call Management)

  • React Router

New update for 2025!😄
A fun React lecture with no time to get bored!

Welcome to my lecture!

Hello, I am the sister who teaches coding !

Finally, the React lecture has been released, following the JavaScript lecture.
This lecture is for those who are preparing to become a front-end developer👨‍💻 or those who want to learn React, the hottest🔥 framework .

Many companies use React. React has become a prerequisite for front-end developers. Since it is an in-depth course that goes beyond JavaScript, the content is definitely not easy.
But if you just bring your will and effort, I will guide you through the rest😉

Wait! This course requires basic understanding of JavaScript .
If you don't know JavaScript, check out the <JavaScript: All-in-one from Basics to Practice> course!

What are you learning? ✨

React

React is the most used language in front-end development!

Essential React concepts to become a front-end developer
Learn with lots of examples.

State management library

Learn both Zustand and Redux , the most widely used state management libraries in the industry!

(Is this the only place where you can learn both?)

Tanstack Query

Learn how to handle asynchronous calls efficiently with Tanstack Query, the most popular library for calling APIs.

(The trendiest combination when used with Zustand!)

React library

We will introduce you to all the various React libraries that are widely used when developing React!

And even how to choose and use it yourself!

The ability to solve things on one's own

Rather than simply following the code,

Develop your own abilities through a variety of tasks.

5 projects

Even if you only learn one thing, it will be fun and practical!

It contains the core concepts of React, such as Netflix, shopping malls, and rock-paper-scissors games.
We are working on 5 projects.

Learn by making it yourself
5 key projects!

First project: Rock Paper Scissors game

Second project: Creating a weather app

Third Project: Creating a Shopping Mall Website

Fourth Project: Creating a Contact Page

Final Project: Creating Netflix

I recommend this to these people!

  • People who hate boring coding lectures : No to difficult explanations that only developers can understand! People who are looking for lectures that can be understood even if they don't know anything
  • For those who want to become a front-end developer : Those who know HTML/CSS JavaScript but don't know what it takes to become a front-end developer
  • People who want to learn while making : People who enjoy learning by making things themselves through various problems and assignments that can be done in real life, rather than just listening to lectures.

After the lecture,
You can expect something like this.

You can create your own project using React.

State management + asynchronous call management with Zustand + TanstackQuery, the most trendy combination these days.

Improve your practical development skills through 5 projects!

Knowledge sharer
Sister who teaches coding ✒️

  • 🚀 Based on my experience teaching over 100 liberal arts students while working as an overseas boot camp instructor for 2 years, I will impart knowledge to you using the optimal teaching method.
  • 🧐 I worked as a web developer for 6 years and graduated with honors from Dankook University's Department of Computer Engineering.
  • ✨ I run a YouTube channel called Coding Sister, and I share free classes and information for those who want to learn coding.

Reviews with an average rating of 5.0★ prove it.

I am a beginner developer who has been working for 3 months. I am listening to the lectures well. I will work hard to reach intermediate and advanced levels.

It's so much fun, it's amazing how boring classes can be so much fun. When I see a beginner, I can understand it right away. 😊😊

I was able to study quickly and easily until the end :)

I'm a junior developer and I had a lot of fun completing the course.

JavaScript: This is a review left for the all-in-one course from basics to practice 💌

Expected Questions Q&A 💬

Q. I had a question while watching the lecture!

Feel free to come and ask questions anytime in the Slack channel my sister runs!

Q. Is 1:1 personal coaching included in the tuition fee?

A. The course fee does not include the price of personal coaching 😣 However, if you have any questions during the course, please feel free to use the Slack community! Your colleagues or this older sister will be happy to answer! 👨🏿‍🤝‍👨🏿

Recommended for
these people

Who is this course right for?

  • Someone with a basic understanding of JavaScript

  • Someone who wants to be a front-end developer

  • Someone who wants to create an awesome portfolio

Need to know before starting?

  • JavaScript

Hello
This is

1,048

Learners

96

Reviews

79

Answers

4.8

Rating

2

Courses

Curriculum

All

119 lectures ∙ (17hr 46min)

Published: 
Last updated: 

Reviews

All

30 reviews

4.7

30 reviews

  • 연어와아아앙님의 프로필 이미지
    연어와아아앙

    Reviews 24

    ∙

    Average Rating 4.9

    5

    100% enrolled

    몇 백만원하는 3개월 부트 캠프보다 훨씬 좋고 기초탄탄하게 잡아줘요. 그리고 Redux 이해 못 했던거 여기서 개념 다 잡았어요. \(❁´◡`❁)/ 아쉬운 점은 딱히 없는데 정말 굳이~~ 뽑자면 1. styled-components가 아닌 CSS 2. redux 업데이트 및 권장사항 (진짜 상관 없음.. 공식문서 찾아본 결과 문제 없다고 했음! 코드 짱 잘 돌아감.. 그냥 거슬림 정도..?!) 3. [쌩초보 기준] 모두 알려주는 강의가 아님 → 나머지 기능 본인이 만들어야 함(좀 많음) → 답지 깃허브 참고 못함 (특히, 초보 경우! class 작성/Hook/강의 내용과 180도 다른 코드) 저는 제 방식대로(함수형 버전&추천 라이브러리 사용 안 하고 원래 쓰던 라이브러리 사용&모바일 반응형& 개인 포트폴리오) 기능 다 만들기는 했는데.. 쌩초보자분은 질문 많이 하시거나 파워 구글링 또는 열정가득해서 맨땅에 헤딩 하시는 분이면 추천..! ✨단, 이런 경우 다른 강의 보세요. (리액트 쌩초보 기준)✨ 1. 나는 처음 부터 같이 따라 하면서 할려고 했는데?! 2. 난 답지 보면서 분석해야 이해가는데?!

    • 코딩알려주는누나
      Instructor

      안녕하세요 마지막 과제를 제외하고는 각 프로젝트 마다 전체 완성프로젝트 깃허브 링크가 있어서 코드 참고 가능합니다!!

  • Yun hyunwook님의 프로필 이미지
    Yun hyunwook

    Reviews 2

    ∙

    Average Rating 5.0

    5

    100% enrolled

    레알루 너모 좋아요~~

    • 김동규님의 프로필 이미지
      김동규

      Reviews 1

      ∙

      Average Rating 4.0

      4

      100% enrolled

      리덕스 강의를 보고 있는데 현재 하는거랑 좀 다른거 같아요...강의에 나온대로 했는데 안되서 찾아보니까 준비하시는 동안 바뀐거 같아요

    • e89cokr님의 프로필 이미지
      e89cokr

      Reviews 13

      ∙

      Average Rating 5.0

      5

      57% enrolled

      리액트 개념을 잡아줍니다. 이 강의를 듣고 얼마든지 응용이 가능할 것 같아요 이전에 리액트 공부하면서 이해하지 못했던 것들을 시원하게 해결해 줍니다. 클래스컴포넌트와 함수형컴포넌트의 차이점과 라이프스타일을 정확히 알려줍니다. 라우터, Redux 이해하는데 많은 도움이 됩니다. 좋은 강의 감사합니다.

      • 김혜린님의 프로필 이미지
        김혜린

        Reviews 3

        ∙

        Average Rating 5.0

        5

        30% enrolled

        쉽게 잘 알려주셔서 너무 좋습니다~

        $121.00

        codingnuna10082706's other courses

        Check out other courses by the instructor!

        자바스크립트 : 기초부터 실전까지 올인원Hình thu nhỏ khóa học

        자바스크립트 : 기초부터 실전까지 올인원

        코딩알려주는누나

        자바스크립트 기초강의, 응용강의, 포트폴리오 전용강의 따로따로 찾아 볼게 아니라, 강의하나로 자바스크립트 기초부터 현업이 쓰는 다양한 응용 기술, 포트폴리오 까지 다 끝내고 싶으신 분들을 위한 강의입니다.

        Cơ bản

        Cơ bản

        JavaScript, HTML/CSS

        자바스크립트 : 기초부터 실전까지 올인원Hình thu nhỏ khóa học

        자바스크립트 : 기초부터 실전까지 올인원

        코딩알려주는누나

        Similar courses

        Explore other courses in the same field!

        프론트엔드 개발의 Kick, Web API (feat. React)Hình thu nhỏ khóa học

        프론트엔드 개발의 Kick, Web API (feat. React)

        박용주

        실무에 적용할 수 있는 Web API를 다룹니다. 한 번쯤 꼭 마주치게 될 요구사항들을 풀어낼 무기를 얻어가시길 바랍니다.

        Cơ bản

        Cơ bản

        JavaScript, React, Web API

        프론트엔드 개발의 Kick, Web API (feat. React)Hình thu nhỏ khóa học

        프론트엔드 개발의 Kick, Web API (feat. React)

        박용주

        얄코의 가장 쉬운 리액트(React)Hình thu nhỏ khóa học

        얄코의 가장 쉬운 리액트(React)

        얄팍한 코딩사전

        설명대장 얄코의 녹진하고 꾸덕한 강좌로 가장 쉽게, 가장 빠르게 리액트를 배우세요!

        Cơ bản

        Cơ bản

        JavaScript, React, Node.js

        얄코의 가장 쉬운 리액트(React)Hình thu nhỏ khóa học

        얄코의 가장 쉬운 리액트(React)

        얄팍한 코딩사전

        Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)Hình thu nhỏ khóa học

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

        짐코딩

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

        Cơ bản

        Cơ bản

        React, 블로그, Next.js

        Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)Hình thu nhỏ khóa học

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

        짐코딩

        웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크Hình thu nhỏ khóa học

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

        코드캠프

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

        Cơ bản

        Cơ bản

        React, Next.js, expo

        웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크Hình thu nhỏ khóa học

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

        코드캠프

        React Native with Expo: 제로초에게 제대로 배우기Hình thu nhỏ khóa học

        React Native with Expo: 제로초에게 제대로 배우기

        제로초(조현영)

        웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

        Cơ bản

        Cơ bản

        React, React Native, 하이브리드 앱

        React Native with Expo: 제로초에게 제대로 배우기Hình thu nhỏ khóa học

        React Native with Expo: 제로초에게 제대로 배우기

        제로초(조현영)

        파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)Hình thu nhỏ khóa học

        파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

        이진석

        파이썬/장고 웹서비스 개발의 기초를 탄탄히 다져보세요. 장고 학습에는 시간도 걸리지만, 반복되는 개발 속에 여러분의 생산성을 극대화하실 수 있습니다. 여러분의 상상을 현실로 만들어보세요.

        Cơ bản

        Cơ bản

        Python, Django, React

        파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)Hình thu nhỏ khóa học

        파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

        이진석

        Next.js 15: Full-Stack DevelopmentHình thu nhỏ khóa học

        Next.js 15: Full-Stack Development

        구멍가게코딩단

        전통적인 React 개발 방식과 Next.js를 이용해서 개발하는 방식은 전혀 다릅니다. 이 강의는 최신 Next.js 15의 핵심을 꿰뚫고, '진짜' Next.js다운 개발 방식을 알려드립니다. 취업 포트폴리오부터 실무 프로젝트까지, 성능과 효율을 모두 잡는 방법을 경험하세요. Next.js 스럽게 개발 합시다! Next.js의 기능을 어떻게 적용해야하는지 실제 예제를 만들면서 몸으로 배울 수 있도록 구성되었습니다. 서버 컴포넌트를 중심으로 보고 서버 액션과 캐싱 전략등을 이론보다는 실제로 코드를 통해서 더 빠르게 학습합니다. 강의의 목표는 최대한 빨리 Next.js의 분위기를 따라가는 것이 때문에 강의 자체는 JavaScript를 이용해서 진행합니다. 하지만 각 강의의 예제는 Typescript로 제작된 것을 추가로 수업자료로 제공합니다.

        Cơ bản

        Cơ bản

        JavaScript, React, JPA

        Next.js 15: Full-Stack DevelopmentHình thu nhỏ khóa học

        Next.js 15: Full-Stack Development

        구멍가게코딩단

        코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)Hình thu nhỏ khóa học

        코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)

        이동훈

        MERN stack (feat. TypeScript) 을 활용한 지도 서비스를 처음부터 끝까지 만들어보는 강의입니다. API 공식 문서를 보며 차근차근 하나씩 만들어 봅시다.

        Cơ bản

        Cơ bản

        MongoDB, Express, React

        코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)Hình thu nhỏ khóa học

        코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)

        이동훈

        바이브코딩으로 게시판 만들기+ 회원가입 로그인 (React + FastAPI)Hình thu nhỏ khóa học

        바이브코딩으로 게시판 만들기+ 회원가입 로그인 (React + FastAPI)

        Kyung-il In

        바이브코딩으로 React 회원가입 로그인 + 게시판 만들기 (React + FastAPI)은 AI 프롬프트를 활용해 풀스택 웹 애플리케이션을 직접 완성해보는 실습형 강의입니다. OpenAI Codex와 Claude Code 이 강의에서는 React(Typescript) 프론트엔드와 FastAPI 백엔드를 연결하여, 회원가입 & 로그인 기능 게시판 CRUD(작성, 조회, 수정, 삭제) JWT 인증과 권한 처리 를 하나의 프로젝트 안에서 구현합니다. 특히, 단순히 코드를 작성하는 데서 끝나는 것이 아니라, 👉 AI 프롬프트로 코드 생성 → 실행 및 수정 → 테스트 → 확장 이라는 “바이브코딩” 학습 방식을 통해 AI와 함께 개발하는 새로운 흐름을 경험할 수 있습니다. 완강 후에는 “나만의 회원제 게시판 서비스”를 직접 완성할 수 있으며, 추가로 댓글, 좋아요, 이미지 업로드 같은 확장 기능까지 도전할 수 있습니다.

        Nhập môn

        Nhập môn

        React, Node.js, TypeScript

        바이브코딩으로 게시판 만들기+ 회원가입 로그인 (React + FastAPI)Hình thu nhỏ khóa học

        바이브코딩으로 게시판 만들기+ 회원가입 로그인 (React + FastAPI)

        Kyung-il In

        [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)Hình thu nhỏ khóa học

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

        닭강정

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

        Cơ bản

        Cơ bản

        React, Electron, GUI

        [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)Hình thu nhỏ khóa học

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

        닭강정

        [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)Hình thu nhỏ khóa học

        [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

        코드캠프

        10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

        Trung cấp trở lên

        Trung cấp trở lên

        React, Next.js, cursor

        [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)Hình thu nhỏ khóa học

        [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

        코드캠프

        C# Xamarin Forms 자마린 폼즈 API 강의 + 간단한 API 만들기Hình thu nhỏ khóa học

        C# Xamarin Forms 자마린 폼즈 API 강의 + 간단한 API 만들기

        깊알못nodeep

        자마린(Xamarin)에서 SQL의 데이터를 어떻게 접근해서 수정, 삭제, 추가, 조회할 수 있는지 설명하는 강의입니다. WEB API도 같이 만들면서 API를 어떻게 활용하는지 알수 있습니다.

        Cơ bản

        Cơ bản

        Web API, Xamarin

        C# Xamarin Forms 자마린 폼즈 API 강의 + 간단한 API 만들기Hình thu nhỏ khóa học

        C# Xamarin Forms 자마린 폼즈 API 강의 + 간단한 API 만들기

        깊알못nodeep

        iOS/Android 앱 개발을 위한 실전 React Native - BasicHình thu nhỏ khóa học

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

        Wintho

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

        Cơ bản

        Cơ bản

        React Native, React, ES6

        iOS/Android 앱 개발을 위한 실전 React Native - BasicHình thu nhỏ khóa học

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

        Wintho

        SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문Hình thu nhỏ khóa học

        SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문

        코딩도니

        React 프론트엔드와 SpringBoot 백엔드를 AWS 클라우드에 직접 배포하는 포트폴리오 중심 강의! 빠르게 자신의 포트폴리오에 프론트, 백앤드 프로젝트를 배포하고 싶은 분들에게 도움이 되는 강의입니다! 배포하는 데 필요한 지식들을, 서버 설정부터 Docker, Domain 연결, Nginx, HTTPS 적용까지 단계별로 단기간 실습할 수 있게 됩니다!

        Cơ bản

        Cơ bản

        React, Java, AWS

        SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문Hình thu nhỏ khóa học

        SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문

        코딩도니

        생산성을 향상시키는 스프링부트 기반의 API 템플릿 프로젝트 구현Hình thu nhỏ khóa học

        생산성을 향상시키는 스프링부트 기반의 API 템플릿 프로젝트 구현

        구파고

        프로젝트 시작을 위한 전반적인 설정을 구현하고 템플릿 프로젝트로 등록하여 생산성을 극대화할 수 있습니다.

        Cơ bản

        Cơ bản

        Spring Boot, JPA, Web API

        생산성을 향상시키는 스프링부트 기반의 API 템플릿 프로젝트 구현Hình thu nhỏ khóa học

        생산성을 향상시키는 스프링부트 기반의 API 템플릿 프로젝트 구현

        구파고

        타입스크립트 코리아 : React with TypeScript 세미나Hình thu nhỏ khóa học

        타입스크립트 코리아 : React with TypeScript 세미나

        이웅재

        타입스크립트와 리액트 관련 강좌입니다.

        Trung cấp trở lên

        Trung cấp trở lên

        React, TypeScript

        타입스크립트 코리아 : React with TypeScript 세미나Hình thu nhỏ khóa học

        타입스크립트 코리아 : React with TypeScript 세미나

        이웅재