Introduction to React
pnuswedu
Let's develop the skills to develop web applications using React and develop the capabilities to apply them in practice!
Basic
React, hook, react-router
먼저 경험한 수강생들의 후기
이런 걸 배울 수 있어요
자바스크립트 기초 문법
CSS 기초 문법
리액트 기초 탄탄하게 다지기
미니 프로젝트를 통한 웹애플리케이션 개발
🚨 강의 제공 중단 안내 🚨
안녕하세요, 소플입니다.
그동안 2만명이 넘는 분들이 사랑해주셨던
'처음 만난 리액트' 강의의 인프런 제공이 중단되었습니다.
앞으로는 아래 링크에서 강의를 수강하실 수 있습니다 😀
깔끔한 강의자료, 꼼꼼한 설명으로
쉽게 배우는 리액트 강의입니다. 👨🏫
리액트의 세계로
초대합니다 💫
리액트는 메타에서 만든 오픈소스 자바스크립트 UI 라이브러리입니다.
현재 웹 애플리케이션 개발에 가장 많이 사용되고 있으며
빠른 업데이트와 렌더링 속도, 컴포넌트 기반의 구조 등 많은 장점을 갖고 있어요.
강의의 특징을
알려드려요 🔎
- JavaScript 기초 문법을 익힙니다.
- CSS의 개념과 자주 사용되는 속성을 배웁니다.
- 리액트에 대한 기초 개념을 쌓고 사용법을 익힙니다.
- 미니 프로젝트를 통해 실제 리액트 애플리케이션을 개발합니다.
- 입문자분들을 위해 HTML, CSS, JS의 기초 내용을 포함하고 있습니다.
강의를 책으로도
만나볼 수 있어요! 📖
강의가 끝나도
질문&답변 제공 💬
강의를 모두 수강한 이후에도 리액트로 개발을 하면서 생기는 궁금증들을 모두 해결해드립니다.
지식공유자 소플이 만든 프론트엔드 지식 포털 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강. 미니 블로그 소스코드
이런 분들께
추천드려요
학습 대상은
누구일까요?
웹애플리케이션 개발에 관심있는 분
리액트를 처음 접하시는 분
안녕하세요, 소플입니다.
2025년 3월부로 인프런에서의 지식공유자 활동을 마무리하고 새로운 출발을 합니다.
앞으로는 아래 사이트에서 제 강의와 컨텐츠들을 만나보실 수 있습니다.
소플이 만든 프론트엔드 지식 포털 - FrontOverflow
커리큘럼
전체
0개
강의 게시일:
마지막 업데이트일:
수강평
전체
456개
4.8
456개의 수강평
chayuna917584수강평 1
∙
평균 평점 5.0
5
100% 수강 후 작성In the f-mode lecture, I was listening to a lecture that read the official documentation, but it was too long, I didn't understand it, and it was too difficult, so I gave up and looked through the React lectures, and I found a gem of a lecture. This is free... This is free...! I was amazed at the teaching ability that it was so easy and friendly to approach. The component bungeoppang is so cute. Jjangjangman He doesn't look away and just gets to the core. Thank you for saving me time. This lecture is a living practice version of the official documentation. Even at double speed, the pronunciation is so accurate that it doesn't get muffled and is easy to hear.
- soaple지식공유자
Thank you chayuna91 for leaving a review. I tried to explain it as easily as possible, and I am happy and grateful that you understood it. I tried to remove as much difficult content as possible and focused only on building a solid foundation of React, so if you listen to the lecture diligently, you will be able to get closer to React! Thank you for liking the bungeoppang picture that I drew one by one~ I hope you have fun learning!
- yuri04152449
수강평 1
∙
평균 평점 5.0
5
100% 수강 후 작성I happened to hear about this lecture, but it was so good! I think it would be great for people who are new to React and have a basic understanding of HTML, CSS, and JavaScript to take this course. There are many advantages, but the best ones are 1) clean and concise explanations, 2) practice-based review of course content, and 3) teaching skills! I've tried to take many courses... but this is the first time I've seen a lecture this thorough! I think it would be good to have React, which I've been exposed to for a long time...ㅎㅎ Thank you so much for the great lecture, and I'll definitely take any new courses you open in the future! I highly recommend it to anyone who hasn't taken it yet.
- soaple지식공유자
Thank you yrrrrrrrr for leaving a review. I'm so happy that my lecture was a good fit for you~ I don't know when it will be, but please look forward to the next lectureㅎㅎ I hope you continue to have fun developing React!
- monkey2
수강평 1
∙
평균 평점 5.0
5
50% 수강 후 작성I am currently a student who has completed about 20% of the course! When I did a web project with React in the past, I studied on my own as if I was heading to the bare ground. It was too difficult, and there were many things I didn't understand. Then, when I joined a company, I was going to be in charge of the web, so I studied again and came across the lecture. The lecturer's ability is so great that I even said, "This is a free lecture..?" I don't know why I only saw it now, it's such a good lecture!
- soaple지식공유자
Thank you, Gibbonmonkey, for leaving a review. I'm so happy that you were able to understand React, which you had found difficult, a little more easily through my lecture. I hope you will complete the remaining lectures, and if you have any questions while taking the class, please leave a question at any time!
- hek33kr4899
수강평 1
∙
평균 평점 5.0
5
100% 수강 후 작성I am a developer working in the field with Swift. I started studying from scratch without knowing anything, and now I am studying React. I don't know much about JS and I don't know much about the web, so I thought it would be good to learn from the basics, so I took the course. It is well organized with the necessary content, and it is interesting to see the code that is different from my coding style. I listened to the course well. Thank you!
- soaple지식공유자
Thank you, hek33kr, for leaving a review. I'm glad that my lecture was helpful to you~ I hope you continue to have fun developing React!
- yongwchoi261087
수강평 17
∙
평균 평점 4.8
5
31% 수강 후 작성Q&A Communication is not smooth.
- soaple지식공유자
Thank you for leaving a review, Yong-won Choi. I haven't left any unanswered questions, but if you could provide the link to the question, I'll check it out and answer it!
비슷한 강의
같은 분야의 다른 강의를 만나보세요!
![[JavaScript GUI Development #1] Timer App with Electron + React (+ Zustand)Course Thumbnail](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)
연관 로드맵
강의가 포함된 로드맵으로 학습해 보세요!
