README.md 8.18 KB

[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