published: true

JSX (Javascript Syntax eXtension)

• JSX — это расширение синтаксиса для JavaScript. Он был написан для использования с React. Код JSX очень похож на HTML.

• В данном случае это означает, что JSX не является валидным JavaScript. Веб-браузеры не могут его прочитать! Его необходимо скомпилировать, прежде чем он попадет в веб-браузер.

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

const p1 = <p> Hi </p>

• JSX-элементы могут иметь атрибуты, как и HTML-элементы.

const p1 = <p id="large">foo</p>

• Вложение — использование круглых скобок для вложения кода

 const nesting = (
   <a>
     <h1>
       Nested Code
     </h1>
   </a>
 );

Примечание: Элемент jsx может иметь «только 1» внешний элемент

т.е.
это неправильный код… так как у него более 2 родительских элементов

const paragraphs = (
  <p id="child1">I am a paragraph.</p> 
  <p id="child2">I, too, am a paragraph.</p>
);

НО, этот код valid, так как у него только 1 родительский и 2 дочерних элемента

const paragraphs = (
  <div id="parent">
    <p id="child1">I am a paragraph.</p> 
    <p id="child2">I, too, am a paragraph.</p>
  </div>
);

• Первый открывающий тег и последний закрывающий тег выражения JSX должны принадлежать одному и тому же элементу JSX!
• Если вы заметили, что выражение JSX имеет несколько внешних элементов, решение обычно простое: оберните выражение JSX в <div></div>.

Проверка RENDERING в React

ClassName

В React мы используем className, так же как class в html

//In HTML 
<h1 class="big">Hey</h1>

//In JSX
<h1 className="big">Hey</h1>

Это происходит потому, что JSX переводится в JavaScript, а class — это зарезервированное слово в JavaScript.

При отображении JSX атрибуты JSX className автоматически отображаются как атрибуты класса.

Самозакрывающиеся теги

Когда вы пишете самозакрывающийся тег в HTML, необязательно включать прямую косую черту непосредственно перед заключительной угловой скобкой:

<img> <img/>
<br>  <br/>

Но в REACT самозакрывающиеся теги ДОЛЖНЫ заканчиваться /.

Fine in JSX:
<br />

NOT FINE AT ALL in JSX:
<br >

Javascript в JSX

Любой код javascript может быть написан внутри JSX с помощью {}.

Any code writen inside `{}` is treated as javascript

const H1=<h1>2+3</h1>
ReactDOM.render(H1,target)
// "2+3" will be the output 

const H2=<h1>{ 2+3 }</h1>
ReactDOM.render(H2,target)
// 5 will be the output 

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

Мы можем обращаться к переменным внутри выражения JSX, даже если эти переменные были объявлены снаружи.

const theBestString = 'Yo globallly';

ReactDOM.render(<h1>{theBestString}</h1>, document.getElementById('app'));

Свойство объекта и переменные:

При написании JSX принято использовать переменные для установки атрибутов.

const src="blah/blah"
const img=<img src= {src} />

Свойства объектов также часто используются для установки атрибутов:

const prop = {
  name:"ukwitis",
  age:"20"
}

const obj = (<p>
Name: {prop.name}
Age : {prop.age}
</p>)

EventListeners:

Создайте слушателя событий, присвоив элементу JSX специальный атрибут. Вот пример:

<img onClick={myFunc} />

Примечание: Для eventListeners используется Camelcase

`onclick` in HTML
`onClick` in JSX

Условия в JSX

// @ this is invalid

const h = (
  <h1>
    {
      if (purchase.complete) {
        'Thank you!'
      }
    }
  </h1>
);

НО выполнение оператора if вне выражения jsx является допустимым

let text;

if (id==1) text="hi 1"
else text="hi 2"

const h1 = <h1>{text}</h1>

Еще один способ использования оператора if — это использование &&.

const tasty = (
  <ul>
    <li>Applesauce</li>
    { !baby && <li>Pizza</li> }
    { age > 15 && <li>Brussels Sprouts</li> }
    { age > 20 && <li>Oysters</li> }
    { age > 25 && <li>Grappa</li> }
  </ul>
);
//if lhs == true , rhs is added/rendered

Клавиши в React:

key — это атрибут JSX. Имя атрибута — key. Значение атрибута должно быть уникальным, подобно атрибуту id.

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

<ul>
  <li key="li-01">Example1</li>
  <li key="li-02">Example2</li>
  <li key="li-03">Example3</li>
</ul>

React.createElement

Вы можете писать код React, вообще не используя JSX!

В React вы не будете использовать document.createElement.
Однако мы видели, как он работает, потому что он имеет некоторые общие черты с React.createElement, но это не одно и то же.

const element = React.createElement("h1");
//returns an object similar to this one:
{
  type: 'h1',
  props: {}
}

• Причина, по которой React.createElement возвращает объект, а не сам элемент DOM, заключается в том, что React работает с Virtual DOM.
• Поэтому React.createElement возвращает объект, а не элемент DOM, потому что это позволяет React выполнять некоторые оптимизации производительности (например, Virtual DOM).

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

//Syntax
React.createElement(type, {props},children)

eg:- 
let welcome = React.createElement(
  "h1",
  { className:"welcome" ,style: { color: "red" } },
  `Welcome to react world`
);

Примечание:
DOM используется в приложениях React, но он не является частью React. В конце концов, DOM также используется в бесчисленных приложениях, не относящихся к React.
Методы, импортированные из react, предназначены только для чистых целей React, таких как создание компонентов или написание JSX-элементов.

### Проекты, которые вы можете сделать в эти выходные:
Простой компонент для карточек

Компонент предварительного просмотра статьи

Ссылки:

Scrimba

Codedamn

Frontend Mentor

Приятного чтения!