<create-react-app>
: 리액트 입문 시, 초반 복잡하게 설정하는 부분을 빼고, 바로 리액트 프로젝트를 만들 수 있는 도구
0. 설치해야할 것
1. node js
2. npm
3. yarn
4. create-react-app 도구
5. visual studio code (에디터)
6. git
cf. 2~4번은 윈도우 cmd를 이용하여 설치
1. node js 설치
- https://nodejs.org/ko/ 에서
- 8.12.0 LTS 버전 설치
- cmd에서 node --version으로 설치 확인
- 개발 폴더 생성 ( 경로: C:\dev\react )
2. npm 설치
- npm은 node js 패키지 매니저로, 모듈을 설치할 수 있게해준다.
- npm은 node js 와 함께 설치된다. node js를 설치했다면 기본으로 설치되며, 따로 설치할 필요 없음
3. yarn 설치
- yarn 도구는 npm 문제점을 개선한 패키지 매니저로, 패키지를 훨씬 빨리 설치할 수 있다.
- npm을 통해 설치해야한다.
- npm install --global yarn
- 설치확인: yarn --version
4. create-react-app 도구 설치
- yarn 또는 npm을 통해 설치
- yarn 권장 (npm 지역적, yarn 전역적으로 사용 가능, 모든 디렉토리에서 create-react-app을 사용해야하므로 yarn을 선택)
- yarn global add creat-react-app
5. 프로젝트 생성
- npx를 이용해서 프로젝트를 생성한다. (윈도우일 경우 npx로 해야지 정상적으로 생성된다)
- npx create-react-app todo-list 를 하면 1~3분 정도 소요되며, 프로젝트가 생성된다.
- 생성된 todo-list 프로젝트로 이동 (cd todo-list)
- yarn으로 프로젝트 시작
- yarn start
6. 정리
- node js 설치 후 개발 디렉토리 생성
- yarn 설치 (npm install --global yarn)
- create-react-app 글로벌 설치 (yarn global add create-react-app)
- 프로젝트 생성 npx create-react-app todo-list)
- 프로젝트 디렉토리로 이동 (cd todo-list)
- yarn으로 프로젝트 시작 (yarn start)
출처) https://liante0904.tistory.com/128
리액트를 다루는 기술 (김민준 / 길벗 )
'개발 > 기타' 카테고리의 다른 글
[Windows] 윈도우에서 텔넷(telnet) 명령어 활성화 하기 (0) | 2023.02.09 |
---|---|
[온라인 결제] 인증 / 비인증 결제 (0) | 2021.07.30 |
리액트의 컴포넌트 LifeCycle (0) | 2018.10.08 |
[기타] 모바일 웹 / 웹 앱 / 하이브리드 앱 / 네이티브 앱 개념 (0) | 2018.05.24 |