생활코딩은 일반인에게 프로그래밍을 알려주는 것을 목적으로 하는 비영리 교육 활동으로, 이 책은 생활코딩에서 제공하는 수업 가운데 WEB3 - React 수업을 정리한 책입니다.
이 수업은 프로그래밍을 처음 시작하는 분들의 눈높이에 맞게 만들어진 강의로서 동영상이나 텍스트만으로도 학습할 수 있게 만들어져 있습니다. 이 책에서는 동영상 수업 내용을 토대로 개발 환경을 최신 내용으로 반영하고 수업 내용을 좀 더 이해하기 쉽게 다듬고 정리했습니다.
이 책을 모두 읽고 나면 리액트를 기반으로 현대적인 웹 애플리케이션 UI를 개발하는 능력을 갖출 수 있을 것입니다.
★ 이 책에서 다루는 내용 ★
- 리액트 기초
- 클래스 스타일 vs. 함수 스타일
- React Router DOM
- React & Ajax
- React Redux
★ 참고 자료 ★
- 생활코딩 강의 WEB3 - React: https://opentutorials.org/module/4058
- 동영상 및 예제 코드 페이지: https://wikibook.github.io/react/
도서 상세 이미지
- ▣ 1장: 리액트 기초 편
- 01 수업 소개
- 02 리액트 공부 전략
- 03 개발 환경의 종류
- 04 npm을 이용한 Create React App 설치
- 05 Create React App을 이용한 개발 환경 구축
- 06 샘플 웹앱 실행하기
- 07 자바스크립트 코딩하는 법
- 08 CSS 코딩하는 법
- 09 배포하는 법
- 10 리액트가 없다면?
- 11 컴포넌트 만들기
- 12 props
- 13 React Developer Tools
- 14 컴포넌트를 파일로 분리하기
- 15 state
- 16 이벤트 state props와 render 함수
- 17 컴포넌트 이벤트 만들기
- 18 베이스 캠프
- 19 Create 구현
- 20 Update
- 21 Delete 구현
- 22 수업을 마치며
- ▣ 2장: 리액트 클래스 스타일 vs. 함수 스타일 편
- 01 수업 소개
- 02 수업의 목표
- 03 state
- 04 클래스에서 라이프사이클 구현하기
- 05 총정리 겸 수업을 마치며
- ▣ 3장: React Router DOM 편
- 01 수업 소개
- 02 실습 준비
- 03 Router
- 04 Link
- 05 Nested Routing
- 06 수업을 마치며
- ▣ 4장: React & Ajax 편
- 01 수업 소개
- 02 실습 준비
- 03 Ajax로 컴포넌트 초기화하기
- 04 Ajax로 컴포넌트 상태 변경하기
- 05 프레젠테이션 컨테이너에서 데이터 종속성 제거하기
- 06 로딩 중 기능 구현 & 수업을 마치며
- ▣ 5장: React Redux 편
- 01 수업 소개
- 02 수업 계획
- 03 Redux 없는 React 컴포넌트 구조 만들기
- 04 Redux 도입
- 05 리액트 컴포넌트에서 리덕스에 종속된 기능을 제거
- 06 react-redux가 필요한 이유
- 07 수업을 마치며
- 생활코딩 강의 WEB3 - React: https://opentutorials.org/module/4058
- 예제 코드 내려받기: https://github.com/wikibook/react
- 동영상 및 예제 링크 모음: https://wikibook.github.io/react/
135쪽, 페이지 상단 예제 코드의 밑에서 5번째 줄
<li><input type="button"></input></li>
==>
<li><input type="button" value="delete"></input></li>
136쪽, 예제 19-2의 2번째 줄
class Subject extends Component {
==>
class Control extends Component {
- 136쪽, 예제 19-2의 마지막 줄
export default Subject;
==>
export default Control;
138쪽, 예제 19-6의 2번째 줄
class Subject extends Component {
==>
class Control extends Component {
- 136쪽, 예제 19-6의 마지막 줄
export default Subject;
==>
export default Control;