React.js на русском языке. Часть вторая

Перевод официальной документации библиотеки React.js ^[1] на русском языке.

Оглавление:

1 — Часть первая ^[2]
2 — Часть вторая

Внедрение JSX

Ознакомьтесь с этим объявлением переменных:

const element = <h1>Hello, world!</h1>;

Этот забавный синтаксис тега не представляет собой ни строку, ни HTML. Он называется JSX и представляет собой расширение языка в JavaScript. Мы рекомендуем использовать его при работе с React, чтобы описать как должен выглядеть UI. JSX может напоминать вам HTML разметку, но он полноценно работает в JavaScript.

JSX производит «элементы» React. В следующем разделе мы будем изучать их.

Внедрение выражений в JSX

Вы можете вставить любой JavaScript-код в JSX, завернув его в фигурные скобки. Например, 2 + 2, user.name, и formatName(user) все эти выражения допустимы:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Повторите данный пример в CodePen ^[3].

Мы завернули JSX в скобки и разделили его на несколько строк для удобного чтения. Это также помогает избежать ошибочной автоматической вставки точки с запятой.

JSX это тоже выражение

После компиляции JSX выражения становятся постоянными объектами JavaScript. Это значит, что вы можете использовать JSX внутри выражений if и циклов for, назначать их переменными, принимать как аргументы, и возвращать их из функций:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

Определение атрибутов с JSX

Вы можете использовать кавычки для определения шаблонных строк в качестве атрибутов.

const element = <div tabIndex="0"></div>;

Вы также можете использовать фигурные скобки для размещения JavaScript выражения в атрибуте:

const element = <img src={user.avatarUrl}></img>;

Определение дочерних модулей с JSX

Если тег пустой, вы можете сразу закрыть его /> как XML:

const element = <img src={user.avatarUrl} />;

JSX теги могут содержать дочерние модули:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

Нюанс:

Так как JSX ближе к JavaScript, чем HTML, React DOM использует наименования camelCase, а не имена атрибутов HTML.

Например, class становится className в JSX, а tabindex становится tabIndex.

JSX предотвращает атаки

Размещение пользовательского ввода в JSX безопасно:

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

React DOM по умолчанию избегает любых элементов, заложенных в JSX перед их обработкой.

JSX представляет собой объекты

Babel компилирует JSX к React.createElement() сигналам. Эти два примера идентичны:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() выполняет несколько проверок чтобы помочь написать код без каких-либо багов, но, по сути, он создает следующий объект:

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

Такие объекты называются «Объекты React». Их можно представить как описания того, что вы хотите видеть на экране. React читает эти объекты и использует их чтобы построить DOM и постоянно обновлять его.

Мы будем изучать обработку элементов React в DOM в следующем разделе.

Совет:

Рекомендуем вам найти схему синтаксиса Babel ^[4] для вашего редактора, чтобы ES6 и JSX код работал правильно.

Автор: html_manpro

Источник ^[5]