How to Set Up Node.js and React with Vite

🚀 How to Set Up Node.js and React with Vite (Simple Guide)
Starting a new project can feel like a big task, but it’s actually very easy! In this guide, we will set up Node.js and create a React app using a fast tool called Vite.

Let’s get started!

Part 1: Install Node.js
What is Node.js?
Think of Node.js as the engine that runs your code. When you install it, you also get npm. npm is like a big store where you can get free tools (libraries) for your website.

Step 1: Download
Go to nodejs.org.

Download the LTS version (this is the stable one).

Open the installer and click Next until it’s finished. You don't need to change any settings!

Step 2: Check it
Open your Terminal (Mac) or Command Prompt (Windows) and type:
node -v

If you see a number (like v20.x.x), it works!

Part 2: Create Your React App
We will use Vite. It is a modern tool that makes building websites much faster than the old ways.

Step 1: Start the Project
In your terminal, go to your Desktop:
cd Desktop

Now, run this command to start the setup:
npm create vite@latest

Follow these steps:

Project Name: Type my-react-app.

Framework: Choose React.

Variant: Choose JavaScript.

Step 2: Open the Folder
Type this to go into your new project:
cd my-react-app

Step 3: Install the Tools
Type this to download all the React files you need:
npm install

Step 4: Start the Website!
Type this to see your app:
npm run dev

Now, look at your terminal. It will give you a link (like http://localhost:5173). Open that link in your browser. Your app is running! 🥳

📂 Understanding Your Files
When you open your project in a code editor (like VS Code), look for these:

src/App.jsx: This is the main file. Change the text here, and it changes on your website!

package.json: This is just a list of the tools your project uses.

Cool Feature: When you change a word in App.jsx and hit Save, the browser updates automatically. You don't even have to refresh! This is called Hot Reloading.

💡 Quick Commands to Remember
npm run dev — Start your project for coding.

npm run build — Make your project ready for the real world.