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

Внедрение 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.

Мы завернули 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 для вашего редактора, чтобы ES6 и JSX код работал правильно.

ссылка на оригинал статьи https://habrahabr.ru/post/315630/

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

Оглавление: