[리액트] CRA(create react app)으로 리액트 프로젝트 생성하기

CRAcreate react app은리액트로 프로젝트를 시작하기 위해 필요한 환경을 모두 구축해주는 코드다. (웹팩, 바벨의 설치 등)

 

create react app으로 프로젝트를 생성하기전에 리액트에 필요한 도구들이 설치되었는지 꼭 확인해보자

👉  [리액트] 리액트 프로젝트를 생성하기 전에 필요한 도구

 

create react app으로 프로젝트 생성하기

1. 설치

yarn으로 설치

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

npm으로 설치

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

여기서 npx는 npm과 함께 설치 되는 노드 패키지를 실행하는 툴이다. 

 

만약 프로젝트 이름으로 된 폴더를 이미 만들었다면 해당 폴더로 접근한 후 아래의 코드를 입력한다. 

$ yarn create react-app .

 

2. 디렉토리로 이동

yarn으로 실행

$ cd <프로젝트이름>
$ yarn start

npm으로 실행

$ cd <프로젝트이름>
$ npm start

 

3. 로컬호스트로 이동

보통 프로젝트를 터미널에서 시작하면 자동으로 페이지가 열리지만 그렇지 않다면 로컬호스트를 직접 URL에 타이핑해 프로젝트를 연다. 

http://localhost:3000/

 

create react-app에 대해서 더 자세히 알아보고 싶다면 👉  https://create-react-app.dev/docs/getting-started