[TOC]
React Redux WDS Co., Ltd. Standard
1. Structural Project
<Project Name>/
|-- node_modules
|-- public/
|-- src/
|-- actions/
|-- {action1}Action.js
|-- {action2}Action.js
|-- components/
|-- {group}/
|-- WDS{Component}Component.jsx
|-- resources/
|-- styles/
|-- css/
|-- {style}.css
|-- jsx/
|-- {style}Style.jsx
|-- images/
|-- js/
|-- WDS{Component}Constants.jsx
|-- WDS{Component}Controller.jsx
|-- history/
|-- history.js
|-- pages/
|-- {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
|-- resources/
|-- styles/
|-- css/
|-- {style}.css
|-- jsx/
|-- {style}Style.jsx
|-- images/
|-- js/
|-- Constants/
|-- URLConstants.js
|-- {xxx}Constants.js
|-- Controllers/
|-- {xxx}Controller.js
|-- Utils/
|-- {xxx}Utils.js
|-- routes/
|-- {xxx}Routes.js
|-- templates/
|-- WDS{Template}Template.jsx
|-- resources/
|-- styles/
|-- css/
|-- {style}.css
|-- jsx/
|-- {style}Style.jsx
|-- images/
|-- js/
|-- WDS{Template}Constants.jsx
|-- WDS{Component}Controller.jsx
|-- App.jsx
|-- index.js
|-- package.json
|-- README.md
|-- .prettierrc
|-- yarn.lock
2. Declaration
Constant
Variable
ตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่ ทั้งหมด คั่นระหว่างคำด้วย "_" เช่น
// urlConstant.js
export const URI = "localhost:3000"
export const URL_LOGIN = URI + "/login"
Function
ขึ้นต้นด้วย "_" ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก
คั่นระหว่างคำด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่ เฉพาะตัวอักษรตัวแรก
ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก
// 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
// 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
ขึ้นต้นด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก
คั่นระหว่างคำด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่ เฉพาะตัวอักษรตัวแรก
ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก
const input1Parameter
let input2Parameter
####Boolean Variable
ขึ้นต้นด้วยคำว่า "is" หรือ "has" ตามบริบทของการใช้งาน
const isValid = true
const hasChild = false
####Local Constant Variable
ตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก ทั้งหมด คั่นระหว่างคำด้วย "_"
const page_name = "Home";
Function
React Life Cycle Function
ขึ้นต้นด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก
คั่นระหว่างคำด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่ เฉพาะตัวอักษรตัวแรก
ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก
componentDidMount() {
// To Do
}
Common Function
ขึ้นต้นด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก
คั่นระหว่างคำด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่ เฉพาะตัวอักษรตัวแรก
ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก
onClick = (e) => {
// Recommended
}
!!! ไม่ควรใช้ function แบบเดิม เพราะต้อง bind function เอง
function onClick(e) {
// Not Recommended
}
Custom Function
ขึ้นต้นด้วย "_ " ตามด้วย ตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก
คั่นระหว่างคำด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่ เฉพาะตัวอักษรตัวแรก
ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก
_validateFromSubmit = (e) => {
// Recommended
}
!!! ไม่ควรใช้ function แบบเดิม เพราะต้อง bind function เอง
function _validateFromSubmit(e) {
// Not Recommended
}
Class
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
// กลุ่มของ 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
Test
4. Routing
route
5. Calling API
call
6. Default Component Property & Behavior
default