🧱 Part 1 — Kickoff & Project Setup (Beginner Friendly 🚀)

Welcome to the very first step of our React + TypeScript journey! 🎉 By the end of this part, you’ll have a working React app, understand what each tool does, and even create your first typed component and custom hook. Let’s make sure we understand every little detail together.

---

✨ Why React + TypeScript?

• React → lets you build UI with reusable components.
• TypeScript → makes your code safe and predictable by adding types.
• Together → you get the best of both worlds: fast development + fewer bugs.

Think of React as the engine of your car and TypeScript as the safety system (seatbelts, airbags, sensors). You can drive without them, but why take the risk? 😉

---

⚡ Step 1: Create a New Project with Vite

Vite is a modern, super-fast build tool that sets up your React app in seconds.

Run these commands:

# Create a new app using Vite’s React + TS template
pnpm create vite@latest tasktimer --template react-ts

# Move into the folder
cd tasktimer

# Install dependencies
pnpm install

# Start the app
pnpm dev

👉 Open http://localhost:5173 — you should see a starter page. That’s your first React + TS app running!

---

🔍 Step 2: Understanding TypeScript in One Minute

TypeScript = JavaScript + Types.

let count: number = 5;  // ✅ count must be a number
count = "hello";        // ❌ Error: Type 'string' is not assignable to type 'number'

Types prevent silly mistakes before your code even runs. This means fewer bugs and more confidence.

---

🗂 Step 3: Organize Your Project

Here’s a clean folder structure we’ll use:

src/
  app/         # app-level setup (providers, store, router)
  components/  # reusable UI components (Button, Header, Modal)
  features/    # feature-specific code (tasks, timer)
  hooks/       # custom hooks
  lib/         # utilities (api, storage)
  styles/      # global CSS or Tailwind
  types/       # shared TypeScript types

👉 Why this matters: As apps grow, this prevents “spaghetti code.”

---

🛡 Step 4: Make TypeScript Strict

Open tsconfig.json and ensure strict checks:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitReturns": true,
    "exactOptionalPropertyTypes": true,
    "noUncheckedIndexedAccess": true
  }
}

• strict → strongest safety net.
• noImplicitReturns → all functions must return something.
• exactOptionalPropertyTypes → optional fields are handled carefully.
• noUncheckedIndexedAccess → safer array access.

---

🎨 Step 5: Add ESLint + Prettier

• ESLint → finds bugs and enforces coding rules.
• Prettier → formats code consistently.

Install:

pnpm add -D eslint prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier

👉 Together, they keep your code clean and consistent.

---

🧩 Step 6: Build Your First Component

// src/components/Header.tsx
import type { ReactNode } from 'react';

export type HeaderProps = {
  title: string;
  rightSlot?: ReactNode; // optional extra content
};

export function Header({ title, rightSlot }: HeaderProps) {
  return (
    <header style={{ padding: 16, borderBottom: '1px solid #ddd' }}>
      <h1>{title}</h1>
      {rightSlot}
    </header>
  );
}

👉 You just wrote your first typed React component!

Usage:

// src/app/App.tsx
import { Header } from '@/components/Header';

export default function App() {
  return <Header title="TaskTimer" rightSlot={<button>Login</button>} />;
}

---

🌀 Step 7: Your First Custom Hook

Hooks let us reuse logic easily.

// src/hooks/useToggle.ts
import { useState } from 'react';

export function useToggle(initial = false) {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue((v) => !v);
  return { value, toggle };
}

Usage:

import { useToggle } from '@/hooks/useToggle';

export function Demo() {
  const { value, toggle } = useToggle();
  return <button onClick={toggle}>{value ? 'ON' : 'OFF'}</button>;
}

👉 Congrats, you built your first custom hook! 🎉

---

📦 Step 8: Install Useful Libraries (Upfront)

Let’s install libraries we’ll need throughout the series:

pnpm add axios @reduxjs/toolkit react-redux @tanstack/react-query react-hook-form zod clsx dayjs react-icons
pnpm add -D @types/react-redux

• axios → API requests
• redux-toolkit + react-redux → global state
• react-query → server state
• react-hook-form + zod → forms + validation
• clsx → conditional class names
• dayjs → date/time utilities
• react-icons → ready-to-use icons

---

✅ Wrap-Up

In this first part, we:

• Learned what React, TypeScript, and Vite are.
• Created a fresh project.
• Organized folders for scalability.
• Set TypeScript to strict mode.
• Added ESLint + Prettier.
• Built our first typed component and first custom hook.
• Installed essential libraries upfront.

👉 Next: We’ll dive into TypeScript fundamentals for React (props, events, refs, unions, and more) and apply them to our TaskTimer app.