리액트 개발 환경

• 온라인 플레이 그라운드
  -> 웹 환경에서 리액트 개발
• 웹사이트에 react 추가
  -> 웹사이트에 부분적으로 추가 (어려움)
• 새 react 앱 만들기
  -> toolchains 사용 (개발 도구 모음)
  

toolchains

• 파일과 컴포넌트 스케일링
• 서드파티 npm 라이브러리 사용
• 실수를 조기에 발견
• CSS와 JS 실시간 편집
• 프로덕션 코드 최적화
  ** 툴체인을 사용하지 않고 html페이지에 \

CRA (create react app)

react를 배우고 있거나 새로운 single page app을 만들고 싶은 경우 사용되는 toolchains
툴체인 앱의 이름이 create react app 이다

CRA 설치

npm install -g create-react-app (전역 설치)
npx create-react-app (해당 프로젝트에만 설치)

CRA 환경 설치

create-react-app [폴더명]
-> 'Happy hacking!' 이 뜨면 성공

react 시작하기

1. index.html 의 \
   내부에 작성된 react파일(App.js)이 적용되도록 설정돼있다
   -> index.js에서 적용될 element와 선택자 변경가능
2. App.js 의 \ 내부에 react 문서를 컴포넌트 별로 작성하여 작업
   -> component란, 각각의 독립적 모듈로 컴포넌트 별 독립적 기능 수행 (재사용, 유지보수 등의 장점)
3. 컴포넌트 return은 하나 이상의 element로 구성되어야 한다

css 적용

• index.css 파일은 전체에 대한 스타일 (base가 되는)
• 각 컴포넌트 별 css따로 구성 (App.css 등)

배포하기

create react app은 개발환경을 포함해서 굉장히 무겁다
배포 할 때는 npm run build 사용
npm run build -> 작성한 파일을 CRA가 압축하여 build 폴더 생성 (build 전 2.4mb / build 후 1.2mb)

serve

npm이 제공하는 간단한 서버
npx serve -s build -> 서버 실행 (-s build 루트 폴더를 build로 설정하여 실행)