(React) 리액트 설치 및 실행법 상세하게 이미지로 설명 [2022.05.05 기준]

* 이미 node.js가 설치되어 있으신분들은 3번부터 참고해주세요 ^^

 

<포스팅 요약>

1.node.js 다운 (기존과 같음)

2. 설치가 잘되었는지 확인하기

3. react 실행하기

- 방법 1: 원하는 폴더 이름으로 react 개발환경 세팅하기

+ 이미지로 상세설명

- 방법 2: 원하는 폴더 안에서 react 개발환경 세팅하기

+ 이미지로 상세설명

4. 참고 사이트

---

1. node.js다운

---

아래 링크에서 node.js를 다운 받는다

https://nodejs.org/en/

Node.js

(LTS or Current 둘다 상관 없음)

---

2. 명령창 or 터미널 열은후 npm이 다운됐는지 확인

---

window라면 단축키: "window키+R" 을 누른 후, 나온 실행창에 cmd입력.

mac이라면 단축키: "cmd+spaceBar"을 누른 후 나온 검색창에 터미널 입력.

 

열린 명령창 혹은 터미널에 "npm -v"입력하여 잘 설치되었는지 확인.

npm -v

(v는 소문자 입니다.)

이렇게 버전 정보가 나오면 잘 설치된겁니다.

---

3. react 실행하기

 

방법1 : 원하는 폴더 이름으로 react초기 파일 생성하기(숙련자에게 추천하는 방법)

* 해당 파일 경로를 못 찾을 수 있으므로 이 방법은 초보자에게 추천하지 않습니다:0

$ npx create-react-app 파일이름
$ cd 파일이름
$ npm start

---

<이미지로 상세설명>

1. 터미널을 연다.

(터미널이 어디있는지 모르시는 분들은, Visual Studio 터미널 이용하세요~

아래 이미지 설명 참고바랍니다.)

 

2. react 개발환경 세팅하기

터미널창에 아래 명령어를 입력합니다.

$ npx create-react-app 파일이름

그러면 아래 이미지와 같이 react 개발환경을 위한 파일들이 설치가 됩니다.

* 저는 test란 이름으로 파일을 생성하였습니다 

 

3. react 개발환경이 세팅된 파일로 이동 후 실행하기

$ cd 파일이름
$ npm start

 

혹은 생성한 파일 오른쪽 클릭 후,

window사용자는 git bash here, mac사용자는 폴더에서 새로운 터미널 탭 열기 선택.

열린 터미널 창에서 npm start로 리액트 실행.

$ npm start

---

방법 2: 원하는 폴더 안에서 react 개발환경 세팅하기 (초보자에게 추천하는 방법)

-  폴더 생성

- 생성한 폴더에 리액트 개발환경 세팅 ("npx create-react-app .")

- npm start

---

<이미지로 상세설명>

1. 원하는 위치에서 파일 생성하기

 

2. 해당 폴더오른쪽 마우스 클릭 후 터미널 창 열기

window사용자는 해당 폴더 오른쪽 마우스 클릭 후git bash here로 터미널 열기

 

3. 해당 폴더에 react 개발환경 세팅하기

$ npx create-react-app .

 

4. 설치 완료후 실행하기

$ npm start

위 명령어 입력 후 실행하면 끝!

 

---

4. 참고사이트

1. create-react-app 공식 문서 : https://create-react-app.dev/docs/getting-started