본문 바로가기
프론트엔드/React

[ React ] VSCode에서 create-react-app 설치방법, 현재폴더에서 리엑트 설치방법

by CODESIGN 2022. 11. 30.

Visual Studio Code 터미널 열기


1. VSCode를 연다.

 

 

2. 맥 기준 VSCode를 연후 상단메뉴에서 '터미널' 선택 후 '새 터미널'을 선택한다.

쇼트컷으로  control + shift + ` 를 누르면 새 터미널이 열린다.

 

 

3. 화면하단에 새로운 터미널 창이 열린다.

 

 

4. 프로젝트를 생성하고 싶은 파일 위치로 이동한다.

ls : 현제 위치에서의 파일 목록 조회가 가능하다.
cd: 원하는 파일을 열고 그곳으로 이동한다.

 

  •  'ls'를 눌러 현제 위치를 파악한 뒤
  • 'cd 파일명'을 적어준다. (파일 루트를 안다면 한 번에 다 적어줘도 된다. Desktop/Code/Frontend)

 

원하는 파일 위치로 이동했다면 아래 리액트 시작 명령어로 리액트를 설치해 준다.

 

 

 

 

리액트 시작 명령어 


npx create-react-app 프로젝트이름

 

 

이미 파일을 생성했다면 아래 코드를 사용하자. 프로젝트 이름 대신에 '.'을 넣으면 된다.

npx create-react-app .

 

 

1. VS code 터미널에 위와 같이 명령어를 입력하면 아래와 같이 리액트 파일이 만들어지기 시작한다.

 

 

2. 리액트 파일 다운로드가 완료가 되면 아래와 같이 뜬다.

 

 

3. 터미널을 bash로 변경해 준 뒤 아래의 명령어를 입력해 준다.

npm start

 

 

아래와 같이 문구가 뜨고 웹 창에 리액트 페이지가 켜진다. 

 

 

 

Hello world! 출력해 보기


https://codesign.tistory.com/433

 

[ React ] VSCode에서 Hello World! 출력해보기

리액트 설치 방법 https://codesign.tistory.com/298 [ React ] VSCode에서 리액트 실행하기 Visual Studio Code 터미널 열기 1. VSCode를 연다. 2. 맥 기준 VSCode를 연후 상단메뉴에서 '터미널' 선택 후 '새 터미널'을 선

codesign.tistory.com

 

댓글