본문 바로가기
Web - 프론트엔드/React.js

[ React.js ] Create React App (CRA)로 리액트 앱 쉽게 시작하기 1

by 미래문 2019. 1. 29.
반응형


 

 

Create React App은 Node 모듈 중에 하나로서, 글로벌 옵션을 통해 글로벌 모듈로 설치하면
언제 어디서든지 콘솔창에서 create-react-app 명령어 실행을 통해 쉽게 react앱을 시작할 수 있습니다.

cmd 을 열고 (디렉터리는 상관없습니다.) 다음 명령어를 입력합니다.

npm install -g create-react-app

npm install 에서 -g 옵션은 글로벌 옵션으로, 이 옵션을 사용하여 모듈을 설치하면 어떤 디렉터리 에서든지
해당 모듈을 사용할 수가 있습니다.

설치를 마쳤다면 프로젝트를 만들 디렉터리에 가서 콘솔창을 열어 create-react-app을 실행해봅니다. create-react-app은 다음과 같이 실행 할 수 있습니다.

create-react-app <프로젝트 이름>

create-react-app 뒤에 정하고 싶은 프로젝트 이름을 넘겨주시면 됩니다. 그러면, 아래와 같이 프로젝트를 만드는 작업이 진행되게 됩니다. (조금 오래 걸립니다.)

완료 되면 다음과 같습니다.

이제 example폴더에 들어가보면 react에 필요한 파일들이 생성된 것을 확인 할 수 있습니다.

이렇게 간편하게 명령어 하나만으로 react를 사용하기 위한 준비가 끝난것입니다. 환경을 갖추었으니

한번 실행을 해봐야겠죠? example폴더에서 콘솔창을 열어 다음 명령어를 실행합니다.

npm run start

위 명령어를 실행하면 react 개발 서버가 실행되고, 콘솔 창에 아래와 같이 표시 됩니다.

또한, 자동으로 브라우저를 통해 리액트 앱을 실행시켜줍니다. 아래와 같이 표시된다면 성공입니다.

 

반응형

댓글