Vite 공식 홈페이지

vite로 React 시작하기

React와 Typescript 컴파일링 및 빌드가 가능한 빌드 도구

• node 및 npm 설치가 전제

npm으로 설치하기

가장 최신버전의 vite 설치하기

npm create vite@latest

프로젝트 명 기입

임의로 지정가능

Select a framework

리액트로 진행할 예정이기 때문에 React 선택

Select a variant

타입스크립트로 진행 예정 시에는 TypeScript + SWC 선택
단독 리액트 예정에는 Javascript + SWV 선택

해당내용 진행 시, 탐색기에 vite-project 생성!!

주의사항!

• cd [프로젝트명] 으로 루트폴더 이동 후 컴포넌트 설치 및 열기
• 최초에는 node_modules 폴더 미 생성

  npm i

해당 명령어를 통해 node_modules 폴더 생성

시작하기

npm run dev

해당 명령어를 통해 라이브서버? 실행 후 터미널에 뜨는 주소로 ctrl + 클릭

reset

• src > assets 삭제
• src > App.css & index.css 삭제
• App.jsx 내 <></> 내부 요소 삭제

자주 사용하는 컴포넌트 npm 설치 명령어 모음

• 스타일 컴포넌트

  npm install styled-components

• 리액트 라우트 돔

  npm i react-router-dom

• 스타일 리셋

  npm i styled-reset

• Bootstrap

  npm install react-bootstrap bootstrap

• 반드시 최상위 CSS에

  import 'bootstrap/dist/css/bootstrap.min.css';