Перевод официальной документации библиотеки React.js на русском языке.
Оглавление:
1 — Часть первая
2 — Часть вторая
3 — Часть третья
4 — Часть четвертая
5 — Часть пятая
6 — Часть шестая (скоро)
Внедрение 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 код работал правильно.
Поделиться с друзьями
Комментарии (11)
greabock
19.11.2016 14:29Вряд ли кому-то интересно, но на картинке изображен Discord
shyr1punk
19.11.2016 16:47Вряд ли кому интересно, но DiscordApp для iOS, Android написан на ReactNative
saggid
24.11.2016 11:29Возможно кому-то всё-таки будет интересно, но на Андроиде они запилить своё приложение на основе ReactNative таки не смогли:
We tried to run the app on Android too when React Native for Android came out, but unfortunately encountered some performance issues and decided to hold off. According to our lead Android dev Miguel:
Unfortunately Android devices have much greater variance in performance and tend to trail significantly behind iOS. We were able to get our app running fairly quickly, but the performance?—?specifically on touch events was not at an acceptable level even on higher end devices. In addition at that early stage there was still a lot missing in the React Native Android feature-set that would have made getting our prototype to production level more time consuming than our iOS effort.
cmdx
19.11.2016 19:16Уместно ли будет попросить кого-нибудь поставить лайк эту статье, если я сам не могу? Спасибо!
Chikey
20.11.2016 23:53+2> React DOM по умолчанию избегает любых элементов
escape = очищать / энкодить от HTML entities
lenar
21.11.2016 22:10+3Извините, но слабоватый перевод, такое ощущение, что машинный и не вычитанный. Еще пример, вдогонку к тому, что выше: «Babel compiles JSX down to React.createElement() calls» нужно перевести как «Babel компилирует JSX в вызовы React.createElement()», а не «Babel компилирует JSX к React.createElement() сигналам». По-моему, это элементарно.
Дело делаете хорошее, но как-то внимательнее надо.
Hazrat
Где нибудь после перевода собираетесь выложить документацию?
html_manpro
Весь этот цикл статей по данной теме будет в дальнейшем опубликован на github.com/AbraXabra и abraxabra.ru в более удобном виде, где весь материал будет разбит на категории и подкатегории. Об этом я обязательно дам знать в одном из следующих своих постов.