От автора: в React JS JSX используется для шаблонов вместо обычного JavaScript. Строгой необходимости в его использовании нет, однако ниже приведены некоторые преимущества, которые это дает.
Он быстрее, потому что выполняет оптимизацию при компиляции кода в JavaScript.
Он также предлагает безопасность типов, большинство ошибок могут быть обнаружены во время компиляции.
JSX упрощает и ускоряет запись шаблонов, если вы знакомы с HTML.
Использование JSX
В большинстве случаев JSX выглядит как обычный HTML. Мы уже использовали его в главе «Настройка среды». Посмотрите на код из App.jsx, где мы возвращаем div.
App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React from 'react'; class App extends React.Component { render() { return ( <div> Hello World!!! </div> ); } } export default App; |
Несмотря на то, что он похож на HTML, есть несколько вещей, которые вам нужно иметь в виду при работе с JSX.
Вложенные элементы
Если мы хотим вернуть другие элементы, нам нужно обернуть их в один элемент контейнера. Обратите внимание, как мы используем div в качестве оболочки для элементов h1, h2 и p.
App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React from 'react'; class App extends React.Component { render() { return ( <div> <h1>Header</h1> <h2>Content</h2> <p>This is the content!!!</p> </div> ); } } export default App; |
Атрибуты
Мы можем использовать собственные атрибуты в дополнение к стандартным свойствам и атрибутам HTML. Когда мы хотим добавить пользовательский атрибут, нам нужно использовать префикс data. В следующем примере мы добавили data-myattribute в качестве атрибута элемента p.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React from 'react'; class App extends React.Component { render() { return ( <div> <h1>Header</h1> <h2>Content</h2> <p data-myattribute = "somevalue">This is the content!!!</p> </div> ); } } export default App; |
Выражения JavaScript
Выражения JavaScript могут использоваться внутри JSX. Нам просто нужно обернуть их в фигурные скобки {}. Следующий код выводит 2.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React from 'react'; class App extends React.Component { render() { return ( <div> <h1>{1+1}</h1> </div> ); } } export default App; |
Мы не можем использовать в JSX if else, вместо этого мы можем использовать условные (троичные) выражения. В следующем примере переменная i равна 1, поэтому браузер отображает true. Если мы изменим ее на какое-то другое значение, будет отображено false.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; class App extends React.Component { render() { var i = 1; return ( <div> <h1>{i == 1 ? 'True!' : 'False'}</h1> </div> ); } } export default App; |
Стили
React рекомендует использовать встроенные стили. Когда мы хотим установить встроенные стили, нам нужно использовать синтаксис camelCase. React также автоматически добавит px после значения числа для определенных элементов. В следующем примере показано, как добавить встроенный стиль myStyle для элемента h1.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import React from 'react'; class App extends React.Component { render() { var myStyle = { fontSize: 100, color: '#FF0000' } return ( <div> <h1 style = {myStyle}>Header</h1> </div> ); } } export default App; |
Comments
При написании комментариев нам нужно поместить их фигурные скобки {}, когда мы хотим написать комментарий в дочерней части тега. Рекомендуется всегда использовать {} при написании комментариев, так как мы сохраняем последовательность при написании приложения.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React from 'react'; class App extends React.Component { render() { return ( <div> <h1>Header</h1> {//Конец однострочного комментария...} {/*Многострочный комментарий...*/} </div> ); } } export default App; |
Соглашение об именах
HTML-теги всегда используют имена тегов в нижнем регистре, тогда как компоненты React начинаются с заглавной буквы.
Примечание. Вы должны использовать className и htmlFor как имена атрибутов XML вместо class and for.
Это объясняется в официальной документации React: «Поскольку JSX — это JavaScript, идентификаторы, такие как class и for, могут ввести в заблуждение в качестве атрибутов XML. Вместо этого, компоненты DOM React ожидают имена свойств DOM, такие как className и htmlFor, соответственно».
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
