# React Front-End — Learning Project

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

> ⚠️ This is a **learning/practice project**, not a production app. Each component is a small, self-contained demo of a specific React idea.

---

## ✨ 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.