10 вещей, которые вы должны знать о JSX

JSX - это язык разметки, который похож на HTML, но на самом деле является расширением синтаксиса для JavaScript. Проще писать код вместо чистого Javascript. Это позволяет разработчикам использовать синтаксис HTML для составления компонентов JavaScript. Поскольку это расширение javascript, браузер не поймет его, если вы не используете компилятор JSX, например Babel. JSX используется для создания элементов React. Он обеспечивает синтаксический сахар для функции React.createElement (component, props,… children).

JSX как переменные

Элементы JSX могут выступать в качестве значений идентификаторов. В следующем примере показано, как объявить переменную с элементом JSX в качестве значения.

const javascript = <h1 className = "heading"> Hello Javascript </h1>

За кулисами

Как JSX работает за кулисами?

Код JSX:

const javascript = <h1 className = "heading"> Hello Javascript </h1>

Компилируется в:

const javascript = React.createElement {
       type: "h1",
       props: {
           className: "heading",  
           children: "Hello Javascript",
          };
    };

Здесь мы ясно видим, что JSX компилируется в обычный объект javascript.

Выражения JavaScript как дочерние

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

<span>Sum: 2+3 = {2+3} </span>
const year = "Current year: {new Date().getFullYear()}"

Вложение в JSX

Вы можете написать несколько строк в JSX в пределах одного родительского элемента.

const name = (
        <div>
           <h1>Name one </h1>
           <h2>Name 2</h1> 
        </div>
    );

Он не будет работать,

const name = (
        <div>
           <h1>Name one </h1>
           <h2>Name 2</h1> 
        </div>
        <div>
           <h1>Name one </h1>
           <h2>Name 2</h1> 
        </div>
    );

вы должны были использовать только один родительский элемент.

теперь будет работать.

const name = (
        <div>
          <div>
             <h1>Name one </h1>
             <h2>Name 2</h1> 
          </div>
          <div>
            <h1>Name one </h1>
            <h2>Name 2</h1> 
          </div>
        </div>
);

Используйте className вместо class

Все мы знаем, что for и class - это зарезервированные ключевые слова JavaScript. Так что мы не можем использовать их в JSX. Атрибут class будет заменен на className и будет использоваться htmlFor вместо for. Еще одна вещь: комментарии больше не пишутся как ‹! - комментарий - ›, но вместо этого пишется как {/ * комментарий * /}

<div className="name">Your First name</div>
<label htmlFor="">Label</label>
{/* Your comment here */}

верблюд

Свойства JSX используют соглашение об именах camelCase вместо имен атрибутов HTML.

<button onClick = {handleClick}>Click Me</button>
<div className = "hello"> Hello From Div </div>
<label htmlFor="">Label</label>

Логические, пустые и неопределенные значения игнорируются

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

В приведенном выше примере все выражения JSX будут отображать одно и то же. Это может быть полезно для условного рендеринга элементов React.

<div>
  {showTable && <Table />}  
</div>

Не забывай ключи

Ключи похожи на id и используются React внутри для отслеживания элементов списка. Поэтому, когда вы создаете список в JSX, он должен включать ключевой атрибут.

const products = (
        <ul>
            <li key = "product-1">Chair</li>
        </ul>
    );

Реквизит в JSX

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

const Profile = (props) => (
  <div className="product">
    <h3>Product name: {props.name}</h3>
    <p>Description: {props.description}</p>
  </div>
);

Итак, 10 вещей, которые вы должны знать о JSX. Надеюсь, вы кое-что узнали сегодня. Удачного кодирования.