Учебники

ReactJS — JSX

Ноябрь 4, 2018

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

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

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

  • Это облегчает и ускоряет написание шаблонов, если вы знакомы с HTML.

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

React JSX Wrapper

Атрибуты

Мы можем использовать наши собственные пользовательские атрибуты в дополнение к обычным свойствам и атрибутам HTML. Когда мы хотим добавить пользовательский атрибут, нам нужно использовать префикс данных . В следующем примере мы добавили 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 Inline Javascript

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

стайлинг

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;

React JSX Inline Style

Комментарии

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

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-теги всегда используют имена тегов в нижнем регистре , а компоненты React начинаются с Uppercase .

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

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

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

46
Share: