리액트 프로젝트 생성 및 개발 환경설정

Create a React project and set up the development environment

---

리액트 프로젝트를 vscode에서 진행을 하는 것을 보여드릴게요. 우선 리액트 실행하기 전에 Node.js 필요해야 하니 설치를 진행하세요. 설치 후 관리자 모드 명령 프롬프트 창에서 "node -v"를 작성해서 버전을 확인해주세요.

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

설치하셨으면 리액트 프로젝트를 생성해야 하는데 vite 이용해서 빠르게 생성해보도록 할게요.

npm create vite@latest project-app --template react
▫ npm create vite@latest → 최신 Vite 프로젝트를 생성
▫ app → 프로젝트 폴더명 (원하는 이름으로 변경 가능)
▫ --template react → React 템플릿을 사용하여 프로젝트 생성

생성을 다 하셨다면 vscode 터미널 창에서 생성한 프로젝트 폴더로 가서 패키지 설치와 개발 서버 실행을 해주세요. 실행을 하고 터미널 창에 url 주소 클릭하면 브라우저에 실행이 되는 걸 볼 수 있습니다. 아주 간단하죠??

cd my-app
npm install
npm run dev

터미널 창 위치