Interview Strike: React & .NET Interview Prep

Forms are where users talk to your app . In this part we’ll build elegant, accessible, type-safe forms using React Hook Form (RHF) and Zod for schema validation. 🎯 Goals Typed schemas with Zod → auto‑inferred TS types (always in sync) RHF + zodResolver for instant, user‑friendly validation Reusable Input that shows errors + accessibility labels Field Arrays (subtasks), default values, reset, watch Async validation & Axios submission with error handling We’ll implement an Add/Edit Task form for TaskTimer. 0) Install (if you haven’t already) pnpm add react-hook-form zod @hookform/resolvers axios 1) Define a Zod schema (single source of truth) // src/features/forms/schemas.ts import { z } from 'zod'; // Zod schema describes shape + validation export const taskSchema = z.object({ title: z .string() .min(3, 'Title must be at least 3 characters') .max(50, 'Title must be 50 characters or less'), notes: z .string() ...

Now that we have state and components, let’s connect everything with navigation . Most apps aren’t a single page—they have multiple views (Home, Tasks, Settings). We’ll set up React Router with TypeScript and keep it beginner-friendly. 🎯 What we’ll build A layout with a nav and nested routes Static & dynamic routes (e.g., /tasks/:id ) Lazy-loaded pages (faster first load) 404 Not Found page A protected route pattern for authenticated pages Type-safe helpers for links 1) Install pnpm add react-router-dom React Router ships its own TypeScript types; no extra @types needed. 2) Folder plan src/ app/ AppRouter.tsx # router config Layout.tsx # shared layout (nav + <Outlet/>) pages/ home/Home.tsx tasks/Tasks.tsx tasks/TaskDetails.tsx settings/Settings.tsx auth/Login.tsx errors/NotFound.tsx 3) Layout with <Outlet /> (shared UI) // src/app/Layout.tsx import { NavLink, Outlet } from 'react-router-d...

 State is the memory of your components. In this part, we’ll: Learn when to use useState vs useReducer . Build typed reducers . Create custom hooks for reusable state logic. 🎯 1. Recap: useState You already know useState holds a single value: import { useState } from 'react'; export function Counter() { // count: number, setCount: function to update it const [count, setCount] = useState(0); // inferred as number return ( <div> <p>Count: {count}</p> {/* onClick updates state */} <button onClick={() => setCount(count + 1)}>+</button> </div> ); } 👉 Perfect for simple local state . 🎯 2. When to use useReducer If state has multiple fields or complex updates, useReducer is better. Example: a Task object. // Define a Task type type Task = { id: string; title: string; done: boolean }; // State is an array of tasks type State = Task[]; // Define all possible actions type Action = | { t...

Reusable components are the building blocks of every React app. Instead of rewriting the same HTML over and over, we’ll build beautiful, typed, reusable components . By the end, you’ll: Understand how to create typed props for UI elements. Use generics for flexible components. Apply the compound component pattern for advanced flexibility. 🎯 1. Why Reusable Components? Imagine you need 20 buttons across your app. Instead of copy-pasting <button> with styles, you: Create a single Button component . Style it once. Add props for variations (primary, secondary, etc.). Reuse it everywhere with type safety. 🧩 2. Reusable Button Component // src/components/ui/Button.tsx import { ButtonHTMLAttributes } from 'react'; import clsx from 'clsx'; // Define the variants our button can take type ButtonVariant = 'primary' | 'secondary' | 'danger'; type ButtonProps = { variant?: ButtonVariant; // style variant isLoading?: boolea...

 Welcome! In this part we go slow and explain every concept you’ll touch daily in React + TypeScript. Every snippet has inline comments so you can copy, run, and learn. 0) How TypeScript helps in React Types = contracts between pieces of code (components, hooks, functions). TS is structural : if it looks like the type (has the right shape), it’s acceptable. Prefer inference (let TS figure it out) and add explicit types when needed (nulls, unions, generics). Tip: Keep your editor’s TypeScript server running; errors are your friend during learning. 1) Typing Props (required, optional, default values, unions) Props are just an object type that your component accepts. // src/components/Greeting.tsx // "type" and "interface" are equivalent for most component props. Pick one and be consistent. type GreetingProps = { name: string; // required prop age?: number; // optional prop (may be undefined) excited?: boolean; // optiona...

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 in...

👉 Audience: .NET & JavaScript devs who want to build production-grade React apps with TypeScript 👉 Style: 100% practical, incremental project → we’ll build TaskTimer (a task manager + Pomodoro timer) 👉 Focus: Strong TypeScript types , best practices , testing , performance , and deployment 📚 Series Roadmap (22 Action-Packed Parts) Each part builds on the last — you’ll end with a polished, production-ready React app. 🔹 1. Kickoff & Project Setup Vite + TypeScript from scratch Strict TS, ESLint/Prettier Absolute imports, path aliases VS Code settings for DX 🔹 2. TypeScript for React Fundamentals Props, state, events, refs — fully typed Union & discriminated unions Type narrowing in real examples 🔹 3. Reusable Components Like a Pro Button, Input, Modal (typed & reusable) Polymorphic components with generics Compound component pattern in TS 🔹 4. State Management Basics useState vs useReducer (with types) Strongly typed actions ...