From 0a7f889feb98665fd8b12232e08053b84e3a7076 Mon Sep 17 00:00:00 2001
From: hoelee <me@hoelee.com>
Date: Fri, 9 Aug 2024 22:02:14 +0800
Subject: [PATCH] Added README.md

---
 README.md      | 28 ++++++++++++++++++++++++++++
 src/App.tsx    |  7 +++++++
 src/Button.tsx | 13 +++++++++++++
 3 files changed, 48 insertions(+)
 create mode 100644 README.md
 create mode 100644 src/Button.tsx

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..fe2705d
--- /dev/null
+++ b/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
diff --git a/src/App.tsx b/src/App.tsx
index 0a80917..7dc8465 100644
--- a/src/App.tsx
+++ b/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>
         </>
     );
 }
diff --git a/src/Button.tsx b/src/Button.tsx
new file mode 100644
index 0000000..1a81335
--- /dev/null
+++ b/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;