React Setup Guide for macOS
In this guide, we’ll learn how to set up React 19 on a Mac using Vite — the fast and modern way to start React projects.
Let’s start step by step!
Step 1: Install Node.js
- Visit – nodejs.org
- Download the LTS version (Long Term Support)
- Complete the installation
To check if Node is installed correctly, open Terminal and type:
node -v
npm -v
This will show the version numbers of Node and NPM.
Step 2: Install VS Code (Code Editor)
- Go to – code.visualstudio.com
- Click Download for macOS
- Install the app – this is where you’ll write your React code
Step 3: Create React Project Using Vite
- Open your Terminal
- Create a folder to store your project:
mkdir tutorials
cd tutorials
Run this command to create a new React project:
npm create vite@latest
You’ll be asked a few questions:
- Project name:
react-blog
- Framework: Choose
React
- Variant: Choose
JavaScript
Now go into your project folder:
cd react-blog
Step 4: Open Project in VS Code
Type this command:
open .
It will open your project in Visual Studio Code.
Step 5: Install Required Packages
To install all the necessary files (node_modules), run:
npm install
Step 6: Run the React App
Now start the development server with:
npm run dev
Your app will open in the browser at http://localhost:5173
.
Step 7: Test If It’s Working
- Open the file:
src/App.jsx
- Replace the existing code with:
<h1>Code Step by Step</h1>
<h1>Hello React</h1>
If you see this on the browser, your setup is complete!
Now your React project is ready to go using Vite on macOS.