3. CRA / npm / yarn / create-react-app

사이트의 설치 내용을 그대로 따라 하면 된다.

 

그러나 사이트와 달리 npm이 아닌 yarn으로 설치를 진행

(우선, 설치는 yarn을 통해 완료되기에 이전에 yarn이 설치되어있어야한다.)

npx create-react-app movie_app
cd movie_app
yarn start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

 

입력을 하면 다음처럼 진행된다.

 

하나하나 차례대로 설명해보면

1. npx create-react-app movie_app 을 입력하면

다음처럼 4개의 scripts(start,build,test,eject)가 생성된다.

2.

cd movie_app
yarn start

을 입력했을시엔 터미널창엔 다음처럼 로컬,네트워크 IP가 나타나고 웹 브라우저에선 리액트 로고가 나타난다.

(yarn start 이후 종료하면 코드 수정이 즉각적으로 반영되지 않는다.)

 

이제 리액트를 설치한 폴더로 들어가보면 하단처럼 여러 파일들이 이미 셋업된 것을 확인할 수 있다.

CRA를 사용하는 큰 장점 중 하나는 configuration을 안해도 된다는 것!

yarn start를 입력한 뒤 종료하지 않은 상태에서

app.js에 <h1> egae natanana? </h1>를 추가하고 저장을 누르면 yarn이 즉각적으로 컴파일을 시작하고 자동 새로고침이 되어 수정사항이 브라우저에 바로 나타난다.

 

수정 전 -> 수정 후