ReactJS - React без JSX

JSX не является требованием для использования React. Использование React без JSX особенно удобно, если вы не хотите настраивать компиляцию в своей среде сборки.

Каждый элемент JSX является просто синтаксическим сахаром для вызова React.createElement(component, props, ...children). Итак, все, что вы можете сделать с JSX, также можно выполнить с помощью простого JavaScript.

Например, этот код, написанный с помощью 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 преобразуется в JavaScript, вы можете попробовать онлайн-компилятор Babel. Компонент может быть предоставлен как строка, или как подкласс React.Component, или простая функция для безстоящих компонентов.

Если вы устали печатать React.createElementтак много, один общий шаблон - назначить сокращение:

const e = React.createElement;

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

Если вы используете эту сокращенную форму React.createElement, это может быть почти так же удобно использовать React без JSX. Кроме того, вы можете ссылаться на проекты сообщества, например, react-hyperscript и hyperscript-helpers которые предлагают синтаксис терминов.

0 комментариев