[React] 리액트 앱 생성하고 실행하기

리액트 앱 생성하기

1. 먼저 리액트를 실습할 폴더를 만들어주세요.

이 때 폴더 이름은 너무 길거나 대문자가 포함되어 있으면 안됩니다 ㅠㅠ

2. vscode 터미널 창에 npx create-react-app . 을 입력하세요

.을 입력하면 현재 디렉터리에 리액트 앱이 생성되고, 디렉터리 이름을 따로 입력하셔도 됩니다.

+) npx 는 node package execute의 약자로 노트 패키지 실행이라는 명령입니다.

Happy hacking 이라는 문구까지 확인하면

reactstudy 폴더에 뭔가 되게 많이 생겼을겁니다.

create-react-app 으로 생성한 리액트 앱 또한 Node.js 패키지 입니다.

따라서 폴더 아래에 package.json, package-lock.json, node_modules 같은 Node.js 패키지 구성 파일이 존재합니다.

이 외에도 node_modules 나 public, src 같은 폴더들도 보입니다.

리액트 앱 실행하기

명령어를 이용해 리액트 앱을 실행하고 종료하겠습니다. 리액트 앱을 실행하는 명령어는 package.json 의 scripts 에 작성되어 있습니다.

보시다시피 start 명령어를 통해 리액트 앱을 실행할 수 있습니다.

npm run start 를 터미널에 입력하여 리액트 앱을 실행시켜 봅시다.

자동으로 웹 브라우저에서 새 탭이 열리면서 리액트 앱의 주소인 http://localhost:3000에 접속합니다.

리액트 앱을 종료하는 것도 간단합니다. 터미널에서 ctrl + c 를 누르면

이런 물음이 나오는데 Y를 입력하시면 리액트 앱이 종료됩니다.

브라우저의 접속 또한 종료됩니다.

 

---