생활코딩 React

생활코딩 React

(35개의 수강평)

1273명의 수강생
무료
지식공유자 · 생활코딩
40회 수업 · 총 0분 수업
평생 무제한 시청
수료증 미발급 강의
수강 난이도 '초급'

이런 걸 배울 수 있어요

  • 리액트와 불변(immutable)의 관계
  • 리액트의 컴포넌트를 만드는 법
  • https://egoing.github.io/react-tutorial-example/


React를 이용해서 아래와 같은 웹애플리케이션을 완성합니다.

https://egoing.github.io/react-tutorial-example/




개발환경
수업의 방향성과 개발환경을 마련하는 방법을 소개합니다.

컴포넌트 제작
React의 핵심 기능인 컴포넌트를 제작하는 방법을 소개합니다.

State
React는 컴포넌트를 외부에서 조작할 때는 props를, 내부적으로 상태를 관리할 때는 state를 사용합니다. 여기서는 state에 대해서 소개하고, state를 다루는 방법을 소개합니다.

이벤트
사용자와 상호작용하는 애플리케이션의 핵심인 이벤트를 리액트에서 구현하는 방법을 소개합니다.

Create 기능 구현
react로 create 기능을 구현해봅니다.

Update & Delete 기능 구현
웹앱의 수정 기능을 React로 구현해봅니다.

이 수업을 듣기 위해서는 htm, javascript 지식이 필요합니다.
전체 지식의 맥락은 지식 지도 서말을 참고해주세요
https://seomal.org

수강 대상

  • single page application을 구현하고 싶은 분
  • 리액트를 통해서 재사용 가능한 사용자 정의 태그(컴포넌트)를 만들고 싶은 분

선수 지식

  • JavaScript
  • html

교육과정

모두 펼치기 40 강의 0분
섹션 0. 수업 소개
1 강의
수업 소개
섹션 1. 개발 환경
8 강의
공부 전략
개발환경의 종류
npm을 이용해서 create react app 설치
create react app을 이용해서 개발환경구축
샘플 웹앱 실행
JS 코딩하는 법
CSS 코딩하는 법
배포하는 법
섹션 2. 컴포넌트 제작
6 강의
리액트가 없다면
컴포넌트 만들기 1
컴포넌트 만들기 2
props
React Developer Tools
Component 파일로 분리하기
섹션 3. state
3 강의
State 소개
State 사용
key
섹션 4. 이벤트
8 강의
이벤트 state props 그리고 render 함수
이벤트 설치
이벤트에서 state 변경하기
이벤트 bind 함수 이해하기
이벤트 setState 함수 이해하기
컴포넌트 이벤트 만들기 1
컴포넌트 이벤트 만들기 2
컴포넌트 이벤트 만들기 3
섹션 5. Create 기능 구현
9 강의
베이스 캠프
create 구현 : 소개
create 구현 : mode 변경 기능
create 구현 : mode 전환 기능
create 구현 : form
create 구현 : onSubmit 이벤트
create 구현 : contents 변경
create 구현 : shouldComponentUpdate
create 구현 : immutable
섹션 6. Update & Delete 기능 구현
4 강의
update 구현
update 구현 : form
update 구현 : state 변경
delete 구현
섹션 7. 수업을 마치며
1 강의
수업을 마치며

공개 일자

2019년 5월 17일 (마지막 업데이트 일자 : 2019년 5월 17일)

수강 후기

4.9
35개의 수강평
Aaron Jo 4달 전
reactjs 첫발을 내딛는데 엄청난 도움이 되었습니다.
BingTory 3일 전
good!
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스