강의

멘토링

로드맵

개발 · 프로그래밍

/

프론트엔드

처음 만난 리액트(React)

자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다.

(4.8) 수강평 454개

수강생 19,923명

  • Inje Lee (소플)

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • 자바스크립트 기초 문법

  • CSS 기초 문법

  • 리액트 기초 탄탄하게 다지기

  • 미니 프로젝트를 통한 웹애플리케이션 개발

🚨 강의 제공 중단 안내 🚨

안녕하세요, 소플입니다.
그동안 2만명이 넘는 분들이 사랑해주셨던
'처음 만난 리액트' 강의의 인프런 제공이 중단되었습니다.
앞으로는 아래 링크에서 강의를 수강하실 수 있습니다 😀

 

 

 

깔끔한 강의자료, 꼼꼼한 설명으로
쉽게 배우는 리액트 강의입니다. 👨‍🏫

리액트의 세계로
초대합니다 💫

리액트는 메타에서 만든 오픈소스 자바스크립트 UI 라이브러리입니다.
현재 웹 애플리케이션 개발에 가장 많이 사용되고 있으며
빠른 업데이트와 렌더링 속도, 컴포넌트 기반의 구조 등 많은 장점을 갖고 있어요.


강의의 특징을

알려드려요 🔎

  • JavaScript 기초 문법을 익힙니다.
  • CSS의 개념과 자주 사용되는 속성을 배웁니다.
  • 리액트에 대한 기초 개념을 쌓고 사용법을 익힙니다.
  • 미니 프로젝트를 통해 실제 리액트 애플리케이션을 개발합니다.
  • 입문자분들을 위해 HTML, CSS, JS의 기초 내용을 포함하고 있습니다.


강의를 책으로도
만나볼 수 있어요! 📖

강의를 책으로도 볼 수 있도록
강의 내용을 고스란히 책에 담았습니다.
동영상 강의와 함께 책을 보면서
리액트의 세계로 빠져보세요!

🌟 소문난 명강의 🌟

소플의 처음 만난 리액트 [2판]
- 리액트 기초 개념 정리부터 실습까지

 


강의가 끝나도
질문&답변 제공 💬

강의를 모두 수강한 이후에도 리액트로 개발을 하면서 생기는 궁금증들을 모두 해결해드립니다.
지식공유자 소플이 만든 프론트엔드 지식 포털 FrontOverflow에 언제든지 질문을 남겨주세요!

🔗 FrontOverflow 방문하기


강의를 들은 후 수강생의 변화 🙋‍♂️

JS 기초 문법에 대해
이해할 수 있어요!

자주 사용되는 CSS를
이해할 수 있어요!

리액트의 기초를
잘 다질 수 있어요!

실전 프로젝트 경험을
쌓을 수 있습니다.


학습 내용 엿보기 📚

섹션 0 [준비하기]

  • HTML, CSS의 개념과 자바스크립트 기초 문법에 대해 배우고, 실습을 위한 환경을 세팅합니다.

섹션 1, 2 [리액트 소개, 시작하기]

  • 리액트에 대한 소개, 장단점에 대해 학습합니다.
  • 리액트를 직접 연동하는 방법과 create-react-app에 대해 학습합니다.

섹션 3 [JSX]

  • JSX의 정의와 역할, 그리고 사용법에 대해 학습합니다.

섹션 4 [Rendering Elements]

  • 리액트 엘리먼트의 정의와 특징 및 렌더링 방법에 대해 학습합니다.

섹션 5 [Components and Props]

  • 리액트 컴포넌트와 Props의 정의 및 사용법에 대해 학습합니다.

섹션 6 [State and Lifecycle]

  • State의 개념과 컴포넌트 Lifecycle에 대해 학습합니다.

섹션 7 [Hooks]

  • 리액트 훅의 개념과 대표적인 훅들 및 커스텀 훅에 대해 학습합니다.

섹션 8 [Handling Events]

  • 리액트에서 이벤트를 다루는 방법에 대해 학습합니다.

섹션 9 [Conditional Rendering]

  • 조건부 렌더링의 개념과 구현 방법에 대해 학습합니다.

섹션 10 [Lists and Keys]

  • 리스트와 키의 개념과 실제 렌더링 방법에 대해 학습합니다.

섹션 11 [Forms]

  • 다양한 Form과 제어 컴포넌트에 대해 학습합니다.

섹션 12 [Lifting State Up]

  • Shared State와 컴포넌트간 State를 공유하는 방법에 대해 학습합니다.

섹션 13 [Composition vs Inheritance]

  • 다양한 컴포넌트 합성 방법과 상속의 의미에 대해 학습합니다.

섹션 14 [Context]

  • Context의 개념과 Context API에 대해 학습합니다.

섹션 15 [Styling]

  • 대표적인 CSS의 속성들과 styled-components에 대해 학습합니다.

섹션 16 [미니프로젝트]

  • 지금까지 배운 내용들을 종합하여 미니 블로그를 함께 만들어봅니다. 

예상 질문 Q&A 💬

Q. 자바스크립트를 잘 몰라도 들을 수 있는 강의인가요?

네! 자바스크립트에 대해 잘 모르시는 분이라고 해도, 강의에서 기초 문법을 포함하여 설명드리기 때문에 상관없이 들으실 수 있습니다.

Q. CSS에 대해 잘 몰라도 들을 수 있는 강의인가요?

네, CSS의 대표적인 속성들을 함께 다루기 때문에 잘 몰라도 강의를 수강하실 수 있습니다.

Q. 리액트를 배우면 뭐가 좋은가요?

리액트를 통해 내가 원하는 대로 웹 애플리케이션을 개발할 수 있습니다.


학습 관련자료 💡

3강 ~ 15강. 실습 소스코드

리액트 v17 소스코드
https://github.com/soaple/first-met-react-practice

리액트 v18 소스코드
https://github.com/soaple/first-met-react-practice-v18

16강. 미니 블로그 소스코드

https://github.com/soaple/mini-blog

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 웹애플리케이션 개발에 관심있는 분

  • 리액트를 처음 접하시는 분

안녕하세요
입니다.

안녕하세요, 소플입니다.

2025년 3월부로 인프런에서의 지식공유자 활동을 마무리하고 새로운 출발을 합니다.

앞으로는 아래 사이트에서 제 강의와 컨텐츠들을 만나보실 수 있습니다.

소플이 만든 프론트엔드 지식 포털 - FrontOverflow

커리큘럼

전체

0개

강의 게시일: 
마지막 업데이트일: 

수강평

전체

454개

4.8

454개의 수강평

  • chayuna917584님의 프로필 이미지
    chayuna917584

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    Tôi đang nghe một bài giảng đọc tài liệu chính thống trong một bài giảng f-mo, nhưng nó quá dài, quá khó hiểu và tôi đã bỏ cuộc. Khi xem qua các bài giảng về React, tôi thấy một bài giảng giống như một viên ngọc quý. . Cái này miễn phí... Cái này miễn phí...! Tôi rất ấn tượng bởi khả năng giảng dạy có thể tiếp cận nó một cách dễ dàng và thân thiện như vậy. Thành phần bungeoppang dễ thương quá Jjangjjangman Nó không cần quá nhiều sự chú ý và chỉ đánh vào những điểm chính. Cảm ơn bạn đã tiết kiệm thời gian cho tôi. Bài giảng này là một phiên bản thực hành sống động của tài liệu chính thức. Ngay cả khi nói trong bụng, cách phát âm vẫn chính xác đến mức bạn có thể nghe rõ mà không bị bóp nghẹt.

    • soaple
      지식공유자

      Chayuna91, cảm ơn bạn đã để lại đánh giá. Tôi đã cố gắng hết sức để giải thích nó một cách đơn giản nhất có thể, và tôi tự hào và biết ơn vì bạn đã nhận ra điều đó. Chúng tôi đã loại bỏ càng nhiều nội dung khó càng tốt và chỉ tập trung vào việc củng cố những kiến ​​​​thức cơ bản về React, vì vậy nếu bạn nghe kỹ bài giảng, bạn sẽ có thể tiến gần hơn đến React! Cảm ơn bạn đã thích hình minh họa Bungeoppan được vẽ từng bước một~ Chúc bạn học tập vui vẻ!

  • yuri04152449님의 프로필 이미지
    yuri04152449

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    Đây là một bài giảng tôi tình cờ học được và tôi yêu thích nó! Nếu bạn chưa quen với React, sẽ rất tuyệt nếu bạn tham gia khóa học với kiến ​​thức cơ bản về HTML, CSS và JavaScript. Có nhiều ưu điểm, nhưng trong số đó, 1) giải thích rõ ràng và rõ ràng, 2) xem xét nội dung khóa học dựa trên thực hành và 3) khả năng giảng dạy. Tôi đã thử tham gia một số khóa học, nhưng đây là khóa học đầu tiên tôi thực hiện một cách nghiêm túc như vậy! Tôi nghĩ sẽ thật tuyệt nếu có React, thứ mà tôi đã thấy từ lâu rồi... Haha. Cảm ơn bạn rất nhiều vì bài giảng tuyệt vời. Tôi chắc chắn sẽ nghe nó nếu bạn mở một bài giảng mới trong tương lai. ! Nếu bạn chưa nghe nó, tôi thực sự khuyên bạn nên nghe nó.

    • soaple
      지식공유자

      yrrrrrrrr, cảm ơn bạn đã để lại đánh giá. Tôi rất tự hào vì bạn thấy bài giảng của tôi rất phù hợp. Tôi không biết khi nào nó sẽ diễn ra, nhưng xin hãy chờ đợi bài giảng tiếp theo. Chúng tôi hy vọng bạn tiếp tục vui vẻ khi phát triển React!

  • rjh71000066님의 프로필 이미지
    rjh71000066

    수강평 1

    평균 평점 5.0

    5

    50% 수강 후 작성

    Hiện tại đã có khoảng 20% ​​học sinh đăng ký! Trước đây, khi làm một dự án web với React, tôi học một mình, cảm giác như đang bắt đầu lại từ đầu. Điều đó thật khó khăn và có rất nhiều điều tôi không hiểu. Sau đó, khi tôi định đảm nhận mảng web khi gia nhập công ty, tôi bắt đầu học lại và tình cờ xem được các bài giảng. Kỹ năng giảng dạy của anh ấy tuyệt vời đến mức mọi người nói: "Đây là khóa học miễn phí..?" Bài giảng hay quá không hiểu sao bây giờ tôi mới xem!

    • soaple
      지식공유자

      Gibbon, cảm ơn bạn đã để lại đánh giá. Tôi rất tự hào vì bài giảng của tôi đã giúp bạn hiểu React, điều mà trước đây bạn thấy khó, giờ đã dễ dàng hơn một chút. Tôi hy vọng bạn hoàn thành các bài giảng còn lại và nếu có thắc mắc gì trong suốt khóa học, vui lòng để lại câu hỏi bất cứ lúc nào!

  • hek33kr4899님의 프로필 이미지
    hek33kr4899

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    Tôi là một nhà phát triển làm việc trong Swift. Tôi bắt đầu học mà không biết gì cả, và bây giờ tôi đang học React. Vì tôi không biết nhiều về JS hoặc web nên tôi nghĩ sẽ rất tốt nếu bắt đầu từ những điều cơ bản, vì vậy tôi đã tham gia khóa học này. Khóa học này có cấu trúc tốt với nội dung cần thiết và thật thú vị khi thấy mã có sự khác biệt. từ phong cách mã hóa của tôi. Tôi rất thích bài giảng. Cảm ơn bạn!

    • soaple
      지식공유자

      Cảm ơn hek33kr đã để lại đánh giá. Tôi rất vui vì bài giảng của tôi hữu ích! Chúng tôi hy vọng bạn tiếp tục vui vẻ khi phát triển React!

  • yongwchoi261087님의 프로필 이미지
    yongwchoi261087

    수강평 17

    평균 평점 4.8

    5

    31% 수강 후 작성

    Giao tiếp giữa câu hỏi và câu trả lời không được suôn sẻ.

    • soaple
      지식공유자

      Cảm ơn bạn, Yongwon Choi, đã để lại đánh giá. Cho đến nay, không có câu hỏi nào tôi chưa trả lời, vì vậy nếu bạn gửi cho tôi liên kết đến câu hỏi của bạn, tôi sẽ kiểm tra và trả lời nó!

비공개 강의로
수강이 제한됩니다.
비공개 강의

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

연관 로드맵

강의가 포함된 로드맵으로 학습해 보세요!