README.md

<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

// urlConstant.js

export const URI = "localhost:3000"
export const URL_LOGIN = URI + "/login"
// 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
}
// 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
const input1Parameter
let input2Parameter
const isValid = true
const hasChild = false
const page_name = "Home";
componentDidMount() {
    // To Do
}
onClick = (e) => {
    // Recommended
}

!!! ไม่ควรใช้ function แบบเดิม เพราะต้อง bind function เอง
function onClick(e) {
    // Not Recommended
}
_validateFromSubmit = (e) => {
    // Recommended
}

!!! ไม่ควรใช้ function แบบเดิม เพราะต้อง bind function เอง
function _validateFromSubmit(e) {
    // Not Recommended
}
import React, { Component, Fragment } from 'react';

export default class HomePage extends Component {
  render() {
    return (
      <Fragment>
        <h1>Home</h1>
      </Fragment>
    );
  }
}

import React, { Component, Fragment } from 'react';
import { Input, Icon } from 'antd';

export default class WDSUsernameTextfieldComponent extends Component {
  render() {
    return (
        <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
    );
  }
}

import React, { Component } from 'react';
import { Layout } from 'antd';

import * as EventConstants from '../../../resources/js/constants/eventConstants';

import { style } from './resources/style/jsx/footerStyle';

const { Footer } = Layout;

export default class WDSFooterTemplate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      systemFooter: ''
    };
  }

  render() {
    return <Footer style={style}>{this.state.systemFooter}</Footer>;
  }
}

import React from 'react';
import Axios from 'axios';

import Login from '../../templates/form/login/Login';

import history from '../../history';
import * as UrlConstants from '../../resources/js/constants/urlConstants';

import Logo from './resources/images/logo_login.png';

import './resources/style/css/login.css';

export default class LoginPage extends React.Component {
  _login = async params => {
    const results = await Axios.post(UrlConstants.URL_LOGIN, params);

    if (results.data.success) {
      history.push('/process');
    }
  };

  render() {
    return (
      <div className="login">
        <img src={Logo} className="login-logo" alt="logo" />
        <br />
        <br />
        <br />
        <Login getFormSubmitFn={this._login} />
      </div>
    );
  }
}
// กลุ่มของ 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';