# 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