DEV Community

Cover image for React + Vite quick start
Ai
Ai

Posted on • Edited on

React + Vite quick start

#react #vite

I convinced my class at Tech Talent South to use Vite instead of create-react-app. These are some notes I wrote to help my instructor, TA, and classmates start using Vite.

Single command quick start (Windows)

(These instructions may work for non-Windows computers, but it didn't work for at least one of my classmates who used Linux. You can always look at the official Vite documentation for more details.)

Run

npm init vite@latest my-vue-app -- --template react
Enter fullscreen mode Exit fullscreen mode

Navigate to your project and install dependencies via

cd my-vue-app
npm i
Enter fullscreen mode Exit fullscreen mode

Run your app with

npm run dev
Enter fullscreen mode Exit fullscreen mode

For more info, check out the docs or Evan You's 14 minute demo video.

Multiple command quick start

Run

npm init vite@latest
Enter fullscreen mode Exit fullscreen mode

and select the options you want.

Links

๐Ÿ“ Docs

๐ŸŽฅ Demo video

๐Ÿ‘ฅ Why ES modules?

Notes

๐Ÿ‘€Replacing create-react-app with Vite๐Ÿ‘€

Tips:

  • Use .jsx files instead of .js files unless you're writing pure JavaScript.

Banner source: ๐ŸŽฅ ใใ‚…ใ†ใใ‚‰ใ‚Šใ‚“ / ใ„ใ‚ˆใ‚ feat.ๅฏไธ๏ผˆKyu-kurarin / Iyowa feat.Kafu๏ผ‰

Article source: ๐Ÿ™๐Ÿฑ Ai-Yukino/dev.to

Top comments (1)

Collapse
 
j_xvw_a057242433886efa1c7 profile image
J XVW •

damn moving to vite.js + react a lot of problems and incompatibilities