Что вы должны знать о JSX - объяснение менее чем за 2 минуты

Что вы должны знать о JSX - объяснение менее чем за 2 минуты

Введение в React

React - это библиотека JavaScript для создания пользовательских интерфейсов.

React не является фреймворком - он даже не предназначен исключительно для веб.

React используется для создания одностраничных приложений.

React позволяет нам создавать многократно используемые компоненты пользовательского интерфейса.

Пример:

На странице отображается заголовок "Hello, world!".

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

Особенности React

Знакомство с JSX

Что такое JSX?

JSX означает расширение синтаксиса JavaScript.

JSX позволяет нам писать HTML в React.

JSX упрощает написание и добавление HTML в React.

JSX может напомнить вам язык шаблонов, но он поставляется со всей мощью JavaScript.

JSX создает "элементы" React

Пример JSX: const element = <h1>Hello, world!</h1>;

Встраивание выражений в JSX

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!  </h1>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>{element}</h1>);

output : Hello, Harper Perez!

Указание дочерних элементов в JSX

Теги JSX могут содержать дочерние элементы:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

Спасибо за чтение! Я люблю помогать людям осваивать новые навыки.