생활코딩! React 리액트 프로그래밍

처음 프로그래밍을 시작하는 입문자의 눈높이에 맞춘

생활코딩은 일반인에게 프로그래밍을 알려주는 것을 목적으로 하는 비영리 교육 활동으로, 이 책은 생활코딩에서 제공하는 수업 가운데 WEB3 - React 수업을 정리한 책입니다.

이 수업은 프로그래밍을 처음 시작하는 분들의 눈높이에 맞게 만들어진 강의로서 동영상이나 텍스트만으로도 학습할 수 있게 만들어져 있습니다. 이 책에서는 동영상 수업 내용을 토대로 개발 환경을 최신 내용으로 반영하고 수업 내용을 좀 더 이해하기 쉽게 다듬고 정리했습니다.

이 책을 모두 읽고 나면 리액트를 기반으로 현대적인 웹 애플리케이션 UI를 개발하는 능력을 갖출 수 있을 것입니다.

★ 이 책에서 다루는 내용 ★

  • 리액트 기초
  • 클래스 스타일 vs. 함수 스타일
  • React Router DOM
  • React & Ajax
  • React Redux

★ 참고 자료 ★

 

도서 상세 이미지

이고잉

생활코딩 운영자

오픈튜토리얼스(https://opentutorials.org/) 운영진

  • ▣ 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 수업을 마치며

  • 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;