React 19 Tutorial Project

A hands-on learning project covering core and modern React 19 concepts, built with Vite as the development toolchain.

---

What is React?

React is a JavaScript library for building fast, interactive user interfaces. It lets you break your UI into small, reusable components and efficiently updates only the parts of the page that change, using a virtual DOM.

When to use React:

• Building single-page applications (SPAs) with dynamic content
• Projects that need reusable UI components across multiple views
• Teams that want a large ecosystem of libraries and community support
• Applications where the UI state changes frequently (dashboards, forms, real-time data)

Why use React:

• Component-based architecture keeps code organized and reusable
• One-way data flow makes bugs easier to trace
• React 19 introduces powerful new hooks (useTransition, useActionState, useFormStatus) that simplify async UI patterns
• Huge ecosystem: routing, state management, UI libraries, and more
• Backed by Meta with active, long-term maintenance

---

What is Vite?

Vite is a next-generation frontend build tool that provides an extremely fast development server using native ES modules, and bundles your production code with Rollup.

When to use Vite:

• Starting any modern React, Vue, or Svelte project
• When you want near-instant hot module replacement (HMR) during development
• Replacing slow Create React App setups

Why use Vite over Create React App:

• Cold starts and reloads are 10–100x faster
• Simple, minimal configuration out of the box
• First-class support for TypeScript, JSX, and CSS modules

---

Project Setup — Create a New React + Vite Project

Prerequisites

Make sure you have the following installed:

Tool	Version	Check Command
Node.js	v18 or higher	node -v
npm	v9 or higher	npm -v

---

Step 1 — Scaffold the Project

npm create vite@latest my-react-app

When prompted:

• Select a framework: React
• Select a variant: JavaScript (or TypeScript)

---

Step 2 — Move into the Project Folder

cd my-react-app

---

Step 3 — Install Dependencies

npm install

---

Step 4 — Start the Development Server

npm run dev

Open your browser at http://localhost:5173. The page hot-reloads on every save.

---

Step 5 — Project Structure

my-react-app/
├── public/             # Static assets served as-is
├── src/
│   ├── assets/         # Images, SVGs used in components
│   ├── App.jsx         # Root component
│   ├── App.css         # Root styles
│   ├── main.jsx        # Entry point — mounts <App /> to the DOM
│   └── index.css       # Global styles
├── index.html          # HTML shell — Vite injects the bundle here
├── vite.config.js      # Vite configuration
├── package.json        # Dependencies and scripts
└── eslint.config.js    # ESLint rules

---

Step 6 — Install Additional Libraries Used in This Project

# Bootstrap and React-Bootstrap for UI components
npm install bootstrap react-bootstrap

# Styled Components for CSS-in-JS
npm install styled-components

Import Bootstrap CSS globally in main.jsx:

import 'bootstrap/dist/css/bootstrap.min.css';

---

Available Scripts

Command	Description
npm run dev	Start development server with HMR
npm run build	Build optimized production bundle
npm run preview	Preview the production build locally
npm run lint	Run ESLint across all source files

---

Vite Plugins for React

Vite ships two official React plugins. Pick one per project:

Plugin	Transpiler	Use When
@vitejs/plugin-react	Babel	You need Babel transforms or decorators
@vitejs/plugin-react-swc	SWC	You want the fastest possible build times

Configure in vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

---

Topics Covered in This Project

Topic	File
JSX Syntax	ExplainJSX.jsx
Curly Braces in JSX	CurlyBracesUse.jsx
Props	HandleProps.jsx, StudentProps.jsx
Component Reuse	ReuseComponents.jsx
useState Hook	UseStateAndHooks.jsx, Counter.jsx
useEffect Hook	HookUseEffect.jsx, Clock.jsx
useRef Hook	UseRef.jsx
useTransition Hook	UseTransition.jsx
useFormStatus Hook	UseFormStatus.jsx
useActionState Hook	UseActionStateHook.jsx
Derived State	DerivedState.jsx
Click Events	ClickEventFunction.jsx
Conditional Rendering	ToggleOrHideAndShow.jsx, MultipleCondition.jsx
Loops / Lists	LoopinArrayMapFunction.jsx, NestedLoop.jsx
Forms — Controlled	ControlledComponent.jsx
Forms — Uncontrolled	UnControlledComponent.jsx
Input Fields	InputField.jsx
Checkboxes	Checkboxs.jsx
Radio Buttons	RadioButton.jsx
Inline CSS	InlineStyleCSS.jsx
Dynamic Inline Styles	DynamicConditionalInlineStyle.jsx
External CSS	ExternalStyle.jsx
CSS Modules	ModuleCSS.jsx
Styled Components	StyledComponents.jsx
Bootstrap / React-Bootstrap	UseBootstrap.jsx
Context API	ContextAPI.jsx, CollegeContext.jsx, ClassContext.jsx, SubjectContext.jsx
Pass Function as Prop	PassFunction.jsx
Wrapper / Children	Wrapper.jsx
User Component	UserComponent.jsx, User.jsx

---

ESLint Configuration

This project uses the flat config format (eslint.config.js). For production apps, consider enabling TypeScript type-aware lint rules:

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

See the typescript-eslint docs for setup guidance.