HTML VS JSX – в чем разница?

Автор оригинала: Kayode Kolade Christopher.

HTML VS JSX.

Язык разметки гипертекста (HTML) – это стандартный язык для документов, которые определяют структуру веб-страницы.

HTML – очень важный язык в веб-разработке. Ваш код либо в HTML изначально или компилирует его, чтобы браузеры могли его прочитать.

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

Он был создан как синтаксический сахар для Rect.Createelement () Отказ Это расширение JavaScript, которое позволяет разработчикам писать HTML прямо в JavaScript. Поэтому, когда вы пишете JSX, технически пишу JavaScript и HTML вместе.

Кроме того, это означает, что зарезервированные ключевые слова JavaScript должны быть неирены. И именно поэтому атрибут «для» в HTML является «HTMLFOR» в JSX, так как «для» является одним из самых распространенных зарезервированных ключевых слов JavaScript.

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

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

Вам нужно вернуть один родительский элемент в JSX

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

Многие используют Devs

В HTML вы можете делать все, что вы хотите, насколько вам не нужно возвращать один родительский элемент.

Здесь вы можете увидеть, что JSX не компиляция, потому что нет родительского элемента.

И здесь JSX компиляция, потому что есть родительский элемент (фрагмент).

Вы можете реализовать JS напрямую в JSX

В JSX можно записать JavaScript напрямую. Вы можете сделать это, поместив JavaScript в фигурные брекеты {...} Отказ Принимая во внимание, что в HTML вам нужен тег скрипта или внешний файл JavaScript для реализации JavaScript:

const Article = () => {
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

      
    
  );
};
export default Article;

Все теги, близкие к себе в JSX

Теги могут самостоятельно закрываться в JSX. То есть можно иметь

Теги самозащиты в HTML могут самостоятельно замкиться без косоискания перед правым угловым кронштейном, то есть
может работать как . Но в JSX вам нужно включить косулью. Это должно привести что-то на ум – jsx сильно опирается на синтаксис HTML 4.

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

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

ClassName и HTMLFOR, не класс и для в JSX

Чтобы определить имена классов и для атрибутов в JSX, вы не делаете это как Класс или для , поскольку оба зарезервированы ключевые слова в JavaScript.

Вы на самом деле создаете компоненты класса с класс ключевое слово. Итак, чтобы определить имена классов в JSX, вы делаете это как « ClassName », а для атрибутов для этикеток вы пишете » HTMLFOR “:

const Article = () => {
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        

          Name
          
        
      
    
  );
};

export default Article;

Напишите все атрибуты HTML в камеру в JSX

Вам необходимо написать все HTML-атрибуты и ссылки на события в камеру во время записи JSX. Итак, OnClick становится OnClick , onmouseover становится onmouseover , и так далее:

const Article = () => {
  const sayHI = () => {
    alert("Hi Campers");
  };

  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        ALert Hi
      
    
  );
};
export default Article;

Напишите встроенные стили как объекты в JSX

И, наконец, определить встроенные стили для JSX, вы пишете его как объект, с свойствами в камеру, значения в кавычках, а затем вы передаете его в соответствии с JSX.

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

const Article = () => {
  const inlineStyle = {
    color: "#2ecc71",
    fontSize: "26px",
  };
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

        ALert Hi
      
    
  );
};
export default Article;

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

Но более чистый способ – определить объект за пределами JSX, а затем передавать его в открывающий тег.

const Article = () => {
  return (
    <>
      

        
Hi campers
        
How's coding going
        
What is up?
        {new Date().toDateString()}
        

        

        {2 + 5} is seven in word
        

      
    
  );
};

export default Article;

Обратите внимание, что вы не должны использовать встроенный стиль в простом HTML – вы не хотите разрушать SEO вашего сайта.

Вот и все!

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

Оригинал: “https://www.freecodecamp.org/news/html-vs-jsx-whats-the-difference/”