React JS — JSX

От автора: в React JS JSX используется для шаблонов вместо обычного JavaScript. Строгой необходимости в его использовании нет, однако ниже приведены некоторые преимущества, которые это дает.

 

Использование JSX

В большинстве случаев JSX выглядит как обычный HTML. Мы уже использовали его в главе «Настройка среды». Посмотрите на код из App.jsx, где мы возвращаем div.

App.jsx

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

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.

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.

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.

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.

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

При написании комментариев нам нужно поместить их фигурные скобки {}, когда мы хотим написать комментарий в дочерней части тега. Рекомендуется всегда использовать {} при написании комментариев, так как мы сохраняем последовательность при написании приложения.

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, соответственно».

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.