[React] create react app 사용하기 (react프로젝트 생성하기)

▶ 사용하기전 확인사항
- react.js 설치가 되었나?
- node.js 설치가 되었나?
- npm/yarn 이 설치 되었는지?
- VScode(visual Studio Code)가 설치되었는지? (다른 툴이여도 괜찮아요.)
** react.js를 사용하기 위해서는 패키지 사용을 위한 node.js가 설치되어야 하고 npm 또는 yarn 이 설치되면 된다.

▶ create react app 도구 사용하기

이전에는 package.json 작성해서 바벨이랑 웹팩을 직접 설치, 설정하고, 리액트 관련 라이브러리 설정을 했는데, 이 역할을 create react app이 한다.
페이스북에서 만들어준 도구야
해당 도구가 나오기 전에는 프로젝트 설정을 직접하거나 보일러플레이트(boilerplate) 이미 프로젝트가 설정된 걸 깃허브에서 클론해서 사용했음.
실무에서도 사용하고 있다.

1. 디렉토리 새로 만들어주기(작업공간 만들기)
- cmd창을 띄워준 후 작업할 드라이브에 react-tutorials 폴더를 생성한다.
>> mkdir react-tutorials
** 전 D드라이브가 작업드라이브라 해당 드라이브에 폴더를 생성했습니다. 작업자 스타일에 맞춰서 진행하시면 됩니다.

2. 생성한 폴더로 이동후 리액트 프로젝트 생성하기

>> cd react-tutorials
>> npx create-react-app 프로젝트명

- 설치를 기다리다보면 "Success! Created practice-app at 작업폴더" 작업폴더에 프로젝트명으로 생성된 걸 메시지를 통해 확인할 수 있어요.
- 이로써 설치는 완료 되었고, 아래 네모칸에 있는것처럼 프로젝트로 이동해서 yarn start를 진행해볼께요.

3. yarn start

- 리액트 폴더에 들어가서 >> yarn start 를 입력후 엔터를 누르면 브라우저가 뜨면서 리액트 페이지가 뜬다.

- localhost:3000 주소로 리액트 초기 페이지가 뜬다.

해당 페이지까지 완료되었다면 리액트 프로젝트 생성이 끝이다.



https://link.coupang.com/a/xtJm0

COUPANG

** 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다.