Enhance README.md with project overview, setup instructions, and concepts guide
This commit is contained in:
@@ -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
|
||||
-->
|
||||
## ✨ 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.
|
||||
|
||||
Reference in New Issue
Block a user