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

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

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

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

1. Nodejs 설치

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

바로가기 링크 : 윈도우10에서 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)으로 설정하시면 웹브라우저가 자동으로 연결됩니다.

 

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

리액트 기본 실행 프로그램