const hello = 
Hello World

Строка кода выше написана в JSX. JS Что ??

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

Что такое JSX

JSX является расширением синтаксиса для JavaScript. По сути, он расширяет JavaScript так, что с JavaScript можно использовать структуры HTML/XML. Это позволяет разработчикам использовать HTML -синтаксис для составления компонентов JavaScript. Это позволяет иметь четкий и знакомый синтаксис для определения структур дерева DOM с помощью атрибутов.

Хотя это очень похоже на HTML, он фактически принадлежит файлу JS. Поскольку это расширение для JavaScript, ваш браузер не поймет его, если он не будет составлен в простой JavaScript. Таким образом, вам нужно использовать для него компилятор JSX, такой как Babel.

JSX – это выражение JavaScript

Выражения JSX также являются экспрессией JavaScript. При составлении они на самом деле становятся обычными объектами JavaScript. Например, код ниже:

const hello = 
 Hello World 

будет составлен в

    const hello = React.createElement {
       type: "h1",
       props: {
           className: "greet",  
           children: "Hello World" 
          }
    }

Обратите внимание, что ClassName использовался вместо учебный класс . Я объясню это в ближайшее время.

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

Гнездование в JSX

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

    (
       

            
 Hello World!!! 
            
 I am a human 
       
    )

Один внешний элемент, пожалуйста

Выражение JSX должно иметь только один внешний элемент. Следовательно, Пока это будет работать

    const headings = (
        

           
I am a heading 
           
I am also a heading 
        
    );

так не пойдет

    const headings = (

       
I am a heading 
       
I am also a heading

      );

Ради любви к Camelcase

Поскольку JSX ближе к JavaScript, чем HTML, свойства JSX используют соглашение об именах Camelcase вместо имен атрибутов HTML. Вот почему в точке 2, ClassName использовался и TabIndex используется вместо TabIndex Анкет Это также верно для слушателей событий в JSX. В то время как нижняя часть регистрации используется для слушателей событий в HTML, Camelcase используется в JSX.

    This will work in JSX
    Click Me

    This will not work in JSX
    Click Me

JavaScript в JSX

Вы можете встроить JavaScript в JSX, но для этого вам нужно использовать вьющиеся скобки. Например, если вы хотите добавить 2+3 В выражении JSX вы сделаете это так.

    
 2+3 = {2+3} 

    will result to 

    2+3 = 5

Отображая JSX

Чтобы JSX появился на экране браузера, его нужно отображать. Reactdom.render () является наиболее распространенным способом рендеринга JSX. Reactdom это библиотека JavaScript, которая содержит несколько методов, которые каким -то образом касаются DOM.

Reactdom.render () принимает выражение JSX, создает соответствующие узлы деревьев и добавляет его в DOM. Таким образом, ваше выражение JSX появляется на экране. Чтобы ваш jsx появился на экране, вы передаете два аргумента Reactdom.render () Анкет Первый аргумент – это JSX, который вы хотите отобразить, что может самому RAW JSX или название переменной, которая содержит JSX. Второй аргумент – целевой элемент в файле HTML, в котором вы хотите, чтобы JSX был добавлен. Чтобы лучше понять, посмотрите на следующий пример.

    const names = (
        

            
Sarah
            
Annabel
        
       );

    ReactDOM.render(names , document.getElementById("app"));

Попробуйте это на Codepen

Самостоятельные теги в JSX

Для элементов HTML, которые имеют самостоятельные теги, такие как ,

    while this is good in JSX
    


    this is not good in JSX
    

Не забудьте ключи

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

   const toDO = (
        

            
 Design 
            
 Develop 
            
 Be Awesome 
        
    );

И там у вас есть, 9 вещей, которые вы должны знать о JSX. Я что -нибудь пропустил? Я хотел бы знать об этом.

Оригинал: “https://dev.to/sarah_chima/9-things-you-should-know-about-jsx-3bm”