[React] new project building - VS Code에서 React 프로젝트 생성하기 (실습환경 구축)

VS Code에서 React 프로젝트 생성하기

 

VS Code 실행합니다.

 

디렉토리를 미리 만들어 둡니다.

C:\Users\tj\Downloads\react-app

 

왼쪽 탐색기에서 디렉토리 엽니다.

 

디렉토리 오픈된 상태에서

상단 메뉴에서 '터미널' > '새 터미널'을 선택하여 터미널을 엽니다.

그 다음 아래 매뉴얼대로 진행 합니다.

 

 

create-react-app을 사용하여 새 프로젝트 생성하기

https://lshjju.tistory.com/106

매뉴얼대로 새 프로젝트를 빌딩 합니다.

 

 

 

React 프로젝트 실행하기

새프로젝트가 잘 빌딩 되었다면 프로젝트 폴더로 이동합니다 

터미널이 현재 프로젝트 패스 상태라면 아래 코드는 패스하고 그 아래 npm start라는 개발 서버 코드를 바로 실행 합니다.

cd 프로젝트 이름

 

 

개발 서버를 시작합니다.

npm start (npm run start)

 

 

 

브라우저가 자동으로 열리면서 React 애플리케이션이 실행됩니다.

기본 주소는 http://localhost:3000입니다. 
개발 서버를 중지하려면 터미널에서 Ctrl + C를 누르시면 됩니다. 

---

 

 

프로젝트 실행 기념으로 App.js 파일을 살짝 열어서 감상 합니다.

 

 

 

 

참고사항

create-react-app은 React 개발에 필요한 모든 설정(웹팩, 바벨, ESLint 등)을 자동으로 구성해주는 도구입니다.
생성된 프로젝트 구조는 src 폴더에 소스 코드, public 폴더에 정적 파일이 위치합니다.
package.json 파일에서 프로젝트 의존성과 스크립트를 확인하실 수 있습니다.
이제 VS Code에서 React 개발을 시작할 수 있습니다!

 

 

 

참조 : react new project building - VS Code에서 React 프로젝트 생성하기