Знакомство с JSX

Вещи, которые выглядят сложными, не обязательно должны быть сложными 😲

Подключайтесь ко мне в twitter ❤️

Подождите, перед этим, извините, сначала прочитайте это, а потом открывайте телефон, иначе, я знаю, вы закончите прокруткой. Мы все так делаем 😆 😝 😄.

ReactJs использует JSX для создания пользовательского интерфейса. Теперь вы, должно быть, думаете: «О! Что это, черт возьми, такое? 😩😩

JSX = JavaScript + XML 😕
и да, вам не нужно изучать XML для этого! 😛

Позвольте мне рассказать вам о некоторых моментах.

Что такое JSX? 🍄

• JSX — это не что иное, как расширение синтаксиса JavaScript.

• Он позволяет вам писать HTML + JavaScript вместе в React Code.

• Это HTML-подобный синтаксис, который расширяет EcmaScript.

• Это более простой и элегантный способ написания кода React.

var marvelHeroes= (
    <ul id="marvelHeroes">
      <li>Iron-Man</li>
      <li>Thor</li>
      <li>Doctor Strange (My fav)</li>
      <li>Captain America</li>
      <li>Spiderman</li>
    </ul>
)

Приведенный выше код — это JSX. Я уверен, что для вас это не совсем чужой синтаксис. 😄

Только не говорите, что он для вас совершенно чужой.

Здесь, если мы попытаемся понять синтаксис, это JavaScript, где мы добавляем некоторые элементы HTML, такие как тег неупорядоченного списка и тег списка 😄.

Теперь вы, наверное, думаете, почему мы используем JSX????? 🙆♀️

Мы используем JSX, потому что он делает наш код более простым, элегантным и читабельным. 🙆♀️

Как? 🙀🙀🙀

Давайте разберемся, как и почему.

React создает свой собственный DOM. Виртуальный DOM, который является точной копией реального DOM и содержит объекты JavaScript. Он быстрее, чем реальный DOM.

DOM означает Document Object Model (объектная модель документа). Она содержит все элементы и атрибуты в узлах. Она создает деревоподобную структуру в фоновом режиме, когда мы добавляем какой-либо элемент в наш код.

Итак, если мы хотим добавить какой-то элемент в наш проект React, предположим, список героев, для этого нам нужно добавить тег list, который будет находиться в виртуальном DOM вашего react.

Для добавления или создания этого элемента нам нужно написать инструкцию для React по созданию элементов в DOM.

Синтаксис для этого следующий

React.createElement(type,{props},children); 

где
type: тип HTML-элемента
props: свойства объекта, которые будут принимать компоненты
children: любые данные, которые будут видны в пользовательском интерфейсе.

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

var marvelHeores= React.createElement(
   "ul",
   { id: "marvelHeores" },
   React.createElement(
      "li",
      null,
      "Iron-Man"
   ),
   React.createElement(
      "li",
      null,
      "Thor"
   ),
   React.createElement(
      "li",
      null,
      "Doctor-Strange"
   ),
   React.createElement(
      "li",
      null,
      "Captain America"
   ),
   React.createElement(
      "li",
      null,
      "Spiderman"
   )
)

Теперь мы чувствуем борьбу. Верно? 😆 😹

Синтаксис очень длинный, когда мы используем React.createElement(), и он становится еще сложнее, когда вы хотите использовать некоторые вложенные элементы.

Поэтому, чтобы справиться со всей этой нагрузкой, мы используем JSX. ❤️

JSX — это СИНАТИЧЕСКИЙ сахар для сокращения трудностей, связанных с использованием React.createElement().

На этом мы практически закончили, я просто хочу, чтобы вы знали некоторые моменты, прежде чем написать свой первый JSX. 👼

• Если вы хотите добавить JavaScript или код принятия решений, просто оберните его в фигурные скобки{}.

• В JSX onclick — это onClick, а class — это className.

• Все элементы HTML в JSX начинаются со строчных букв, в то время как имена компонентов начинаются с верхнего регистра.

Проверьте свой файл App.js в проекте, который вы только что создали вместе со мной в предыдущем блоге этой серии. 🐾🐾

Счастливого строительства!!!

Подключайтесь ко мне в twitter ❤️

Теперь мы завершили ваш блог здесь, нажмите на ссылку twitter и подключитесь там ко мне 😁😁😁