윈도우10 에서 React(리액트) 설치 방법

안녕하세요 미토리야입니다. 윈도우10에서 React 설치하는 방법입니다.

아래와 같은 순서로 하시면 되는데요.

1. Nodejs 설치.
2. npm 설치.
3. yarn 설치.
4. npx 설치.
5. create-react-app 설치.
6. visual studio code 설치(코딩툴)

1. Nodejs 설치

아래링크에 설치방법이 나와있습니다. 글이 너무 길어지니 제가 포스팅한 설치방법 링크를 남겨놓을께요.

2. npm 설치.

nodejs 패키지 매니저(Node Package Manager)로 Nodejs 패키지를 관리하는 모듈입니다. nodejs 설치시에 자동으로 설치되기 때문에 따로 설치할 필요가 없습니다.

npm 버젼은 아래와 같이 확인할 수 있습니다.

npm -v

3. yarn 설치.

명령어 창(Window키+R) 실행 후, yarn을 아래와 같은 명령어로 설치합니다.

npm install --global yarn

4. npx 설치.

npm 5.2.0 버전부터는 내장되어 있기 때문에 설치하실 필요는 없습니다.

* npm 대신 npx 사용이유?

- npx로 리액트를 설치하면 최신버젼으로 CPA 패키지가 다운로드된후, 설치 후 CRA 패키지가 제거됩니다.
- 무거운 CRA 의존성 라이브러리가 제거되기 때문에 실행하기에 좋습니다.

* npm 설치시 생기는 문제?

- CRA 의존성 라이브러리가 컴퓨터에 남아있게 됩니다.
- CRA 버젼업데이트시 CRA재설치거 필요합니다.

5. create-react-app 설치.

리액트 프로젝트 생성을 원하는 위치에서 설치를 시작합니다.

npx create-react-app prj-list

npx create-react-app {프로젝트명} 과 같이 설치 및 프로젝트 생성을 합니다.

정상 설치 확인 방법

프로젝트 생성한 위치에서 아래 명령을 실행합니다.

npm run start

실행 결과는 아래와 같습니다.

Tip. 기본 브라우저를 크롬(Chrome)으로 설정하시면 웹브라우저가 자동으로 연결됩니다.

* 리액트 프로그램 활용 방법

리액트 기본 실행 프로그램

프로그램유니버스