React Mastery / Introduction to React

Setting up React Environment (Vite)

To work with React, you need 2 things to be installed, Node.js and a code editor of your choice. Vite is a super-fast build tool that makes working with React much quicker than traditional setups like Create React App (CRA).

🪟 For Windows & 🍎 Mac – Common Requirements

Prerequisites:

  • Install Node.js

  • A code editor (e.g., VS Code)

🛠️ Step-by-Step Setup (Same for Windows & Mac):

1️⃣ Open your terminal

  • Windows: Use Command Prompt, PowerShell, or Git Bash

  • Mac: Use the Terminal app

2️⃣ Create a new React project

There are 3 ways to create a react project in your system:

📌 Using npx (Recommended):

  • npx lets you run packages without installing them globally.

  • Command:

    npx create-react-app my-app

  • Creates a new React app in the my-app folder.

  • No need to install create-react-app globally.

  • Always uses the latest version.

📌 Using npm:

  • Requires installing create-react-app globally first.

  • Commands:

    npm install -g create-react-app
create-react-app my-app

  • Not recommended, as it might use outdated versions.

  • Takes more space and clutters global packages.

⚡ Using Vite (Faster and Modern Setup)

Run this command:

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

  • Replace my-react-app with your desired project name.

  • This sets up a lightweight, fast React project using Vite.

  • You'll be prompted to select a framework → choose React and JavaScript/TypeScript as needed.

3️⃣ Navigate into your project folder

cd my-react-app

4️⃣ Install dependencies

npm install

5️⃣ Start the development server

npm run dev

You’ll see a message like:

Local: <http://localhost:5173/>

Click the link or copy it into your browser — your React app is running! 🎉

6️⃣ Optional: Open in VS Code

code .

Make sure you have VS Code and the code command installed (for Mac users, run Shell Command: Install 'code' command in PATH from VS Code Command Palette).