👋hi, в этом блоге я пишу о JSX, что является главной вещью для изучения React.

Давайте начнем… 🏃‍ 🏃‍чего ♂️

const greet = 
Hello
;

Этот код выглядит немного запутанным. Это похоже на JavaScript, потому что он начинается с const и заканчивается ; Анкет Опять же, это похоже на HTML, потому что он также содержит

hello

Мы пишем этот код в файле JavaScript. Несмотря на то, как это выглядит на самом деле, этот код не содержит никакого HTML. Часть выглядит как html

hello

➡ JSX является расширением синтаксиса для JavaScript. Это написано для React. JSX не является действительным JavaScript. Веб -браузер не может прочитать его. Если файл JavaScript содержит JSX, этот файл должен быть скомпилирован до выполнения. Компилятор JSX переводит любой JSX в обычный JavaScript.

✔jsx Элемент:

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

Hello

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

// Saved in a variable
const title = 
JSX
;

// Stored in an Object
const obj = {
  title: 
React
,
  subTitle: 
JSX
};

Элементы JSX могут иметь такие атрибуты, как HTML -элементы. Один элемент JSX может иметь много атрибутов.

const title = 
Introduction to JSX
;

✔nesting:

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

// Nested JSX
Click me

// For readability, we can use line break and indentation
(
  
    

      Click me
    
  
)

// Nested JSX expression saved in a variable
const example = (
  
    

      Click me
    
  
);

«Ваговое правило, выражение JSX должно иметь только один внешний элемент. Первый открывающий тег и последний закрывающий тег выражения JSX должны принадлежать к одному и тому же элементу JSX.

const example = (
  

    
      

        Click me
      
    
  
);

✔classname & htmlfor:

Грамматика JSX в основном такая же, как в HTML. В HTML мы используем класс Атрибут, но в JSX мы не можем использовать учебный класс , мы должны использовать классное имя вместо. Это потому, что JSX переводится в JavaScript, а в JavaScript класс это зарезервированное слово. По той же причине мы не можем использовать для в Элемент вместо этого мы должны использовать htmlfor Анкет

Hello

First Name

✔ Самые теги с закрытыми:

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

// In HTML





// In JSX

✔ Javascript выражения в JSX:

Мы можем использовать любые выражения JavaScript в элементах JSX, заключив их в {} фигурные скобки.

// Variable
const greet = 'Hello World';

// Object
const person = {
  name: 'John Doe',
  age: 24,
  profession: 'Web Developer'
};

// Function
const greetings = () => 'Hello World';

// JavaScript Expressions in JSX
{10 + 5}

{greet}

{person.name}
{person.age}
{person.profession}

{greetings()}

Мы также можем использовать атрибут JavaScript Expressions в атрибуте Elements JSX.

const google = 'https://www.google.com';

Click Me

Event Слушатели в JSX:

Элементы JSX могут иметь слушатели событий, как и HTML -элементы. Мы можем создать слушателя событий, предоставив JSX элементы специального атрибута.

onButtonClick = () => alert('Hello World!');

Click Me

Значение атрибутов слушателя должно быть функцией. В HTML все имена слушателей событий написаны строчными буквами, но в JSX Event Names имена слушателей написаны буквами Camelcase. Вы можете увидеть список поддерживаемых имен событий Здесь Анкет

✔jsx Conditionals:

Мы можем написать JSX на основе условий. Некоторые условные примеры приведены ниже.

• 1⃣ Если еще:

let age = 18;
let message;

if (age >= 18) {
  message = (
    

      You can buy a drink.
    
  );
} else {
  message = (
    

      You can not buy a drink.
    
  );
}



// output will be
message = 
You can buy a drink
;

Вы не можете ввести если заявление в JSX.

• 2⃣ тройной оператор:

let age = 18;

const message = (
  

    {age >= 18 ? 'You can buy a drink.' : 'You can not buy a drink'}
  
);



// output will be
message = 
You can buy a drink
;

• 3⃣ && Оператор:

let age = 18;

const message = (
  { age >= 18 && 
You can buy a drink.
 }
  { age < 18 && 
You can not buy a drink
 }
);



// output will be
message = 
You can buy a drink.
;

✔ .map () Метод массива:

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

const persons = ['Lily', 'Riyan', 'John'];

const listItems = persons.map(person => 
{person}
);

{listItems}

{ListItems} оценим до массива. И мы можем использовать массив в элементы JSX т.е.

const listItems = [
  
Lily
,
  
Riyan
,
  
John
];

{listItems}



// output will be

  
Lily
  
Riyan
  
John

✔keys:

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

  
Example 1
  
Example 2
  
Example 3

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

Вот и все, спасибо за чтение и следите за новостями.

Оригинал: “https://dev.to/iamismile/jsx-3ac”