DEV Community

Cover image for Installing React with Vite
Ahmad Jamaly Rabib
Ahmad Jamaly Rabib

Posted on • Edited on

2

Installing React with Vite

From the React Official Documentation I came to know that we have to use React frameworks like Next.js, Remix, Gatsby etc.

Also the create-react-app is no longer valid if we want to create a React app. 😞

From React's official documentation

You can definitely use React without a framework—that’s how you’d use React for a part of your page. However, if you’re building a new app or a site fully with React, we recommend using a framework.

But as a beginner I want to explore only the React library. That's why I need to install React in my local. To acheive this we can use bundler tools like Vite.

So let's start with the installation. 🤗😁
Let's first install Node.js. Then Let's scaffold our first Vite project for React.

With NPM:

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

With Yarn:

yarn create vite
Enter fullscreen mode Exit fullscreen mode

After enter there will be prompt to proceed. Next steps will be:

  • Enter Project name: … myreactapp
  • Select a framework: › React
  • Select a variant: › JavaScript + SWC

There will be several options to select which Framework/library/Language to select. We can select by moving the arrow keys.

After this the our react application will be created. In this case my React app name is myreactapp.

Now after all this We just have to

  cd myreactapp
  npm install
  npm run dev
Enter fullscreen mode Exit fullscreen mode

Our react app will be ready and running.

Running React App

Now let's open the URL http://localhost:5174/ in browser and see our created React app is running.

React App in browser

It is really great how Vite has made the steps really easy to install and scaffold any library. I have became a fan of Vite. I will try to go through the documentation of Vite later. 🙌

I will dive into development Application from now on. 🤞
Thank you for reading 🙏 will keep posting on my learning here. Till then bye 👋😄

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay