29 lines
1.5 KiB
Markdown
29 lines
1.5 KiB
Markdown
# 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.
|
|
|
|
## 1. How to install
|
|
* npm create vite@latest (Select React Framework, TypeScript)
|
|
* npm install
|
|
* npm run dev
|
|
* npm install bootstrap@latest
|
|
|
|
## 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
|
|
|
|
## 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
|