Use JSX Syntax

ใช้ JSX เพื่อสร้าง UI ที่อ่านง่ายและบำรุงรักษาง่าย

import React from 'react';

function HelloWorld() {
  return <div>Hello, World!</div>;
}

export default HelloWorld;

Component Naming

ตั้งชื่อคอมโพเนนต์ให้เป็น PascalCase และฟังก์ชันคอมโพเนนต์ควรมีชื่อเดียวกับไฟล์

import React from 'react';

function MyComponent() {
  return <div>My Component</div>;
}

export default MyComponent;

Functional Components and Hooks

ใช้คอมโพเนนต์ฟังก์ชันและฮุค (useState, useEffect, ฯลฯ) แทนคอมโพเนนต์คลาสถ้าเป็นไปได้

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Prop Types and Default Props

ใช้ PropTypes และ DefaultProps เพื่อกำหนดประเภทของ props และค่าเริ่มต้นสำหรับคอมโพเนนต์

import React from 'react';
import PropTypes from 'prop-types';

function Greeting({ name }) {
  return <div>Hello, {name}!</div>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

Greeting.defaultProps = {
  name: 'Guest',
};

export default Greeting;

Keys in Lists

ใช้คีย์ที่ไม่ซ้ำกันในรายการเพื่อช่วยให้ React ติดตามการเปลี่ยนแปลง

import React from 'react';

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default ItemList;

Use useEffect for Side Effects

ใช้ useEffect เพื่อจัดการ side effects เช่น การดึงข้อมูลหรือการสมัครสมาชิก

import React, { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // อาร์เรย์การพึ่งพาเป็นค่าว่างหมายความว่าจะทำงานเพียงครั้งเดียว

  return <div>{data ? `Data: ${data}` : 'Loading...'}</div>;
}

export default DataFetcher;

Avoid Inline Functions in Render

หลีกเลี่ยงการสร้างฟังก์ชันใหม่ในส่วน render() เพื่อเพิ่มประสิทธิภาพ

import React from 'react';

function MyComponent() {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return <button onClick={handleClick}>Click Me</button>;
}

export default MyComponent;

Use Controlled Components for Forms

ใช้คอมโพเนนต์ควบคุม (Controlled Components) เพื่อจัดการฟอร์ม

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted:', inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

Optimize Performance with Memoization

ใช้ React.memo และ useMemo เพื่อเพิ่มประสิทธิภาพโดยการหลีกเลี่ยงการเรนเดอร์ใหม่ที่ไม่จำเป็น

import React, { useMemo } from 'react';

const ExpensiveComponent = React.memo(({ value }) => {
  // คอมโพเนนต์ที่ใช้การคำนวณที่ใช้เวลานาน
  return <div>{value}</div>;
});

function ParentComponent() {
  const [count, setCount] = React.useState(0);

  const computedValue = useMemo(() => {
    // การคำนวณที่ใช้เวลานาน
    return count * 2;
  }, [count]);

  return (
    <div>
      <ExpensiveComponent value={computedValue} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default ParentComponent;

Keep Components Small and Focused

แบ่งคอมโพเนนต์ออกเป็นส่วนย่อยที่มีความรับผิดชอบเฉพาะเพื่อให้โค้ดอ่านง่ายและบำรุงรักษาง่าย

import React from 'react';

function Header() {
  return <header>Header Content</header>;
}

function Footer() {
  return <footer>Footer Content</footer>;
}

function MainContent() {
  return <main>Main Content</main>;
}

function Layout() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

export default Layout;