update doc

README.md

@@ -10,8 +10,8 @@
 |-- public/
 |-- src/
 	|-- actions/
-		|-- {action1}Action.jsx
-		|-- {action2}Action.jsx
+		|-- {action1}Action.js
+		|-- {action2}Action.js
 	|-- components/
 		|-- {group}/
 			|-- WDS{Component}Component.jsx
@@ -23,12 +23,23 @@
 						|-- {style}Style.jsx
 				|-- images/
 				|-- js/
-					|-- WDS{Component}Constant.jsx
+					|-- WDS{Component}Constants.jsx
 					|-- WDS{Component}Controller.jsx
 	|-- history/
-		|-- history.jsx
+		|-- history.js
 	|-- pages/
-		Same as Component and Template. Replace a "Component" or "Template" by "Page".
+		|-- {group}/
+			|-- WDS{Page}Page.jsx
+			|-- resources/
+				|-- styles/
+					|-- css/
+						|-- {style}.css
+					|-- jsx/
+						|-- {style}Style.jsx
+				|-- images/
+				|-- js/
+					|-- WDS{Page}Constants.jsx
+					|-- WDS{Page}Controller.jsx
 	|-- reducers/
 		|-- index.js
 		|-- {reducer}Reducer.js
@@ -41,12 +52,12 @@
 		|-- images/
 		|-- js/
 			|-- Constants/
-				|-- URLConstant.js
-				|-- {xxx}Constant.js
+				|-- URLConstants.js
+				|-- {xxx}Constants.js
 			|-- Controllers/
 				|-- {xxx}Controller.js
 			|-- Utils/
-				|-- {xxx}Util.js
+				|-- {xxx}Utils.js
 	|-- routes/
 		|-- {xxx}Routes.js
 	|-- templates/
@@ -59,7 +70,7 @@
 						|-- {style}Style.jsx
 				|-- images/
 				|-- js/
-					|-- WDS{Template}Constant.jsx
+					|-- WDS{Template}Constants.jsx
 					|-- WDS{Component}Controller.jsx
 	|-- App.jsx
 	|-- index.js
@@ -70,29 +81,241 @@
 	
 ```
 
+
+
 ## 2. Declaration
 
 ### Constant
 
 ##### Variable
 
-123
+ตัวอักษรภาษาอังกฤษตัวพิมพ์<u>ใหญ่</u> ทั้งหมด คั่นระหว่างคำด้วย "_" เช่น
+
+```javascript
+// urlConstant.js
+
+export const URI = "localhost:3000"
+export const URL_LOGIN = URI + "/login"
+```
+
+
 
 ##### Function
 
-123
+ขึ้นต้นด้วย "_" ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>เล็ก</u> 
+
+คั่นระหว่างคำด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>ใหญ่</u> เฉพาะตัวอักษรตัวแรก
+
+ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>เล็ก</u> 
+
+```javascript
+// wdsUtils.js
+
+/**
+ * @param {string} errorType
+ * @param {string} msg
+ * @description fucntion for print log
+ * @author dev_name 01/01/2100
+*/
+export const _printLog = (errorType, msg) => {
+    // TO DO
+}
+
+/**
+ * @param {string} input1
+ * @param {string} input2
+ * @return {string} 
+ * @description fucntion add number
+ * @author dev_name 01/01/2100
+*/
+export const _calculateAdd = (input1, input2) => {
+    return input1 + input2
+}
+```
+
+การเขียน JS doc
+
+```javascript
+// parameter input
+// @param เว้นวรรค ตามด้วย "{ประเภทตัวแปร}" เว้นวรรค ตามด้วย "ชื่อตัวแปร"
+@param {data type} parameter
+
+// return output
+// @return เว้นวรรค ตามด้วย "{ประเภทตัวแปร}" 
+@return {data type} 
+
+// description of function
+// @description เว้นวรรค ตามด้วยคำอธิบาย
+@description description
+
+// author dev_name date
+// @author ชื่อผู้สร้าง วัน/เดือน/ปี (ค.ศ.)
+@author dev_name 01/01/2100
+```
+
+
 
 ### Variable
 
-123
+ขึ้นต้นด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>เล็ก</u> 
+
+คั่นระหว่างคำด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>ใหญ่</u> เฉพาะตัวอักษรตัวแรก
+
+ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>เล็ก</u> 
+
+```javascript
+const input1Parameter
+let input2Parameter
+```
+
+
+
+####Boolean Variable 
+
+ขึ้นต้นด้วยคำว่า "is" หรือ "has" ตามบริบทของการใช้งาน
+
+```javascript
+const isValid = true
+const hasChild = false
+```
+
+
+
+####Local Constant Variable 
+
+ตัวอักษรภาษาอังกฤษตัวพิมพ์<u>เล็ก</u> ทั้งหมด คั่นระหว่างคำด้วย "_"
+
+```javascript
+const page_name = "Home";
+```
+
+
 
 ### Function
 
-123
+#### React Life Cycle Function
+
+ขึ้นต้นด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>เล็ก</u> 
+
+คั่นระหว่างคำด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>ใหญ่</u> เฉพาะตัวอักษรตัวแรก
+
+ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>เล็ก</u> 
+
+```javascript
+componentDidMount() {
+    // To Do
+}
+```
+
+
+
+#### Common Function
+
+ขึ้นต้นด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>เล็ก</u> 
+
+คั่นระหว่างคำด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>ใหญ่</u> เฉพาะตัวอักษรตัวแรก
+
+ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>เล็ก</u> 
+
+```javascript
+onClick = (e) => {
+    // Recommended
+}
+
+!!! ไม่ควรใช้ function แบบเดิม เพราะต้อง bind function เอง 
+function onClick(e) {
+	// Not Recommended
+}
+```
+
+
+
+#### Custom Function
+
+ขึ้นต้นด้วย "_ " ตามด้วย ตัวอักษรภาษาอังกฤษตัวพิมพ์<u>เล็ก</u> 
+
+คั่นระหว่างคำด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>ใหญ่</u> เฉพาะตัวอักษรตัวแรก
+
+ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>เล็ก</u> 
+
+```javascript
+_validateFromSubmit = (e) => {
+    // Recommended
+}
+
+!!! ไม่ควรใช้ function แบบเดิม เพราะต้อง bind function เอง 
+function _validateFromSubmit(e) {
+	// Not Recommended
+}
+```
+
+
 
 ### Class
 
-123
+```javascript
+import React, { Component, Fragment } from 'react';
+
+export default class HomePage extends Component {
+  render() {
+    return (
+      <Fragment>
+        <h1>Home</h1>
+      </Fragment>
+    );
+  }
+}
+
+```
+
+การตั้งชื่อ class 
+
+|           |      |
+| --------- | ---- |
+| Component |      |
+| Template  |      |
+| Page      |      |
+
+
+
+- Component 		
+- Template
+- Page
+
+### Import
+
+```javascript
+// กลุ่มของ Dependency Library 
+import React, { Component, Fragment } from 'react';
+import Axios from 'axios';
+import { Form, Input, Button } from 'antd';
+
+// กลุ่มของ Template
+import WDSHeaderTemplate from "../../template/common/WDSHeaderTemplate"
+import WDSFooterTemplate from "../../template/common/WDSFooterTemplate"
+
+// กลุ่มของ Component
+import WDSTextfieldComponent from "../../component/common/WDSTextfieldComponent"
+import WDSDropdownComponent from "../../component/common/WDSDropdownComponent"
+
+// กลุ่มของ Constants
+import * as UrlConstants from '../../resources/js/constants/urlConstants';
+import * as EventConstants from '../../resources/js/constants/eventConstants';
+
+// กลุ่มของ Controller
+import * as CommonController from '../../resources/js/controller/commonController';
+import { _printLog, _calculateAdd }  from '../../resources/js/controller/commonUtils';
+
+// กลุ่มของรูปภาพ
+import Logo from './resources/images/logo_login.png';
+import Icon from './resources/images/icon.png';
+
+// กลุ่มของ Style
+import { Style } from "../../resources/style/jax/wdsStyle"
+import '../../resources/style/css/style.css';
+```
+
+
 
 ## 3. Event Handling