[React JS][니코코딩] Create react App

# 5.0 Intruduction

• create-react-app은 리액트 어플리케이션을 만드는 최고의 방식이다.
• 이전에 만든 리액트 어플리케이션은 스크립트를 import함으로써 만들어 졌다.
• create-react-app을 사용한다면 , ReactJS 어플리케이션을 만듦에 있어 훨씬 쉬워질 거다.
• 이유는 create-react-app은 엄청나게 많은 스크립트들과 많은 사전설정들을 우리를 위해서 준비해주기 때문이다.
• 예를 들면, 우리가 create-react-app을 이용해서 작업을 할 때, 즉 create-react- app을 사용해서 어플리케이션을 만들면 개발 서버에 접근한다든가, 자동으로 새로고침을 시켜준다던든가 즉각적으로 어플리케이션 안에 CSS를 포함시켜 준다든가 하는 기능들이 있다.
• create-react-app은 publish하는 명령어를 갖고 있다.
  • 코드를 압축하고, 좀 더 빠르게 만든다.
• package.json 안에 실행 시킬 수 있는 script들이 있다.
• npm start 하면 자동으로 브라우저가 열림
• development server(개발용 서버)를 만들게 된거다.

  

• 이게 create-react-app을 사용해서 어플리케이션을 만들었을 때 초기 버젼이다.
• src폴더는 나의 모든 파일들을 넣을 폴더이다.
  • 가장 중요한건 바로 index.js 이다.
• create-react-app은 우리 어플리케이션을 가지고 여기 index.html안에 넣어주도록설정되어 있다.
  • index.html은 만들어져 있다.
• 한 파일당 한 컴포넌트를 가지고 있고, index.js에서 그 컴포넌트를 import 시켰다.
• 즉 차후에 버튼과 같은 다른 컴포넌트도 한개의 파일로 이루어 질거라는 걸 의미한다.
• 리액트 어플리케이션을 렌더링해줄 뿐인 index랑 App

#5.1 Tour of CRA

[다시듣기]

• Button이 정의 되었지만 사용되지 않았다.

  

  • create-react-app은 우리에게 이런 것들을 이야기 해줄 거다.
  • button을 import 했지만 사용하지 않았기 때문에 발생한거다.

    

  
  
  • create-react-app으로 작업을할 때의 포인트는 “분할하고” “정복하는” 거다.
• 컴포넌트들이나 스타일들을 독립적이게 유지시켜준다.