React Starter Pack: Vite, Set, Go

If you want to start a new React project quickly and efficiently, Vite is one of the best tools out there. It’s super fast, lightweight, and easy to set up — perfect for beginners and pros alike.

In this tutorial, I’ll show you how to install React using Vite and print a simple “Hello World” on the screen.

---

Why Vite?

Before we start, here’s why I recommend Vite:

• Lightning-fast development server

• Instant hot module reload (HMR)

• Minimal configuration needed

• Supports React out of the box

---

Step 1: Create a New React Project with Vite

First, open your terminal and run:

npm create vite@latest my-react-app -- --template react

• my-react-app is the folder where your project will be created (you can change it).

• The --template react part tells Vite to set up React for you.

Alternatively, if you use Yarn:

yarn create vite my-react-app --template react

---

Step 2: Navigate to Your Project Folder

cd my-react-app

---

Step 3: Install Dependencies

Run:

npm install

Or if you use Yarn:

yarn

---

Step 4: Run the Development Server

Start your project locally by running:

npm run dev

Or

yarn dev

Open your browser and go to http://localhost:5173/ (the terminal will show you the exact URL). You should see the default React starter page.

---

Step 5: Print “Hello World”

Now, let’s change the default page to print “Hello World” instead.

Open src/App.jsx (or .js) in your code editor and replace its contents with:

function App() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  )
}

export default App

Save the file and check your browser — it should now display:

Hello World

---

Conclusion

You’ve successfully installed React with Vite and displayed a basic “Hello World” message. From here, you can start building components, handling state, and creating your React app!

---