React | 리액트 설치 및 Visual Studio Code로 실행 방법

리액트 공부를 시작하려는 분들을 위한 포스팅입니다.

이번 포스팅에서는 리액트 설치 및 실행 방법에 대해 안내드리도록 하겠습니다!

---

1. Node.js 다운로드

https://nodejs.org/ko

Node.js

왼쪽의 LTS 버전을 다운로드해줍니다.

 

2. 다운로드 확인

다운로드가 잘 되었는지 확인합니다.

window+R 키를 눌러 cmd 입력 후 실행합니다.

 

node -v, npm -v를 각각 입력하고 엔터를 눌렀을 때 다음과 같이 버전이 뜨면 잘 다운로드된 것입니다.

 

3. 리액트 파일 설치

cmd 창에 npm install create-react-app을 입력해주면 리액트 파일이 설치됩니다.

4. Visual Studio Code 설치 및 실행/폴더 생성

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Download for Windows를 클릭해 다운로드해줍니다.

Visual Studio Code를 실행하여 메뉴-Terminal-New Terminal을 눌러줍니다.

터미널에 npx create-react-app 폴더명 을 입력합니다.

설치가 완료되면 Happy Hacking! 문구가 뜨게 됩니다.

 

5. 리액트 실행

cd 폴더명

npm start

를 입력해주시면 브라우저에 다음과 같은 창이 뜨면서 해당 파일이 실행됩니다.

 

6. 해당 폴더 로드 방법

File-Open Folder로 해당 폴더를 선택해주시면 됩니다.

다른 방법으로는 해당 폴더를 Visual Studio Code로 드래그 앤 드롭 해주셔도 됩니다!