React JS для начинающих: JSX

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

react jsx

React JS для начинающих:

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

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

В большинстве случаев, JSX выглядит как обычный HTML. Мы уже работал с ним в уроке по установке React. Пример JSX кода из прошлого урока:

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}

export default App;

Несмотря на то, что он очень схож с HTML, есть несколько важных моментов которые вы должны знать при работе с JSX.

Вложенные элементы 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;

jsx вложенные элементы

Атрибуты

Вы можете использовать свои собственные атрибуты в дополнение к обычным HTML свойствам и атрибутам. Если вы хотите добавить пользовательский атрибут, используйте конструкцию data-префикс. В приведенном ниже примере мы добавили пользовательский атрибут data-myattribute к элементу р.

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 выражения в JSX

JavaScript выражения могут быть использованы внутри JSX. Необходимо просто обернуть их в фигурные скобки {}.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}

export default App;

jsx выражения

Вы не можете использовать, операторы if else внутри JSX, но вместо этого вы можете использовать тернарные выражения.

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;

jsx if else

Стилизация в JSX

React JS рекомендует использовать встроенные стили. Для этого необходимо использовать синтаксис CamelCase. React автоматически добавляет точки после числового значения в конкретных элементах. В примере ниже, мы стилизуем элемент 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;

jsx стиль

Комментарии в JSX

Комментарии должны находиться в фигурных скобках {}.

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;

Именование элементов в JSX

имена HTML-тегов пишутся всегда строчными буквами, React компоненты начинаются с заглавной.

Вы должны использовать className и htmlFor как в XML, вместо обычных class и for.

Перевод статьи ReactJS - JSX

Тэги: react.jsjsx

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.