ReactJS - JSX

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

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

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

• Это упрощает и ускоряет написание шаблонов, если вы знакомы с 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;

Мы не можем использовать if else операторов внутри JSX, вместо этого мы можем использовать conditional (ternary)выражения. В следующем примере переменная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;

Комментарии

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

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}
export default App;

Соглашение об именовании

HTML-теги всегда используют lowercase имена тегов, а компоненты React начинаются с Uppercase.

Note - Вам следует использовать className и htmlFor как имена атрибутов XML вместо class и for.

Это объясняется на официальной странице React как -

Поскольку JSX - это JavaScript, такие идентификаторы, как class и forне приветствуются как имена атрибутов XML. Вместо этого компоненты React DOM ожидают таких имен свойств DOM, какclassName и htmlForсоответственно.