DEV Community

Cover image for React + Vite quick start
Ai
Ai

Posted on • Updated on

React + Vite quick start

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

Discussion (0)