(Persian Translation of Airbnb React/JSX Style Guide)

یک رویکرد معقول برای React and JSX

این شیوه‌نامه مبتنی بر استانداردهای موجود در جاوااسکریپت است، هرچند ممکن است برخی از قراردادها (مانند async/await یا فیلدهای استاتیک در کلاس) به صورت موردی قابل قبول یا ممنوع باشند. در حال حاضر هر چیزی قبل از مرحله 3 در این راهنما توصیه نمی شود.

1. قوانین اساسی
2. تفاوت Class، React.createClass و stateless
3. Mixinها
4. نام‌گذاری
5. تعریف
6. ترازبندی
7. Quotes
8. فاصله‌گذاری
9. Propها
10. Refها
11. پرانتزها
12. تگ‌ها
13. توابع
14. مرتب‌ سازی
15. isMounted

• در هر فایل یک کامپوننت ری‌اکت داشته باشید.
  • البته, چند Stateless, یا Pure, Components در یک فایل امکان پذیر است. eslint: react/no-multi-comp.
• همیشه از سینتکس JSX استفاده کنید.
• هیچ‌وقت از React.createElement استفاده نکنید مگر آنکه برنامه را از فایلی شروع می‌کنید که JSX نیست.

• درحالتی که state یا ref یا هر دو را دارید، class extends React.Component بهتر از React.createClass است. eslint: react/prefer-es6-class react/prefer-stateless-function

  // بد
  const Listing = React.createClass({
    // ...
    render() {
      return <div>{this.state.hello}</div>;
    }
  });
  
  // خوب
  class Listing extends React.Component {
    // ...
    render() {
      return <div>{this.state.hello}</div>;
    }
  }

  و اگر state یا ref ندارید، تابع عادی (نه arrow functions) بهتر از کلاس است:

  // بد
  class Listing extends React.Component {
    render() {
      return <div>{this.props.hello}</div>;
    }
  }
  
  // بد (متکی بودن به استنتاج اسم تابع توصیه نمی‌شود) 
  const Listing = ({ hello }) => (
    <div>{hello}</div>
  );
  
  // خوب
  function Listing({ hello }) {
    return <div>{hello}</div>;
  }

• از mixinها استفاده نکنید.

چرا؟ mixinها وابستگی ضمنی ایجاد می‌کنند، باعث تلاقی اسم‌ها و پیچیدگی گلوله برفی (؟) می‌شن. بیشتر موارد استفاده از mixinها را می‌شود با روش‌های بهتری از طریق کامپونتت‌ها، higher-order کامپوننت‌ها یا ماژول‌های utility انجام داد.