Added README.md

README.md

@@ -0,0 +1,28 @@
+# 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

src/App.tsx

@@ -1,5 +1,6 @@
 import Alert from "./Alert";
 import Message from "./Message";
+import Button from "./Button";
 import ListGroup from "./components/ListGroup";
 
 function App() {
@@ -23,6 +24,12 @@ function App() {
                     onSelectItem={handleSelectItem}
                 />
             </div>
+            <div>
+                <Button />
+            </div>
+            <div>
+                <Message />
+            </div>
         </>
     );
 }

src/Button.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const Button = () => {
+    return (
+        <>
+            <button type="button" className="btn btn-primary">
+                Primary
+            </button>
+        </>
+    );
+};
+
+export default Button;