[React] 리액트 시작하기, create-react-app

Create React App

Create React App은 React 배우기에 간편한 환경이며, 시작하기에 최고의 방법은 새로운 싱글 페이지 애플리케이션 입니다. 개발 환경을 설정하고, 최신 JavaScript를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 최적화를 해준다. 

 

1. Node.js 설치 및 npx 설치

가장 먼저 Node 14.0.0 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요하다. 설치 후 콘솔창에 node js의 버전을 확인해보는 명령어는 다음과 같다. 

node -v

 

그 후 npx 가 설치되어있는지 버전이나 커맨드 실행을 확인해본다.

npm install npx -g // npx 설치

npx -v // 버전확인
npx // npx 커맨드 실행

 

2. 새로운 프로젝트 만들기 (create-react-app)

create-react-app 설치

cmd 창에 아래명령어로 create-react-app 을 설치한다.

npm install -g create-react-app

만약 위 명령어를 입력하고 에러가 뜬다면 아래 명령어를 입력한다.

sudo npm install create-react-app

create-react-app 설치 확인

아래 명령어를 입력해서 앱이 잘 설치되었는지 확인

create-react-app -V

 

폴더에 개발환경 만들기

개발환경으로 만들고 싶은 폴더를 만들고 그 폴더 안에서 cmd 창을 열거나 그 위치로 이동한다.

cd 파일경로

새로운 프로젝트를 만들기 위해 아래의 명령어를 실행한다. my-app에는 내가 만들 프로젝트 이름을 넣는다.

npx create-react-app .
npm start

설치 완료 후 폴더 안에 node_modules, package.json 등등의 파일들이 생긴다.

 

3. app 실행

앱이 만들어지길 기다리다가 끝난다면 vs code에서 app을 열어본다.

code my-app

pakage.json 파일에서 다음과 같이 실행시킬 수 있는 script를 확인해볼 수 있다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

새 터미널을 열고, app 실행을 위해 start 스크립트를 실행시킨다.

npm start // npm run start

이는 개발용 서버를 만들게 되며, 자동으로 브라우저가 열리고, 초기 버전이 출력됨을 확인할 수 있다.

 

그 외

• src 폴더 : 내 모든 소스 파일을 넣을 폴더
• index.js , index.html : src에 있는 코드들을 자동으로 index.html(root id의 div태그) 페이지에 넣도록 자동으로 설정되어있다.

create-react-app의 장점 중 한가지는 자동재실행(auto-reload)으로, 우리가 코드를 수정한 뒤 페이지로 가서 새로고침을 한다면 바로 적용된 것을 볼 수 있다.

깔끔하게 시작하고 싶다면 리액트 어플리케이션을 랜더링해줄뿐인 index.js와 출력할 화면의.. app.js 파일정도만 남기고 정리하면 된다.

 

+

참고

새로운 React 앱 만들기 – React