Module 0: Environment Setup

1. Install Node.js (LTS)

Ensure you have the Long Term Support (LTS) version of Node.js installed.

node -v
# Should be v18.x.x or v20.x.x

2. Create a Vite Project

We will use TypeScript, as it is the industry standard for React development.

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install

3. Configure VS Code

Install these extensions for the best experience:

• ES7+ React/Redux/React-Native snippets (dsznajder)
• Prettier - Code formatter
• ESLint
• Tailwind CSS IntelliSense (if using Tailwind)

4. Setup Linting & Formatting

Consistency is key. We'll set up Prettier to run on save.

Create .prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Update VS Code Settings (.vscode/settings.json):

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

5. Run the App

npm run dev

Open the URL shown in the terminal (usually http://localhost:5173).