react-front-end/README.md

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