From 966b31baca68166a28c2bcd0b06c035a68459407 Mon Sep 17 00:00:00 2001
From: hoelee <me@hoelee.com>
Date: Wed, 19 Aug 2026 20:05:46 +0800
Subject: [PATCH] Enhance README.md with project overview, setup instructions,
 and concepts guide

---
 README.md | 125 +++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 96 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index efa0b67..84e9fa3 100644
--- a/README.md
+++ b/README.md
@@ -1,33 +1,100 @@
-# React Practical From Hoelee
-This project is testing of react front-end framework, code with TypeScript. 
-Will use to demo each feature of React that is offering.
+# React Front-End — Learning Project
 
-## 1. How to install
-* npm create vite@latest (Select React Framework, TypeScript)
-* npm install
-* npm run dev
-* npm install bootstrap@latest
+A hands-on **React + TypeScript** learning project by **Hoelee**. This repo demonstrates the core React concepts one feature at a time — components, JSX, props, state, events, and rendering lists — styled with **Bootstrap 5**.
 
-## 2. Useful Shortcut
-* Bootstrap Front-end css elements copy from https://getbootstrap.com/docs
-* ```ES7+ React/Redux/React-Native snippets``` VS Code extension for shortcut
-* ```rafce``` and press ```Enter``` to get class based template
-* Google Chrome Extension ```React Developer Tools``` Debug front-end, This add New ```Components``` Tab in inspect page
-* Select multiple same words and modify all together (Useful like search & replace):
-    * Select a word first
-    * ```ctrl + d``` multiple times to select more instances of the word
-    * Type in replacement words
-    * ```Esc``` to exit multi-select mode
+> ⚠️ This is a **learning/practice project**, not a production app. Each component is a small, self-contained demo of a specific React idea.
 
-## 3. Concept Explaination
-* **./App.tsx** The root component that controls all other sub-components
-* **Listgroup** - Demo use of loops to create dropdown items
-* **Fragment** - Allows grouping multiple components and integrating them into ```App.tsx```
-* **Event** - Events can be passed as parameters from App.tsx to other components.
-* **Props** - Interfaces (like custom types) that hold various data types, making data passing between components easier
-* **Children** - Props can include ```ReactNode```, which can consist of multiple ```HTML``` elements
+---
 
-<!-- 
-Futher paid course can found here
-https://codewithmosh.com/p/ultimate-react-part1 
--->
\ No newline at end of file
+## ✨ What's Demonstrated
+
+| File | Concept |
+|------|---------|
+| `src/App.tsx` | Root component — composes every sub-component together |
+| `src/Message.tsx` | **JSX** — conditional rendering (`if/else` in JSX) |
+| `src/components/ListGroup.tsx` | **Props**, **State** (`useState`), **Events** (`onClick`), `.map()` loops, Fragment |
+| `src/Button.tsx` | **Props** with optional/union types, inline event handlers |
+| `src/Alert.tsx` | **Children** as `ReactNode` — passing rich HTML between component tags |
+| `src/main.tsx` | App entry point (`ReactDOM.createRoot` + `StrictMode`) |
+
+---
+
+## 🚀 Getting Started
+
+### Prerequisites
+- [Node.js](https://nodejs.org/) (v16+)
+- npm (bundled with Node)
+
+### Install & Run
+
+```bash
+# 1. Clone the repo
+git clone https://github.com/hoelee/react-front-end.git
+cd react-front-end
+
+# 2. Install dependencies
+npm install
+
+# 3. Start the dev server
+npm run dev
+```
+
+Then open the URL printed in the terminal (usually `http://localhost:5173`).
+
+> **Note on project creation:** this project was scaffolded with `npm create vite@latest` (React + TypeScript). To reproduce from scratch:
+>
+> ```bash
+> npm create vite@latest my-app   # choose React + TypeScript
+> npm install
+> npm run dev
+> npm install bootstrap@latest
+> ```
+
+### Available Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Start the development server (Vite) |
+| `npm run build` | Type-check (`tsc`) and build for production |
+| `npm run preview` | Preview the production build locally |
+
+---
+
+## 🛠️ Tech Stack
+
+- **React 18** — UI library
+- **TypeScript** — static typing
+- **Vite** — fast dev server & bundler
+- **Bootstrap 5** — responsive CSS components
+- **Prettier** — code formatting
+
+---
+
+## 🧰 Useful Tooling & Shortcuts
+
+- **Bootstrap** — copy front-end CSS elements from [getbootstrap.com/docs](https://getbootstrap.com/docs)
+- **ES7+ React/Redux/React-Native snippets** — VS Code extension for shortcuts
+  - Type `rafce` + `Enter` to generate a class-based component template
+- **React Developer Tools** — Chrome extension; adds a `Components` tab to DevTools for debugging React apps
+- **Multi-cursor edit** (search & replace):
+  1. Select a word
+  2. Press `Ctrl + D` repeatedly to select the next occurrence
+  3. Type the replacement
+  4. Press `Esc` to exit multi-select mode
+
+---
+
+## 📚 Concepts Covered
+
+- **JSX** — JavaScript XML syntax (`Message.tsx`)
+- **Props** — interfaces that type the data passed between components (`Button.tsx`, `ListGroup.tsx`)
+- **State** — `useState` hook to track changing values (`ListGroup.tsx`, `App.tsx`)
+- **Events** — event handlers passed as props or attached inline (`Button.tsx`)
+- **Children** — `ReactNode` lets a component wrap arbitrary HTML (`Alert.tsx`)
+- **Fragment** (`<>...</>`) — group elements without extra DOM nodes
+
+---
+
+## 📝 License
+
+This is a personal learning project. Feel free to use it as a reference.