Рубрики
Uncategorized

Реагировать JSX в глубине

Предварительное условие: базовые знания реагирования Знаете ли вы в React, не требуется создавать … Tagged with React, JavaScript, DevOps.

Условие: Основные знания реагирования

Знаете ли вы в React, не требуется создавать компонент, используя только JSX? Вы можете использовать функцию React Createlement, а также для создания компонентов.

Тогда почему люди используют его больше всего в своем приложении React? Давайте глубоко погрузимся и поймем об этом больше.

Что такое JSX в React?

return (
    

        
Hey, I am Himanshu

    


)

или

const hOneHeading = 
Hey, I am Himanshu

JSX (JavaScript XML) — это расширение синтаксиса JavaScript, которое дает визуальную помощь разработчикам, позволяя им писать HTML -типы кодов в JavaScript, и это помогает описать «Как должен выглядеть пользовательский интерфейс и как он должен быть»

После этого React Engine преобразует эти JSX в функцию React

React.createElement(component, props, ...children)

В технических терминах JSX является синтаксическим сахаром в React, который обеспечивает React.createElement (компонент, реквизит, … дети) функционируют после конвертации из JSX.

Таким образом, вместо того, чтобы писать длинную и длинную функцию React.createElement для создания пользовательского интерфейса, команда React разработала JSX для создания пользовательского интерфейса, используя то, к чему мы привыкли, что является HTML.

Давайте посмотрим на разрыв процесса преобразования JSX для реагирования. Функция CreateElement:

Код JSX:

I am Himanshu

компилируется

React.createElement("h1",{className:"topBarHeading",
"I am Himanshu"}

Добавление выражений в JSX, как мы делаем в литералах шаблонов:

Ну, в конце концов, JSX тоже JavaScript. Таким образом, добавление выражений в JSX проще, потому что он использует почти тот же синтаксис, что и мы используем в Template Literals.

Код:

const userName = "Himanshu";
const whoLoggedIn = 
{userName}

Внутри вьющихся брекетов вы можете поместить практически любые достоверные выражения, такие как переменные, встроенные проверки условий, выполнять вызовы функций и т. Д. Как мы видим ранее, после компиляции JSX становится обычным JavaScript.

Примечание: Выражения внутри кудрявых скобок {} всегда получают оценку. Кроме того, эти вьющиеся скобки дают сигнал для реагирования, что мы используем здесь выражения JavaScript.

Добавление атрибутов в элементы JSX

В HTML мы можем добавить много атрибутов, чтобы указать больше о теге, например, добавление атрибута класса, атрибут ID, атрибут SRC и т. Д.

В React мы можем сделать то же самое с элементами JSX, но единственное отличие состоит в том, что JSX ближе к JavaScript, чем к HTML, так что атрибуты HTML становятся Camelcase.

const element =

Примечание: Как «Класс» это зарезервированное ключевое слово в JavaScript, оно становится классное имя , «Для» зарезервирован для петли, он становится htmlfor , и Некоторые другие атрибуты, такие как TabIndex стать TabIndex Анкет

Добавление детей, как мы делаем в HTML

Что ж, создавая вложенные теги в HTML, мы все в основном делаем в наших проектах, и в React мы можем сделать то же самое, что и в HTML, так что вот способ сделать то же самое:

function sampleComponent(){
    return (
        

            
Hey, I am himanshu

            
Taskmaster...A JS Master

        

        )
};

Знаете ли вы, что функция JSX в React предотвращает XSS (атака по перекрестной площадке) инъекции атаки?

Как? Что происходит под капюшоном? Что ж, по умолчанию React DOM ускользает от любого значения, прежде чем рендерировать их на экране, что означает, что любое значение (может быть вредоносный код), который вы даете в поле ввода, будет преобразовано в строку JSX. Кроме того, если вы отображаете вход на экране, то эти входы будут отображаться, поскольку он находится на экране в текстовом формате, если вы не указали их явно в коде.

Эта функция в React делает наше приложение на основе React более безопаснее от XSS (атаки по перекрестной площадке).

Указание типа элемента React с использованием корпуса имени

Всякий раз, когда вы создаете пользовательский компонент в своем проекте, всегда начинайте имя компонента с капитала. Это поможет двигателю ReactJS несколькими способами, такими как:

Причина:

  1. Помогите реагировать двигатель, чтобы легко отличить, какой тег является тегом HTML или пользовательским компонентом. В противном случае могут случиться некоторые странные вещи.
  2. Помогите вам определить, что является пользовательским компонентом или нет.

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

function exampleOfNameCasing(){
return (
    

        
Himanshu kanojiya

        I am JS Task Master
    

)
}

Доступ к внутренним компонентам из модуля с использованием точечной нотации:

Во многих случаях во время будущего вам может быть или необходимо построить один модуль, который экспортирует многие компоненты реагирования. Что ж, обертка нескольких компонентов реагирования в модуле — это удобный способ инкапсулировать все компоненты React и получить доступ к ним в соответствии с потребностями и требованиями.

Посмотрим, как мы можем это сделать, и получить доступ к ним:

const MyParentComponents = {
    userName:function(name){
        return 
User Name: {name}

}

function myApp(){
    return (
        
)
}

Примечание: Если у вас есть вопрос, как, как объект был записан в формате JSX или он будет доступен, будет ли он работать в качестве формата инициализации компонента?

Да, это будет работать, потому что функцию имени пользователя можно получить с помощью Dot Notation, когда мы получаем доступ к свойству объекта в JavaScript. Другой факт заключается в том, что функция имени пользователя является компонентом React, поэтому она действительна.

Некоторые не используют это:

  1. Поскольку он работает, как объекты Javascript, никогда не используйте общие выражения для доступа к внутренним компонентам (MyParentComponents [имя пользователя], вместо этого сохраняйте его в отдельных переменных, а затем используйте его, как ниже:
function doThis(){
    const componentFromModule = MyParentComponents["userName
"]
    return 
}

Итак, это все для JSX, и теперь давайте поймем о реквизите и еще одном несколько вещей о JSX:

  1. Вы также можете передать JavaScript Expressions в качестве опоры с помощью вьющихся скобок. Например:, как и в кудрявых скобках, он будет оцениваться сначала, а затем станет 6
  2. Вы не можете использовать IF-ELSE и LICOP в выражении, так как они не являются допустимыми выражениями, поэтому поместите в окружающий код.
  3. Вы можете использовать тройной условный оператор в JSX.
  4. Вместо петли вы можете использовать функции более высокого порядка, такие как карта, уменьшение, фильтр и т. Д.
  5. Вы можете использовать оператор спреда для прохождения объекта в качестве опоры. Для примера:
  6. Логические, нулевые и неопределенные не рендеринг
  7. Реквизит поступает как объекты JavaScript в подписи функции.
  8. Предположим, вам нужно написать JSX между тегом открытия и закрытия, тогда этот контент между этими тегами передается в качестве специальной опоры, которая является репутациями, и вы также можете получить к ним доступ к родительскому компоненту. Пример:
Example:

function ParentComp(props){
    return (
        return 
{props.children}

)};

function ChildComp(){
    return (
        I am Hero
)}

Оригинал: «https://dev.to/himanshukanojiya/react-jsx-in-depth-3dhj»