Paano Mag-set Up ng React App Gamit ang Vite

Ang mga mambabasang tulad mo ay tumutulong sa pagsuporta sa MUO. Kapag bumili ka gamit ang mga link sa aming site, maaari kaming makakuha ng isang affiliate na komisyon. Magbasa pa.

Kapag nagsisimula ng bagong proyekto ng React, maraming developer ang bumaling gumawa-react-app bilang kanilang go-to command tool para sa pag-setup at pagsasaayos ng proyekto. Gayunpaman, ang Vite ay isang mas mahusay na alternatibo. Nag-aalok ito ng mas mabilis na mga oras ng pag-unlad at mas mahusay na pagganap.

Ano ang Vite?

Ang Vite ay isang build tool at development server na idinisenyo upang mapabuti ang proseso ng pagbuo ng mga modernong web application. Ginagawa ito sa pamamagitan ng paghahati ng iyong mga module ng application sa mga dependency at source code. Ang mga dependency ay mga module na hindi madalas na nagbabago, habang ang source code ay karaniwang madalas na na-edit sa panahon ng pagbuo.

kung paano mag-post sa instagram mula sa mac chrome

MAKEUSEOF VIDEO OF THE DAY MAG-SCROLL PARA MAGPATULOY SA NILALAMAN

Ginagamit ng Vite esbuild , isang Go-based na bundler na mas mabilis kaysa sa tradisyonal na JavaScript-based na mga bundler upang pabilisin ang proseso ng pagbuo para sa source code. Pre-bundle din nito ang mga dependency ng iyong application at inihahatid ang source code sa katutubong ESM, na nagpapahintulot sa mga browser na i-optimize ang paglo-load ng mga module para sa mas mahusay at mas mabilis na pagganap ng application. Pagdating ng oras para i-deploy ang iyong application sa produksyon, may built-in na build command ang Vite na awtomatikong ino-optimize ang iyong app para sa pag-deploy, na tinitiyak na tumatakbo nang maayos ang iyong application.

Paglikha ng Vite Project

Bago gumawa ng Vite project, tandaan na kailangan ng Vite ang Node.js na bersyon 14.18+ o 16+. Maaari kang sumangguni sa mga artikulong ito upang i-install ang Node sa iyong Windows o Ubuntu machine.

Paano i-install ang Node.js sa Windows .
Matuto paano i-install ang Npm at Node.js sa Ubuntu

Gumawa ng Vite project sa pamamagitan ng pagpapatakbo ng command na ito sa terminal.

mga laro upang i-play sa telepono

 npm create vite@latest

Sa sandaling magsimulang isagawa ang command, ipo-prompt ka para sa isang pangalan ng proyekto. I-type ang pangalan ng iyong proyekto at i-click ang enter.

Susunod, ipo-prompt ka ni Vite na pumili ng isang framework. Piliin ang React.

Hihilingin din sa iyo ng Vite na pumili ng isang variant. Piliin ang JavaScript.

Terminal na nagpapakita ng mga opsyon sa Vite para sa paggawa ng React app

Kapag nakumpleto ni Vite ang scaffolding ng proyekto, i-navigate ang direktoryo na nilikha nito, at i-install ang mga dependency sa pamamagitan ng npm.

 npm install

Upang patakbuhin ang proyekto, gamitin ang command na ito:

 npm run dev

Ito dapat ang home page.

tema ng aero glass para sa windows 10

Homepage ng isang React app na ginawa gamit ang Vite

Maaari mong simulan ang pag-edit ng iyong proyekto at ang iyong mga pagbabago ay makikita sa browser.

Gamitin ang Vite para sa Mabilis na Bilis ng Pag-unlad

Ang CRA (create-react-app) ay karaniwang ang default na tool para sa pag-set up ng istraktura ng proyekto at configuration para sa isang React na application. Maginhawa ito dahil naka-set up ang lahat para sa iyo, ngunit maaari itong maging mabagal sa pagbuo at pag-reload sa panahon ng pag-develop.

Ang Vite, sa kabilang banda, ay gumagamit ng mga native na ES module sa browser upang magbigay ng mas mabilis na oras ng pagbuo. Kung hindi mo gustong gamitin ang Vite, maaari kang pumili ng isang React meta framework tulad ng Next.js dahil idinisenyo din ito upang maging mahusay na gumaganap.