How to Get Started with ReactJS: A Guide to create-react-app and vite

Explore the essentials of ReactJS development with a step-by-step guide on `create-react-app` and `vite` for a streamlined coding experience.

How to Get Started with ReactJS: A Guide to create-react-app and vite
Photo by Lautaro Andreani / Unsplash

If you're a React enthusiast or a newcomer eager to dip your toes into the world of React web development, create-react-app (CRA) and vite are two tools you need to know about.

A Quick Tour:

Create-React-App (CRA):

  • Originated by the React creaters themselves, CRA is the golden ticket for React beginers.
  • Offers a full suite:
  • Development server.
  • Code transformation with Babel.
  • Webpack bundling.
  • Pre-configured linting/testing.


  • Named after the French word for "fast", Vite is known for it's speed.
  • Versatile enough for React, Vue, and Svelte.
  • Offers
  • Native ES modules.
  • Integration with Rollup for production.
  • Ultra-speedy hot module replacements.

React app with create-react-app:

npx create-react-app my-app
cd my-app
npm start

Once done, you can access your app in browser via  http://localhost:3000. Any change in your code will instantly refkect here.

React app with Vite:

npm init @vitejs/app my-app --template react
cd my-app
npm install
npm run dev

Going Live with create-react-app:

npm run build

After this, you'll find a ready-to-deploy build directory.

Going Live with Vite:

npm run build

Vite creates a dist folder, containing deployment ready artefacts.

Nuggets of Wisdom:

Dev Delights: Both CRA and Vite excel in offering delightful development experiences. While CRA harnesses Webpack's Hot Module Replacement for prompt updates, Vite promises and delivers on-the-spot changes.

Deployment Dynamics: On the deployment front, both tools produce lean, minified, and speed-optimized code. With Vite's incorporation of Rollup, it possibly edges out slightly in build times.

🌟 Your voice matters! Dive into the conversation below and share your thoughts. Let's co-create this journey with your valuable insights. Comment now! 🚀