Basic React JS General Guideline

Table Of Content

• ข้อมูลทั่วไป
• การใช้ Component Library
• Class Component and Functional Component
• โครงสร้างในแต่ละไฟล์
• การวางไฟล์ใน Directory
• การลง Library

General Info

• นามสกุลไฟล์จะเป็น .js หรือ .jsx
• ใช้หน้า App.js หรือ App.jsx เป็นหน้าหลักของระบบนะ จะ Import พวก CSS Library ต่าง ๆ ทำหน้านี้ได้เลย
• พยายามตั้งชื่อตัวแปรให้สื่อความหมาย และพยายามเขียนด้วย camelCase

Using Component Library

• จะใช้ Component Library ของอะไรก็ได้ ไม่ว่าจะเป็น bootstrap,bulma,... ถ้ามีที่ถนัดอยู่แล้ว แต่ถ้ายังไม่มี แนะนำให้ใช้ Tailwind CSS เพราะ โปรเจกต์ต่อไปก็จะใช้ Tailwind CSS พวกนี้จะเป็นการเขียนแบบทั่ว ๆ ไปเลย คล้าย ๆ กับเวลาเขียน HTML ธรรมดา คือ มี HTML Tag แล้วก็ Attribute ต่าง ๆ เช่นพวก className, style เช่น

  <button className="m-2 p-2 bg-red">ข้อความ</button>
  

  หรือ ถ้าอยากใช้แบบที่มีมาให้เลยแบบ Component ลองไปหาดูพวก ChakraUI, Reactstrap แต่อันนี้ต้องทำคู่กับ Bootstrap, Evergreen UI พวกนี้จะเป็นการเขียนแบบ

  <Button color="red">ข้อความ</Button>
  

Class Component and Functional Component

เขียนแบบ Functional Component หรือ แบบ Hook นะ ก็คือ React จะมีการเขียนอยู่ 2 รูปแบบคือ

Class Component

เป็นการเขียนแบบ Object Oriented ประมาณว่า

class DangerButton extends Component {
render() {
    return <Button color="red" />;
}
}

export default DangerButton;

Functional Component

หรือ State Hook เป็นตัวใหม่ของ React อยากให้ใช้ตัวนี้นะ Reference ของตัวนี้ React Official Document

function DangerButton(){
    return <Button color="red"/>;
}
export default DangerButton

Inside File Structure

• ส่วนใหญ่โครงสร้างของแต่ละไฟล์จะเป็นประมาณนี้ สมมติชื่อไฟล์ MyReactFile.js

  import React from 'react';
  import LibraryName from 'library';
  
  // ตรงนี้เป็นตัวหลักในการทำงาน คล้าย ๆ กับ Class ใน OOP
  function MyReactFile (){
      const myNumber = 1;
      let myCount = 1;
  
      function addMyCount(anotherNumber){
          myCount = myCount + anotherNumber;
      }
  
      // Return คือตัวหลักของการแสดงค่าออกไปบน HTML การเขียนค่าที่ออกไปจากตัวแปร จะเขียนโดยมี {} ครอบ
      return (
          <div>
              <label>นี่คือตัวอย่างการแสดงค่า</label>
              <h1> My Number is {myNumber}  My Count {myCount} </h1>
  
              <label>นี่คือตัวอย่างการสั่งการให้ไปดำเนินการในฟังก์ชัน</label>
              <button onClick={()=>addMyCount(3)}>บวกด้วย 3</button>
          </div>
      )
  }
  
  export default myReactFile
  

• สามารถเขียนแบบ Arrow Function ก็ได้ เช่น addMycount อาจจะเขียนเป็น

const addMyCount = (anotherNumber)=>{
    myCount = myCount + anotherNumber;
}

• เขียนเป็น Arrow Function ใหญ่ก็ได้

import React from react;
const MyReactFile = () => { ... }

export default MyReactFile;

• หรือจะเขียนเป็น export default function ก็ได้

import React from 'react';
export default function MyReactFile(){
    ...
}

Directory Structure

• พยายามอย่าอัดหลายอันเข้าในไฟล์เดียว พยายามแยกเป็น Component เอาไว้ เช่น

  • src/App.js ไม่ค่อยดีเท่าไหร่ ถ้ามันซับซ้อน

    export default function App(){
    return (
        <div>
            <div className="card">
                <div className="card-body">
                    <h1 className="title">Hello</h1>
                </div>
            </div>
    
            <div className="card">
                <div className="card-body">
                    <h1 className="title">World</h1>
                </div>
            </div>
        </div>
    )
    }
    

  • แบบนี้จะดีกว่า src/TitleCard.js

    export default function TitleCard({word}){
    return (
         <div className="card">
                <div className="card-body">
                    <h1 className="title">Hello</h1>
                </div>
            </div>
    )
    }
    

    src/App.js

    import TitleCard from './TitleCard'
    export default function App(){
        return(
            <div>
            <TitleCard word="Hello">
            <TitleCard word="World">
        </div>
        )
    
    }
    

  • แบบนี้จะดีกว่ามาก ๆ src/Components/TitleCard.js

    export default function TitleCard({word}){
        return (
         <div className="card">
                <div className="card-body">
                    <h1 className="title">Hello</h1>
                </div>
            </div>
        )
    }
    

    src/App.js

    import TitleCard from './Components/TitleCard'
    export default function App(){
        return(
        <div>
            <TitleCard word="Hello">
            <TitleCard word="World">
        </div>
        )
    
    }
    

• พยายามจัดโค้ดด้วยนะ อาจจะลง Plugin อย่าง Prettier หรือ Beautify ใน Editor ไว้ช่วยก็ได้ มันจะจัดการให้

• React จะใช้หลักการสร้างเป็น Component แล้วโยนกันแบบนี้แหละ สิ่งที่โยนลงไป เราเรียกว่า props ลองอ่านหลักการของมันจากตรงนี้ React Components and Props

Using Library

• กรณีโค้ดของเราซับซ้อน หรือ การทำงานบางอย่างมันอาจจะเขียนยากหรือใช้พลัง สามารถไปหา Library ได้ โดยมันจะอยู่ใน Node Package Manager หรือ npm ซึ่งไปดูได้ที่ www.npmjs.com ในการลง Library แต่ละตัวจะบอกวิธีการอยู่แล้ว ใช้วิธีเปิด Console ขึ้นมาใน Project Directory/Folder แล้ว ลงโดยใช้

  npm install --save libraryName
  

  การทำอย่างนี้จะทำให้ระบบมันเก็บข้อมุลไว้ในไฟล์ package.json เวลาเราลง Library มันจะดาวน์โหลดไฟล์ไว้ในโฟลเดอร์ node_modules ซึ่งมันจะหนักมาก เวลาเราจะอัพขึ้นไปบน Git หรือ เราจะ Copy Code ไปไหน เราจะไม่เอาไป โดยใน Git เราจะใส่ไว้ในไฟล์ .gitignore เพื่อไม่ให้มันไปด้วย แต่เราจะมีข้อมูลอยู่ในไฟล์ package.json ดังนั้น เมื่อเราไปรันเครื่องอื่น ๆ เราจะรัน

  npm install
  

  ก่อนที่เราจะเริ่มเปิด Dev Server (npm start) เพื่อให้ระบบมันไปดาวน์โหลด Package ที่มันยังไม่มีลงมาก่อน

• Import Library โดยการ

  import Library from 'libraryName';
  

  โดย Library ตัวแรกคือ ชื่อที่เราจะใช้แทน Library ตัวนี้ในไฟล์เรา ส่วนใหญ่เรามักจะใช้ชื่อของ Library นั่นแหละ ส่วน LibraryName คือชื่อของมันใน NPM Registry ก็คือชื่ื่อ package ใน npm หรือ อาจจะเป็น

  import {SomeFileInLibrary} from 'libraryName';
  

  ซึ่งโดยปกติทุก ๆ Library จะมี Documents ของมัน