[React] 리액트 앱 만들고 실행해보기 create-react-app

리액트를 사용함에 있어서 기존의 웹사이트에 추가하는 방법도 있지만, create-react-app을 활용하는 방법도 있다. 새로운 리액트 앱 생성을 위한 공식 문서는 이곳을 클릭.

- Node 8.10 이상

- npm 5.6 이상

1. 새로운 앱 생성

Node와 npm에 대한 설치를 완료했다면, npx 명령어를 사용할 수 있다. (appname: 앱 이름)

npx create-react-app appname

2. 앱 생성 완료

몇 분간의 설치가 완료되면 해당 폴더(appname)에 들어가서 아래와 같이 생성 되었음을 확인할 수 있다.

3. 앱 실행해보기

해당 폴더에서 경로 부분에 cmd .. 를 입력하면 cmd 창이 실행된다.

cmd 창에서 아래와 같은 명령어를 입력한 후 기다리면

npm start

아래와 같이 앱이 실행되고, 어떤 주소로 접근할 수 있는지 알 수 있다.

그 웹사이트 주소로 접속해보면 아래와 같은 화면이 나타나며 실행된다!

종료를 하기 위해서는 Ctlr + C 를 하고 y를 입력하면 된다.

다시 접속해보면 다음과 같이 나타난다.