React JS — JSX

Разработка React JS — Настройка среды

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

 

Он быстрее, потому что выполняет оптимизацию при компиляции кода в JavaScript.

Он также предлагает безопасность типов, большинство ошибок могут быть обнаружены во время компиляции.

JSX упрощает и ускоряет запись шаблонов, если вы знакомы с HTML.

Использование 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.

Курс по Курс по RxJS (Reactive-Extensions)

Прямо сейчас посмотрите курс по RxJS!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree