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 (v16+)
npm (bundled with Node)

Install & Run

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

3.3 KiB Raw Blame History