시작하세요! 리액트 프로그래밍

▣ 01장: Hello World 설정
Hello React World
작동 원리
React.DOM.*
특수한 DOM 속성
리액트 데브툴 브라우저 확장
다음 단계: 커스텀 컴포넌트

▣ 02장: 컴포넌트의 수명
최소 요건
프로퍼티
propTypes
___기본 프로퍼티 값
상태
상태 저장 텍스트 영역 컴포넌트
DOM 이벤트 참고 사항
___기존의 이벤트 처리 방식
___리액트의 이벤트 처리
프로퍼티와 상태
초기 상태의 프로퍼티: 안티 패턴
외부에서 컴포넌트 접근
작동 중 프로퍼티 변경
수명 주기 메서드
수명 주기 예제: 모두 기록하기
수명 주기 예제: 믹스인 사용
수명 주기 예제: 자식 컴포넌트 사용
성능을 위한 컴포넌트 업데이트 방지
PureRenderMixin

▣ 03장: Excel: 멋진 테이블 컴포넌트
데이터 준비
테이블 헤더 루프
콘솔 경고 디버깅
td 내용 추가
___컴포넌트를 개선하는 방법
정렬
___컴포넌트를 개선하는 방법
정렬 UI 표시
데이터 편집
___편집 가능한 셀
___입력 필드 셀
___저장
___가상 DOM의 차이점 비교와 결론
검색
___상태와 UI
___내용 필터링
___검색을 개선하는 방법
빠른 재현
___재현 기능을 개선하는 방법
___다른 구현 방법
테이블 데이터 내려받기

▣ 04장: JSX
Hello JSX
JSX 트랜스파일
바벨
클라이언트 측
JSX 변환
JSX에서 자바스크립트 사용
JSX의 공백
JSX의 주석
HTML 엔터티
___XSS 방지
스프레드 속성
___부모 대 자식 스프레드 속성
JSX에서 여러 노드 반환
JSX와 HTML의 차이점
___className과 htmlFor
___style이 객체로 취급됨
___닫는 태그
___캐멀표기법으로 속성 표기
JSX와 폼
___onChange 핸들러
___value와 defaultValue
___ <textarea> 와 value
___ <select> 와 value
JSX를 이용한 Excel 컴포넌트 수정

▣ 05장: 앱 개발을 위한 설정
기본 파트 앱
___파일과 폴더
___index.html
___CSS
___자바스크립트
___자바스크립트: 현대화
필수 구성 요소 설치
___Node.js
___브라우저리파이
___바벨
___리액트 및 기타 항목
빌드 시작
___자바스크립트 트랜스파일
___자바스크립트 패키징
___CSS 패키징
___결과!
___윈도우 버전
___개발 중 빌드하기
배포
앞으로 할 일

▣ 06장: 앱 구축하기
와인패드 v.0.0.1
___설정
___코딩 시작
컴포넌트
___설정
___검색
___ <Button> 컴포넌트
___Button.css
___Button.js
___폼
___<Suggest>
___<Rating> 컴포넌트
___<FormInput> “팩터리”
___<Form>
___<Actions>
___대화상자
앱 구성
새로 개선된 <Excel>>
Whinepad
마무리

▣ 07장: 린트, 플로우, 테스트, 반복
package.json
___바벨 구성
___스크립트
ESLint
___설정
___실행
___전체 규칙
플로우
___설정
___실행
___형식 검사 사용하기
___<Button> 수정하기
___app.js
___프로퍼티와 상태의 형식 검사
___형식 내보내기/가져오기
___형변환
___불변항(Invariant)
테스트
___설정
___첫 번째 테스트
___첫 번째 리액트 테스트
___<Button> 컴포넌트의 테스트
___<Actions> 테스트
___전체 상호작용 테스트
___적용 범위(coverage)
기본 개념

▣ 08장: 플럭스
와인패드 다시 살펴보기
저장소
___저장소 이벤트
___<Whinepad>에서 저장소 사용
___<Excel>에서 저장소 사용
___<Form>에서 저장소 사용
___선긋기
액션
___CRUD 액션
___검색과 정렬
___<Whinepad>에서 액션 사용
___<Excel>에서 액션 사용
플럭스 정리
불변
불변 저장소 데이터
___불변 데이터 조작