React မှာ clean code ရေးဖို့အတွက် အရေးကြီးတဲ့ အချက်တွေနဲ့ နမူနာကုဒ်ကို ပြပေးပါမယ်။

1. Component တွေကို သေးသေးလေးတွေခွဲပြီး ရေးပါ:

// BadComponent.jsx
const BadComponent = () => {
  return (
    <div>
      <h1>Header</h1>
      <p>Some content</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
      <button>Click me</button>
    </div>
  );
};

// GoodComponent.jsx
const Header = () => <h1>Header</h1>;
const Content = () => <p>Some content</p>;
const List = () => (
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
);
const Button = () => <button>Click me</button>;

const GoodComponent = () => (
  <div>
    <Header />
    <Content />
    <List />
    <Button />
  </div>
);

2. Props တွေကို destructure လုပ်ပါ:

// Bad
const UserInfo = (props) => (
  <div>
    <p>{props.name}</p>
    <p>{props.age}</p>
  </div>
);

// Good
const UserInfo = ({ name, age }) => (
  <div>
    <p>{name}</p>
    <p>{age}</p>
  </div>
);

3. Default props သုံးပါ:

const Button = ({ text = 'Click me' }) => <button>{text}</button>;

4. တူညီတဲ့ logic တွေကို custom hooks ထဲထည့်ပါ:

// useCounter.js
import { useState } from 'react';

const useCounter = (initialCount = 0) => {
  const [count, setCount] = useState(initialCount);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  return { count, increment, decrement };
};

// CounterComponent.jsx
const CounterComponent = () => {
  const { count, increment, decrement } = useCounter();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
};

5. Conditional rendering အတွက် ternary operator သုံးပါ:

const UserGreeting = ({ isLoggedIn, username }) => (
  <div>
    {isLoggedIn ? <p>Welcome, {username}!</p> : <p>Please log in.</p>}
  </div>
);

ဒီနမူနာတွေက React မှာ clean code ရေးဖို့အတွက် အခြေခံကျတဲ့ နည်းလမ်းတွေပါ။ ဒါ့အပြင် linter တွေသုံးတာ၊ consistent code style သုံးတာ၊ meaningful variable names တွေသုံးတာတွေကလည်း အရေးကြီးပါတယ်။