Что такое JSX? Узнайте о синтаксисе, используемом для написания кода в ReactJS

Эта статья была первоначально опубликована в https://www.blog.duomly.com/what-is-jsx/

вступление Что такое JSX?

Будучи фронтальным развитием студента, ваш первый выбор после HTML, CSS и JavaScript-это структура, которая облегчит создание первого проекта.

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

Файлы компонента будут иметь определенное расширение, которое не знакомо для разработчиков, не являющихся ReactJS, это .jsx . Почему это не .js Каков конкретный синтаксис JSX, который используется в ReactJS, и каким образом он лучше, чем традиционный JS?

Это именно то, что я люблю объяснить вам в этой статье. Я расскажу вам, что такое JSX, для чего он используется, как использовать для цикла в JSX, и в чем разница между JSX и HTML.

И, конечно же, если вы предпочитаете смотреть, чем читать, наслаждайтесь видео версией этой статьи на нашем канале YouTube.

Что такое JSX?

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

Давайте посмотрим на пример кода JSX , так что вы знаете, как это выглядит:

class Main extends React.Component {
    render() {
        return Hello, Duomly!;
    }
}

Прямо сейчас вы можете увидеть код JSX внутри функции render (). Это действительно похоже на HTML. После компиляции JSX переводится на регулярные вызовы функций JavaScript, и вот как это выглядит:

class Main extends React.Component {
    render() {
        return (
            React.createElement(
                "h3",
                { className: 'title'},
                'Hello, Duomly!'
            )
        )
    }   
}

Таким образом, JSX – это как -то более простой способ использования метода React.createElement (). React.createElement () помогает создать код без ошибок, потому что он выполняет проверки во время компиляции, и, наконец, результатом выражения JSX является объект, как ниже:

const title = {
    type: 'h3',
    props: {
        className: 'title',
        children: 'Hello Duomly!'
    }
}

Рекомендуется использование JSX в ReactJS, потому что он приносит некоторые преимущества для ваших приложений. Вот почему вы должны использовать JSX: – Это упрощает создание шаблонов компонента – он быстрее, чем JavaScript, потому что он выполняет оптимизацию при транзите в JS – это помогает сохранить логику и шаблон вместе в качестве компонентов без беспорядка

Но если по какой -то причине вы не хотите использовать JSX, вам не нужно; Чистый JavaScript также приемлем в ReactJS.

Наконец, просто чтобы уточнить, что такое JSX. JSX означает расширение JavaScript или JavaScript XML.

Для чего используется JSX?

Что ж, мы знаем, что такое JSX и почему лучше его использовать, так что прямо сейчас давайте уточним, что JSX используется для на самом деле.

В ReactJS мы используем JSX для создания HTML -элементов в качестве кода JavaScript, который будет размещен внутри DOM без использования методов CreateElement () или AppendChild ().

Многие разработчики используют JSX, чтобы фактически упростить свою жизнь, потому что написание кода ReactJS в Pure JavaScript было бы гораздо более неудобным.

Давайте посмотрим на простой пример с JSX и без JSX:

// JSX
const greetings = Good morning!;
ReactDOM.render(greetings, document.getElementById('root'));

// NO JSX
const greetings = React.createElement('p', {}, 'Good morning!');
ReactDOM.render(greetings, document.getElementById('root'));

Как вы можете видеть, синтаксис JSX намного проще и просто, в основном потому, что он похож на HTML, который каждый фронт-разработчик знает очень хорошо.

JSX для петли

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

render() {
    const children = ['John', 'Mark', 'Mary'];
    const childrenList = [];

    for (let [index, value] of children.entries()) {
        childrenList.push({value});

    }

    return {items}
}

Но есть также лучшее решение для того, чтобы сделать то же самое и больше ReactJS и JSX, это .карта () . Давайте посмотрим на пример кода:

render() {
    const children = ['John', 'Mark', 'Mary'];

    return (
        
            {children.map((value, index) => {
                return {value}
            }))
        
    )
}

Просто и легко, верно?

JSX против HTML

Прямо сейчас давайте поговорим о JSX, а не HTML. Как вы, наверное, должны знать, как разработчик фронт-энда, HTML является языком гипертекстовой разметки, который используется для создания элементов, которые мы можем видеть на экране, как списки, DOV или изображения.

С другой стороны, JSX – это расширение JavaScript, которое позволяет создавать HTML внутри кода JavaScript.

Самая большая разница между JSX и HTML заключается в том, что вложенный JSX должен вернуть только один элемент. Это означает, что если вы хотите создать элементы братьев и сестер, им всегда нужно иметь родителей; В HTML это не обязательно.

Посмотрим код:

// JSX

    Mary
    Judy
    John

// HTML

Mary

Judy

John

Если бы JSX -код не будет иметь div Родитель, он не мог составить, и он покажет ошибку.

Другое отличие состоит в том, что с HTML мы можем использовать ключевое слово класса для определения классов CSS, но с JSX это ключевое слово уже взято; Вот почему создатели должны были выяснить что -то еще. В JSX мы должны использовать ClassName определить имена классов, которые будут использоваться со стилями. Это похоже на свойства, такие как Onclick в HTML и Onclick в JSX.

Следующее отличие состоит в том, что в JSX любой элемент может быть написан как самозакрывающаяся тег, если внутри нет детей. В HTML всего несколько элементов имеют самозакрывающие теги; У других есть отдельные теги открытия и закрытия.

JSX и TypeScript

Все чаще и более распространено, что разработчики используют TypeScript вместо JavaScript для кода в ReactJS. И в этом случае используется еще одно расширение .tsx , который является TypeScript JSX.

Нет никакой разницы между TSX и JSX, помимо типов, которые вы должны использовать внутри функций.

Что такое JSX – резюме

В этой статье я попытался объяснить вам, что такое JSX, расширение JavaScript, используемое для создания шаблонов в ReactJS, самой популярной фронтальной структуре. Мы прошли через то, для чего используется JSX и как он отличается от HTML. Наконец, вы также узнаете, что такое .tsx Расширение файла и когда вы можете ожидать его.

Я надеюсь, что вы нашли эту статью полезной в качестве краткого обзора JSX. Если вы хотите узнать больше о ReactJS и JSX, взгляните на наш курс ReactJS, где мы освещаем множество других концепций, важных для этой структуры.

Спасибо за чтение, Анна из Duomly

Оригинал: “https://dev.to/duomly/what-is-jsx-find-out-about-the-syntax-used-to-write-code-in-reactjs-15m2”