[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

ขึ้นต้นด้วย "WDS " ตามด้วย ชื่อของ Component ที่ขึ้นต้นด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่ เฉพาะตัวอักษรตัวแรก

คั่นระหว่างคำด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่ เฉพาะตัวอักษรตัวแรก

ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก ตามด้วยคำว่า "Component"

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" />    
    );
  }
}

Class Template

ขึ้นต้นด้วย "WDS " ตามด้วย ชื่อของ Template ที่ขึ้นต้นด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่ เฉพาะตัวอักษรตัวแรก

ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก ตามด้วยคำว่า "Template"

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>;
  }
}

Class Page

ขึ้นต้นด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่ เฉพาะตัวอักษรตัวแรก

ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก ตามด้วยคำว่า "Page"

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>
    );
  }
}

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

### Event Emitter

Publish (emit)

this.props.eventEmitter.emit(actionName,data)

Subscription (on)

this.props.eventEmitter.on(actionName,listener)

#### Unsubscription (removeAllListeners)    

this.props.eventEmitter.removeListener()

4. Routing

Switch

Switch เป็นการทำ Route แบบเปลี่ยนทั้งหน้า เมื่อ url เปลี่ยนหน้าจอจะแสดงผลที่ตรงกับ path ที่ระบุไว้เพียงหน้าจอเดียว โดยเรียงลำดับการแสดงผลจากบนลงล่าง

// app.js

import React, { Component } from 'react';

import Routing from './routes/mainRoutes';

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

class App extends Component {
  render() {
    return <Routing eventEmitter={this.props.eventEmitter} />;
  }
}

export default App;

import ไฟล์ mainRoutes.js เพื่อใช้ในการกำหนดเส้นทาง App.js

// mainRoutes.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import LoginPage from '../pages/login/LoginPage';
import MainPage from '../pages/main/MainPage';

export default ({ eventEmitter }) => (
  <Switch>
    <Route exact path="/" component={LoginPage} />
    <Route path="/login" component={LoginPage} />
    <Route
      path="/process"
      render={props => <MainPage eventEmitter={eventEmitter} {...props} />}
    />
  </Switch>
);

match

match เป็นการแสดงผล component เฉพาะส่วน ซึ่งสามารถทำงานภายใต้หน้าจอหลักได้

// mainPage.jsx

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

import ContentRoutes from '../../routes/contentRoutes';

export default class MainPage extends React.Component {

  render() {
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Header/>
        <Sider/>
        <Layout>
          <Breadcrumb />

          <div className="content" style={{ margin: 10 }}>
            <ContentRoutes
              match={this.props.match}
            />
          </div>

          <Footer />
        </Layout>
      </Layout>
    );
  }
}

import ไฟล์ contentRoutes.js เพื่อใช้ในการกำหนดเส้นทาง App.js

//contentRoutes.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import Content1 from '../pages/content/Content1';
import Content2 from '../pages/content/Content2';
import Content3 from '../pages/content/Content3';
import Home from '../pages/content/Home';

export default ({ match }) => {
  return (
    <Switch>
      <Route path={`${match.url}/home`} component={Home} />
      <Route path={`${match.url}/content1`} component={Content1} />
      <Route path={`${match.url}/content2`} component={Content2} />
      <Route path={`${match.url}/content3`} component={Content3} />
    </Switch>
  );    
};

5. Calling API

#### post

ขึ้นต้นด้วยคำว่า "_request" ตามด้วย ชื่อของ API ที่ขึ้นต้นด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่ เฉพาะตัวอักษรตัวแรก

ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก ตามด้วยคำว่า "Api"

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

import Header from '../../templates/layout/header/WDSHeaderTemplate';

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

export default class MainPage extends Component {
  constructor(props) {
    super(props);
    this.state = { collapsed: false };
  }

  componentDidMount() {
    this._requestGetSystemInfoApi();
  }

  _requestGetSystemInfoApi = async () => {
    const params = {};
    const results = await Axios.post(UrlConstants.URL_GET_SYSTEM_INFO, params);

    if (results.data.success) {
        // TO DO
    }
  };

  render() {
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Header />
      </Layout>
    );
  }
}