В чем разница между JSX и HTML?

Опубликовано: 7 Августа, 2021

Введение в HTML: HTML - это язык гипертекстовой разметки, стандартный язык разметки для документов, предназначенных для отображения и просмотра в Интернете в веб-браузере.

Вот код для создания базовой формы в HTML:

HTML

 <!DOCTYPE html>
 < html >
 < body >
 
< h2 >HTML Form</ h2 >
 
< form >
  < label for = "firstname" >First name:</ label >
  < br >
  < input type = "text" id = "firstname" name = "firstname" value = "Shubh" >
  < br >
  < label for = "lastname" >Last name:</ label >< br >
  < input type = "text" id = "lastname" name = "lastname" value = "Barotha" >
  < br >< br >
  < input type = "submit" value = "Submit" >
 </ form >
 
</ body >
 </ html > 

Выход:

Введение в JSX: JSX (JavaScript + XML) - это расширение JavaScript, которое позволяет записывать HTML непосредственно в JavaScript, что дает несколько преимуществ, заключающихся в создании более читабельного кода и использовании всей мощи JavaScript в HTML. JSX в некотором смысле почти похож на HTML, однако он сопровождает некоторые заметные отличия, которые мы рассмотрим в следующем разделе. Поскольку JSX не является законным кодом JS, он должен быть скомпилирован в JS с помощью такого инструмента, как Babel или аналогичного.

Простой пример JSX:

const App = <h1>Welcome to GeeksforGeeks</h1>;

Вот код для создания простого примера на JSX:

Создайте новое приложение в reactjs, используя команду:

 npx создать-реагировать-приложение myapp

Структура вашего проекта будет выглядеть так:

Мы собираемся написать базовый jsx в коде реакции.

Для начала откройте App.js и внесите следующие изменения:

 импортировать React из React;
импортировать ReactDOM из react-dom; 

const App = () => {
 возвращаться(
   <div> <h1> Добро пожаловать в GeeksforGeeks </h1> </div>
 )
}
экспортировать приложение по умолчанию;

Сохраните и закройте файл и запустите проект, используя команду из каталога вашего проекта:

начало над уровнем моря

Выход:

Если вы нажмете кнопку «Отправить», страница перезагрузится. Поскольку вы создаете одностраничное приложение, вы предотвратите это стандартное поведение кнопки с type = ”submit”. Вместо этого вы обработаете событие отправки внутри компонента.

JSX против HTML:

Основные различия между JSX и HTML заключаются в следующем:

HTML	JSX
В HTML можно вернуть несколько элементов. Например: <ul> <li> неупорядоченный список <ol> <li> упорядоченный список </li> <li> упорядоченный список </li> <li> упорядоченный список </li> </ol> </li> <li> неупорядоченный список </li> <li> неупорядоченный список </li> </ul>	Вложенный JSX должен возвращать один элемент, который мы назовем родительским элементом, который охватывает все остальные уровни вложенных элементов: <div> <p> розовый </p> <p> желтый </p> <p> зеленый </p> </div> Без элемента-оболочки JSX не будет транспилироваться. В React мы можем рендерить JSX непосредственно в HTML DOM с помощью React Render API, также известного как ReactDOM. Формула отрисовки элементов React выглядит так: ReactDOM.render (componentToRender, targetNode) ReactDOM.render () должен вызываться после объявлений элементов JSX.
Элементы HTML имеют атрибуты. например, максимальная длина в <input maxlength = ”16 ″ />	Элементы JSX имеют реквизиты. например, maxLength в <input maxLength = ”16 ″ />
Необязательно использовать camelCase для атрибутов, идентификаторов и ссылок на события. Ваш призыв - использовать для их имен верблюжий регистр, строчные буквы или дефисы.	Все атрибуты HTML и ссылки на события в JSX стать верблюжьего, таким образом, OnClick событие становится OnClick и OnChange - OnChange.
Атрибут class можно использовать в любом элементе HTML. Имя класса может использоваться CSS и JavaScript для выполнения определенных задач для элементов с указанным именем класса.	Вы не можете использовать слово class для определения классов HTLM, поскольку класс - это зарезервированное слово в JavaScript, вместо этого используйте - className .
В HTML почти все теги имеют открывающий и закрывающий теги, за исключением, вероятно, нескольких вроде <br/>	Однако в JSX любой элемент можно записать как самозакрывающийся тег, например: <div /> Пример: const string = <img src = {user.avatarUrl} />;

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

Тот факт, что JSX выглядит как HTML, больше не превращает его в HTML. Фактически, вы все еще можете писать обычные функции, минуя синтаксис, подобный HTML.

Суть в том, что JSX - это не HTML или шаблонизатор.

Technical Scripter Picked

В чем разница между JSX и HTML?

HTML

JSX против HTML:

РЕКОМЕНДУЕМЫЕ СТАТЬИ