JSX синтаксис

#description

JSX - это расширение синтаксиса JavaScript, которое позволяет использовать HTML-подобное выражение в коде JavaScript. Он облегчает работу с визуальным представлением компонентов React.

Пример JSX-кода:

                    
const element = <h1>Hello, world!</h1>;

В этом примере, мы создаем переменную с помощью JSX-синтаксиса и присваиваем ей значение - HTML-элемент h1 с текстом "Hello, world!".

JSX-код может содержать в себе выражения JS, которые окружаются фигурными скобками {}:

                    
const element = <h1>{props.title}</h1>;

В этом примере, мы выводим заголовок компонента, который передается через пропсы.

Для использования JSX в проекте React необходимо подключить библиотеку "react", которая содержит метод "createElement", преобразующий JSX-элементы в обычные JavaScript-объекты.

Пример использования JSX в React-компоненте:

                    
import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>Welcome to my React app!</p>
    </div>
  );
}

export default App;

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

March 25, 2023

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

Если же непонятен весь вопрос, то нажмите на кнопки внизу, чтобы получить новый вариант объяснения, практические примеры или критически оценить сам вопрос.

Developer learning path

JSX синтаксис в React

JSX синтаксис