101 lines
3.3 KiB
Markdown
101 lines
3.3 KiB
Markdown
# 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.
|