>웹 프론트엔드 >JS 튜토리얼 >Vite를 사용하여 단계별로 React 설정

Vite를 사용하여 단계별로 React 설정

Patricia Arquette
Patricia Arquette원래의
2024-10-09 14:33:021004검색

Vite는 특히 React, Vue 등과 같은 JavaScript 기반 애플리케이션에 빠르고 효율적인 개발 경험을 제공하도록 설계된 현대적인 빌드 도구입니다.

Vite 자체는 개발 과정에서 최소한의 구성과 빠른 로딩 시간으로 개발 속도에 더 중점을 둡니다. 롤업의 최적화로 인해 프로덕션 빌드 시간도 일반적으로 더 빠릅니다.

이 튜토리얼에서는 Vite와 함께 Reactjs를 설치하는 방법을 단계별로 배우게 됩니다

1단계
갖고 있는 터미널 애플리케이션을 엽니다. 여기에서는 cmder를 사용하여 애플리케이션을 설치하려는 폴더로 이동합니다

Setup React With Vite Step-by-Step

2단계
설치 프로세스를 수행하려면 "yarn" 또는 "npm"을 사용할 수 있습니다.
터미널에 다음 명령을 입력하세요.

##NPM
npm create vite@latest

##YARN
yarn create vite

실을 사용해요

위 명령을 실행하면 다음 이미지와 같이 생성하려는 애플리케이션의 이름을 입력하라는 메시지가 나타납니다

Setup React With Vite Step-by-Step

3단계
목록이 표시됩니다. 화살표 키를 사용하여 목록 위아래로 이동하고 Enter를 클릭하여 원하는 옵션을 선택하세요.
이번 단계에서는 React

를 선택하겠습니다.

Setup React With Vite Step-by-Step

3단계
선택할 수 있는 5가지 옵션이 표시됩니다.
로 이동하여 선택하세요. 여기서는 Typescript SWC를 선택하겠습니다

Setup React With Vite Step-by-Step

그게 전부입니다. 이제 Vite 프로젝트가 생겼습니다
Setup React With Vite Step-by-Step

4단계
3단계의 최종 결과에 안내된 대로 생성한 애플리케이션 폴더를 입력하라는 메시지가 표시되며, 이후 안내에 따라 명령을 실행합니다

### masuk ke folder aplikasi anda
cd react-vite

### install dependencies
yarn install

Setup React With Vite Step-by-Step

5단계
4단계의 모든 프로세스가 성공한 후 애플리케이션을 실행하려면 다음 명령을 실행해야 합니다

### npm 
npm run dev

### yarn
yarn dev

Setup React With Vite Step-by-Step

애플리케이션이 성공적으로 실행된 후, 터미널에 표시된 링크를 따라 애플리케이션에 접속할 수 있습니다

Setup React With Vite Step-by-Step


결론:
보세요, 전혀 어렵지 않고, 전체 과정이 완료되는 데 시간도 오래 걸리지 않습니다.

이제 Vitejs를 사용하여 ReactJS 애플리케이션을 설치하는 방법을 성공적으로 배웠습니다

감사합니다

위 내용은 Vite를 사용하여 단계별로 React 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.