2.3 Знакомство с JSX

Рассмотрим следующее объявление:


Код
    
    const element = <h1>Hello, world!</h1>;
    

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

JSX производит React-элементы. Мы будем исследовать их отрисовку в DOM-дерево в следующем разделе. Ниже вы сможете найти основы JSX, необходимые для того, чтобы начать разрабатывать на React.


2.3.1 Почему JSX?

React учитывает тот факт, что логика отрисовки по сути связана с другой логикой пользовательского интерфейса: как обрабатываются события, как изменяется состояние со временем и как данные подготавливаются для отображения.

Вместо того, чтобы искусственно отделять технологии, помещая разметку и логику в отдельные файлы, React разделяет задачи , используя слабо связанные единицы, называемыми «компонентами», которые содержат и разметку, и логику. Мы вернемся к компонентам в следующем разделе , но если вас всё еще пока еще не устраивает помещение разметки в JS, данное обсуждение может убедить вас в обратном.

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

Итак, давайте приступим!


2.3.2 Встраиваемые выражения в JSX

Вы можете встроить любое JavaScript выражение в JSX, оборачивая его в фигурные скобки.

Например, 2 + 2, user.firstName, и 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')
    );
    

Можно поэкспериментировать с ними здесь .

Здесь мы поделили JSX на несколько линий для читабельности. Хоть это и не является обязательным, рекомендуется также оборачивать его в круглые скобки () во избежание подводных камней автоматической вставки точки с запятой


2.3.3 JSX сам является выражением

После компиляции JSX-выражения становятся регулярными JavaScript-объектами.



Это означает, что вы можете использовать JSX внутри условного оператора if и оператора цикла for, присваивать его переменным, принимать как аргумент и возвращать из функций. В общем, делать все, что и с обычным JavaScript-объектом:


Код
    
    function getGreeting(user) {
      if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
      }
      return <h1>Hello, Stranger.</h1>;
    }
    


2.3.4 Указание атрибутов с помощью JSX

Мы можем использовать двойные кавычки для указания строковых литералов как атрибутов:


Код
    
    const element = <div tabIndex="0"></div>;
    

Наравне с кавычками мы можем использовать фигурные скобки, чтобы встроить JavaScript-выражение в атрибут:


Код
    
    const element = <img src={user.avatarUrl}></img>;
    

Не вставляйте кавычки вокруг фигурных скобок, когда встраиваете JavaScript-выражение в атрибут. В противном случае JSX будет воспринимать значение атрибута как строковый литерал, а не как выражение. В одном атрибуте можно использовать либо двойные кавычки, либо фигурные скобки, но не всё вместе.


Предостережение!

Так как JSX ближе к JavaScript, чем к HTML, React DOM использует соглашение об именовании свойств в верблюжьейНотации, вместо имен HTML-атрибутов.

Например, class становится className в JSX, а tabindex становится tabIndex.


2.3.5 Указание потомков с помощью JSX

Если тег пустой, можно сразу же закрыть его с помощью /> как в XML:


Код
    
    const element = <img src={user.avatarUrl}/>;
    

Но JSX-теги могут иметь потомков:


Код
    
    const element = (
        <div>
            <h1>Hello!</h1>
            <h2>Good to see you here.</h2>
        </div>
    );
    


2.3.6 JSX предотвращает атаки инъекцией

Встраивание пользовательского ввода в JSX является безопасным:


Код
    
    const title = response.potentiallyMaliciousInput;
    // Это безопасно:
    const element = <h1>{title}</h1>;
    

По умолчанию React DOM избегает любых значений, встроенных в JSX перед их отрисовкой. Таким образом он гарантирует, что вы никогда не сможете внедрить что-либо, что не явно написано, в ваше приложение. Все преобразуется в строку, перед тем как будет отрисовано. Это помогает избежать XSS-атак .


2.3.7 JSX представляет собой JavaScript-объекты

Babel компилирует JSX в вызовы React.createElement().

Эти два примера эквивалентны:


Код
    
    const element = (
      <h1 className="greeting">
        Hello, world!
      </h1>
    );
    


Код
    
    const element = React.createElement(
      'h1',
      {className: 'greeting'},
      'Hello, world!'
    );
    

React.createElement() выполняет несколько проверок, чтобы помочь вам написать свободный от багов код, но по существу он создает объект наподобие следующего:


Код
    
    // Обратите внимание: эта структура упрощена
    const element = {
      type: 'h1',
      props: {
        className: 'greeting',
        children: 'Hello, world'
      }
    };
    

А если зайти в исходники, то этот объект будет выглядеть так:


Код
    
    var element = {
      // This tag allow us to uniquely identify this as a React Element
      $$typeof: REACT_ELEMENT_TYPE,

      // Built-in properties that belong on the element
      type: type,
      key: key,
      ref: ref,
      props: props,

      // Record the component responsible for creating this element.
      _owner: owner,
    };
    

Полный исходный код можно посмотреть здесь .

Данные объекты носят название «React-элементы». Вы можете думать о таком объекте, как об описании того, что вам необходимо увидеть на экране. React читает эти объекты, использует их для построения дерева DOM и хранит их в актуальном состоянии.

Подсказка! Рекомендуется поискать схему синтаксиса Babel для вашего редактора, чтобы и ES6 и JSX подсвечивались корректно.