ری‌اکت بدون JSX

برای استفاده از ری‌اکت شما نیاز به JSX ندارید.استفاده نکردن از JSX در ری‌اکت هنگامی راحت‌تر است که نیاز به راه اندازی یک محیط تولید(build environment) ندارید.

هر المنت فقط کدی (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 به جاوا اسکریپت ببینید، می‌توانید از کامپایلر آنلاین بابل استفاده کنید.

کامپوننت هم می‌توان به صورت string باشد هم به صورت یک 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 که مثال‌های دیگر را در اختیارتان می‌گذارد مراجعه نمایید.