ری‌اکت بدون JSX

برای استفاده از ری‌اکت داشتن JSX ضروری نیست. استفاده از ری‌اکت بدون JSX زمانی مناسب است که شما نمی‌خواهید در محیط ساخت، از کامپایل استفاده کنید.

هر المان JSX یک syntactic sugar برای فراخوانی React.createElement(component, props, …children) است. در نتیجه هر کاری که با JSX انجام می‌دهید، قابل انجام با جاوا اسکریپت ساده نیز هست.

برای مثال این کد با JSX نوشته شده است:

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

می‌تواند در این کد که از JSX استفاده نکرده کامپایل شود:

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

اگر کنجکاو هستید که مثال‌های بیشتری از نحوۀ تبدیل JSX به جاوا اسکریپت ببینید، می‌توانید کامپایلر آنلاین Babel را امتحان کنید.

کامپوننت می‌تواند به صورت یک رشته، یا یک subclass از React.Component و یا یک تابع ساده برای کامپوننت‌های بدون حالت فراهم شود.

اگر از تایپ زیاد React.createElement خسته شده‌اید، یک الگوی رایج، اختصاص دادن خلاصه نویسی است:

const e = React.createElement;

ReactDOM.render(
  e('div', null, 'Hello World'),
  document.getElementById('root')
);

اگر از این فرم خلاصه نویسی برای React.createElement استفاده می‌کنید، تقریبا می‌تواند مناسب باشد که از ری‌اکت بدون JSX استفاده کنید.

به عنوان یک راه جایگزین، می‌توانید به پروژه‌های عمومی مانند react-hyperscript و hyperscript-helpers که سینتکس مختصر و مفیدی را ارائه می‌دهند، ارجاع دهید.

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 4٫67 out of 5)
Loading...
counter customizable free hit