Как создавать элементы React с помощью JSX

Введение

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

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

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

Предпосылки

• Вам нужна среда разработки, в которой работает Node.js.
• Вы сможете создать приложение с помощью Create React App.
• Вам также понадобятся базовые знания JavaScript.

Шаг 1 — Добавьте разметку в элемент React

Как упоминалось ранее, в React есть специальный язык разметки JSX. Он представляет собой комбинацию синтаксиса HTML и JavaScript и выглядит примерно так:

<div>
{inventory.filter(item => item.available).map(item => (
<Card>
<div className="title"}>{item.name}</div>
<div className="price">{item.price}</div>
</Card>
))
}
</div>

Некоторые функции JavaScript, такие как .filter и .map, а также некоторые стандартные функции HTML, такие как <div> Вы узнаете. Но есть и другие части, такие как HTML и JavaScript, например <card> и имя_класса.

Это JSX, специальный язык разметки, который придает компонентам React ощущение HTML с использованием мощи JavaScript.

На этом этапе вы узнаете, как добавлять HTML-подобные примитивы к существующему элементу React. Для начала вы добавите стандартные HTML-элементы в функцию JavaScript, а затем просмотрите скомпилированный код в браузере. Вы также сгруппируете элементы, чтобы React мог компилировать их с минимальной разметкой и чистым HTML-выводом.

Чтобы начать, создайте новый проект. Запустите следующий скрипт в командной строке, чтобы установить новый проект с помощью create-react-app:

npx create-react-app jsx-tutorial

После завершения проекта перейдите в каталог:

cd jsx-tutorial

В новой вкладке или окне терминала запустите проект, используя скрипт запуска Create React App. Браузер автоматически обновится в соответствии с изменениями, поэтому запускайте этот скрипт постоянно во время работы:

npm start

Вы получите работающий локальный сервер. Если проект не открывается в окне браузера, вы можете найти его по адресу http://localhost:3000/. Если вы запускаете его с удалённого сервера, адрес будет следующим: http://your_IP_address:3000.

Ваш браузер загрузит приложение React, включенное в состав Create React App.

Вам предстоит создать совершенно новый набор пользовательских компонентов, поэтому для начала вам нужно будет очистить шаблонный код, чтобы создать пустой проект. Для начала откройте App.js в текстовом редакторе. Это корневой компонент, который будет внедрен на страницу. Все остальные компоненты будут начинаться с него.

В новом терминале перейдите в папку проекта и откройте src/App.js с помощью следующей команды:

nano src/App.js

Вы увидите примерно такой файл:

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;

Теперь удалите строку import logo из './logo.svg' и всё после оператора return в функции. Измените её на return null. Итоговый код будет выглядеть так:

import React from 'react';
import './App.css';
function App() {
return null;
}
export default App;

Сохраните и выйдите из текстового редактора.

Наконец, удалите логотип. В окне терминала введите следующую команду:

rm src/logo.svg

Этот SVG-файл не будет использоваться в вашем приложении, поэтому по мере необходимости удаляйте неиспользуемые файлы. Это позволит лучше организовать ваш код в долгосрочной перспективе.

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

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

Во-первых, если вы посмотрите на вкладку или окно, в котором запущен ваш сервер, вы увидите это:

Output
...
./src/App.js
Line 1:8: 'React' is defined but never used no-unused-vars
...

Эта строка означает, что вы не используете импортированный код React. Добавляя строку импорта React со значением 'react' в свой код, вы импортируете код JavaScript, который преобразует JSX в код React. Если JSX отсутствует, импортировать его не нужно.

Давайте изменим его, добавив немного JSX. Начнём с замены null на пример Hello, World:

import React from 'react';
import './App.css';
function App() {
return <h1>Hello, World</h1>;
}
export default App;

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

Затем, под тегом <h1>, добавьте тег абзаца, содержащий строку, которую я пишу в JSX. Код будет выглядеть так:

import React from 'react';
import './App.css';
function App() {
return(
<h1>Hello, World</h1>
<p>I am writing JSX</p>
)
}
export default App;

Поскольку JSX занимает несколько строк, выражение необходимо заключить в скобки.

Сохраните файл. После этого вы увидите ошибку в терминале, где работает ваш сервер:

Output
./src/App.js
Line 7:5: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
5 | return(
6 | <h1>Hello, World</h1>
> 7 | <p>I am writing JSX</p>
| ^
8 | )
9 | }
10 |

При возврате JSX из функции или директивы необходимо возвращать один элемент. Этот элемент может иметь вложенные дочерние элементы, но должен быть элемент верхнего уровня. В этом случае возвращаются два элемента.

Решение — небольшое изменение кода. Заключите код в пустой тег. Пустой тег — это HTML-элемент без текста. Выглядит это так: <> .

В редакторе вернитесь к ./src/App.js и добавьте пустой тег:

import React from 'react';
import './App.css';
function App() {
return(
<>
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</>
)
}
export default App;

Пустой тег создаёт элемент, но не добавляется в финальную разметку при компиляции кода. Это сохраняет чистоту кода, предоставляя React один элемент.

Сохраните код и закройте файл. Браузер перезагрузится и отобразит обновлённую страницу с элементом абзаца. Кроме того, при конвертации кода пустые теги будут удалены:

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

Шаг 2 — Добавление стиля к элементу с атрибутами

На этом этапе вы настроите стили элементов компонента, чтобы узнать, как HTML-атрибуты работают с JSX. В React существует множество вариантов стилизации. Некоторые из них предполагают написание CSS на JavaScript, другие — использование препроцессоров. В этом руководстве вы будете работать с CSS-классами и импортированным CSS.

Теперь, когда у вас есть код, пора добавить стили. Откройте App.css в текстовом редакторе:

nano src/App.css

Поскольку вы начинаете с нового JSX, текущий CSS будет ссылаться на элементы, которых больше нет. Поскольку этот CSS вам не нужен, вы можете его удалить.

После удаления кода у вас останется пустой файл.

Далее нужно добавить стилистику к тексту. В файл src/App.css добавьте следующий код:

.container {
display: flex;
flex-direction: column;
align-items: center;
}

В этом блоке кода вы создали селектор класса CSS с именем .container и использовали его для центрирования содержимого с помощью display: flex.

Сохраните файл и выйдите. Браузер обновится, но ничего не изменится. Чтобы увидеть изменения, необходимо добавить CSS-класс в компонент React. Откройте код JavaScript компонента:

nano src/App.js

Код CSS уже импортирован с помощью строки импорта “./App.css”. Это означает, что Webpack импортирует код для создания финальной таблицы стилей, но чтобы применить CSS к элементам, необходимо добавить классы.

Сначала в текстовом редакторе найдите пустые теги <> к <div> Изменять.

import React from 'react';
import './App.css';
function App() {
return(
<div>
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

В этом коде вы заменили пустые теги — <> — тегами div. Пустые теги полезны для группировки кода без добавления дополнительных тегов, но здесь следует использовать div, поскольку пустые теги не принимают HTML-атрибуты.

Далее нужно добавить имя класса. Именно здесь JSX начинает отличаться от HTML. Если вы хотите добавить класс к обычному HTML-элементу, это можно сделать так:

<div class="container">

Но поскольку JSX — это JavaScript, у него есть несколько ограничений. Одно из них заключается в наличии зарезервированных ключевых слов в JavaScript. Это означает, что вы не можете использовать определённые слова в любом коде JavaScript. Например, вы не можете создать переменную с именем null, поскольку это слово уже зарезервировано.

Одно из зарезервированных слов — class. React обходит это зарезервированное слово небольшим изменением. Вместо добавления свойства class вы добавляете свойство className. Как правило, если свойство работает не так, как ожидалось, попробуйте добавить версию в стиле «camelCase». Ещё одно немного отличающееся свойство — это свойство for, которое используется для тегов. Есть и другие, но, к счастью, список относительно короткий.

Теперь, когда вы знаете, как атрибут class используется в React, вы можете обновить свой код, включив в него стили. В текстовом редакторе добавьте className="container" к открывающему тегу div:

import React from 'react';
import './App.css';
function App() {
return(
<div className="container">
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

Сохраните файл. После этого страница перезагрузится, а содержимое будет выровнено по центру.

Атрибут className уникален для React. Вы можете добавить большинство HTML-атрибутов в JSX без каких-либо изменений. Например, вернитесь в текстовый редактор и добавьте идентификатор приветствия к элементу. <h1> Добавьте свой собственный. Он будет выглядеть как стандартный HTML:

import React from 'react';
import './App.css';
function App() {
return(
<div className="container">
<h1 id="greeting">Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

Сохраните страницу и перезагрузите браузер. Вот и всё.

Пока что JSX выглядит как стандартная разметка, но его преимущество в том, что он обладает мощью JavaScript, при этом выглядит как HTML. Это означает, что вы можете назначать переменные и ссылаться на них в своих свойствах. Чтобы сослаться на свойство, заключите его в фигурные скобки — {} — вместо кавычек.

В текстовом редакторе добавьте следующие выделенные строки для ссылки на функцию:

import React from 'react';
import './App.css';
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

В этом коде вы создали переменную над оператором return с именем greeting со значением “greeting”, а затем присвоили ее переменной в атрибуте id тега. <h1> Вы сами себя рекомендовали.

Сохраните файл и выйдите. Страница останется прежней, но с идентификационным тегом.

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

Чтобы продемонстрировать это, создайте страницу со списком эмодзи. Эти эмодзи заключены в элемент. При нажатии на эмодзи вы получите его краткое имя CLDR..

Для начала вам нужно добавить на страницу ещё несколько элементов. Откройте файл src/App.js в текстовом редакторе. На этом этапе не закрывайте его.

nano src/App.js

Сначала добавьте список эмодзи, выделив следующие основные моменты:

import React from 'react';
import './App.css';
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
<ul>
<li>
<button>
<span role="img" aria-label="grinning face" id="grinning face">😀</span>
</button>
</li>
<li>
<button>
<span role="img" aria-label="party popper" id="party popper">🎉</span>
</button>
</li>
<li>
<button>
<span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
</button>
</li>
</ul>
</div>
)
}
export default App;

Вот вам тег.

Вы создали список эмодзи для хранения. Каждый эмодзи находится в элементе.
• Она расположена отдельно и окружена элементом. На следующем шаге вы добавите событие к этой кнопке..

  Вы также можете использовать эмодзи с тегом. <span> Вы окружили его несколькими другими свойствами. Каждый элемент span имеет атрибут role, равный img. Это сигнализирует программному обеспечению, осуществляющему доступ к элементу, что он ведёт себя как изображение. Кроме того, каждый элемент <span> У него есть тег aria и атрибут id под названием emoji. Тег aria сообщает посетителям, использующим программы чтения с экрана, что отображается. Этот идентификатор понадобится вам позже при создании событий.

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

  Сохраните и закройте файл. Ваш браузер обновится, и вы увидите следующее:

  

  Теперь добавьте немного стиля. Откройте CSS-код в текстовом редакторе:

  nano src/App.css

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

  .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  }
  button {
  font-size: 2em;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  }
  ul {
  display: flex;
  padding: 0;
  }
  li {
  margin: 0 20px;
  list-style: none;
  padding: 0;
  }

  В этом коде вы использовали размер шрифта, поля и другие параметры для настройки внешнего вида кнопок и изменения шрифта. Вы также удалили стили списка и добавили display: к элементу.

  Согните его так, чтобы он принял горизонтальное положение.

  Сохраните и закройте CSS-файл. Страница браузера обновится, и вы увидите следующее:

  

  Вы уже поработали с несколькими элементами JSX, которые выглядят как обычный HTML. Вы добавили классы, идентификаторы и теги Aria, а также работали с данными в виде строк и переменных. Но React также использует атрибуты, чтобы указать, как ваши элементы должны реагировать на пользовательские события. Далее вы начнёте делать страницу интерактивной, добавляя события к кнопке.

  Шаг 3 — Добавление событий к элементам

  На этом этапе вы добавите события к элементам, используя определённые атрибуты, и запишете событие нажатия на кнопку. Вы узнаете, как получать информацию о событии для отправки другого действия или использовать другую информацию в области действия файла.

  Теперь, когда у вас есть главная страница с информацией, пора добавить на неё события. Существует множество обработчиков событий, которые можно добавить к HTML-элементам. React предоставляет доступ ко всем из них. Поскольку ваш код JavaScript включён в разметку, вы можете быстро добавлять события, сохраняя при этом чёткую структуру кода.

  Для начала добавьте обработчик событий onclick. Это позволит вам добавлять JavaScript-код непосредственно к элементу, не прикрепляя прослушиватель событий:

  import React from 'react';
  import './App.css';
  function App() {
  const greeting = "greeting";
  return(
  <div className="container">
  <h1 id={greeting}>Hello, World</h1>
  <p>I am writing JSX</p>
  <ul>
  <li>
  <button
  onClick={event => alert(event.target.id)}
  >
  <span role="img" aria-label="grinning face" id="grinning face">😀</span>
  </button>
  </li>
  <li>
  <button
  onClick={event => alert(event.target.id)}
  >
  <span role="img" aria-label="party popper" id="party popper">🎉</span>
  </button>
  </li>
  <li>
  <button
  onClick={event => alert(event.target.id)}
  >
  <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
  </button>
  </li>
  </ul>
  </div>
  )
  }
  export default App;

  Поскольку это JSX, вы используете «camelCased» для onclick, то есть вы добавили его как onClick. Это свойство onClick использует анонимную функцию для получения информации об элементе, по которому был выполнен щелчок.

  Вы добавили анонимную стрелочную функцию, которая получает событие от нажатой кнопки, и это событие будет иметь цель, которой является элемент <span> Необходимая информация содержится в свойстве id, доступ к которому можно получить с помощью event.target.id . Вы можете включить оповещение с помощью функции alert().

  Сохраните файл. В браузере нажмите на один из эмодзи, и вы получите уведомление с его именем.

  

  Вы можете сократить одну итерацию, объявив функцию один раз и передавая её каждому действию onClick. Поскольку функция не зависит ни от чего, кроме входных и выходных данных, её можно объявить вне основной функции компонента. Другими словами, функции не требуется доступ к области действия компонента. Преимущество их разделения заключается в том, что функция компонента становится немного короче, и при необходимости её можно перенести в отдельный файл позже.

  В текстовом редакторе создайте функцию displayEmojiName, которая перехватывает событие и вызывает функцию alert() с идентификатором. Затем передайте эту функцию каждому свойству onClick:

  import React from 'react';
  import './App.css';
  const displayEmojiName = event => alert(event.target.id);
  function App() {
  const greeting = "greeting";
  return(
  <div className="container">
  <h1 id={greeting}>Hello, World</h1>
  <p>I am writing JSX</p>
  <ul>
  <li>
  <button
  onClick={displayEmojiName}
  >
  <span role="img" aria-label="grinning face" id="grinning face">😀</span>
  </button>
  </li>
  <li>
  <button
  onClick={displayEmojiName}
  >
  <span role="img" aria-label="party popper" id="party popper">🎉</span>
  </button>
  </li>
  <li>
  <button
  onClick={displayEmojiName}
  >
  <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
  </button>
  </li>
  </ul>
  </div>
  )
  }
  export default App;

  Сохраните файл. Нажмите на эмодзи в браузере, и вы увидите то же предупреждение.

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

  Шаг 4 — Сопоставление данных для создания элементов

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

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

  В текстовом редакторе необходимо создать массив данных эмодзи в файле src/App.js. Если вы закрыли файл, откройте его снова:

  nano src/App.js

  Добавьте массив, содержащий объекты, содержащие эмодзи и их названия. Обратите внимание, что эмодзи должны быть заключены в кавычки. Создайте этот массив над функцией App:

  import React from 'react';
  import './App.css';
  const displayEmojiName = event => alert(event.target.id);
  const emojis = [
  {
  emoji: "😀",
  name: "grinning face"
  },
  {
  emoji: "🎉",
  name: "party popper"
  },
  {
  emoji: "💃",
  name: "woman dancing"
  }
  ];
  function App() {
  ...
  }
  export default App;

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

  Для создания компонентов React необходимо преобразовать данные в элементы JSX. Для этого данные сопоставляются с данными и возвращается элемент JSX. При написании кода следует учитывать несколько моментов.

  Во-первых, группа предметов должна быть представлена контейнером. <div> Во-вторых, каждому элементу необходимо специальное свойство, называемое ключом. Ключ должен представлять собой уникальный фрагмент данных, который React может использовать для отслеживания элементов и определения времени обновления компонента. Ключ удаляется из скомпилированного HTML-кода, так как он предназначен только для внутренних целей. При работе с циклами следует добавлять простую строку в качестве ключа.

  Вот простой пример, который показывает список имен в <div> Он отображает:

  ...
  const names = [
  "Atul Gawande",
  "Stan Sakai",
  "Barry Lopez"
  ];
  return(
  <div>
  {names.map(name => <div key={name}>{name}</div>)}
  </div>
  )
  ...

  Результирующий HTML-код будет выглядеть так:

  ...
  <div>
  <div>Atul Gawande</div>
  <div>Stan Sakai</div>
  <div>Barry Lopez</div>
  </div>
  ...

  Преобразование списка эмодзи будет аналогичным. <ul> Это будет контейнер. Вы сопоставляете данные и <li> Верните ключ краткого имени эмодзи. Закодируйте данные в тегах. <button> и <span> Вы замените информацию о кольце.

  В текстовом редакторе добавьте следующее:

  import React from 'react';
  import './App.css';
  const displayEmojiName = event => alert(event.target.id);
  const emojis = [
  {
  emoji: '😀',
  name: "test grinning face"
  },
  {
  emoji: '🎉',
  name: "party popper"
  },
  {
  emoji: '💃',
  name: "woman dancing"
  }
  ];
  function App() {
  const greeting = "greeting";
  return(
  <div className="container">
  <h1 id={greeting}>Hello, World</h1>
  <p>I am writing JSX</p>
  <ul>
  {
  emojis.map(emoji => (
  <li key={emoji.name}>
  <button
  onClick={displayEmojiName}
  >
  <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
  </button>
  </li>
  ))
  }
  </ul>
  </div>
  )
  }
  export default App;

  В коде нажмите на массив эмодзи в теге <ul> Карта и один <li> Возврат. В любом случае <li> Вы использовали имя эмодзи в качестве первичного ключа. Кнопка будет иметь ту же функциональность, что и обычно. В элементе <span>Замените aria-label и id на имя. Тег содержимого. <span> Это должен быть смайлик.

  Сохраните файл. Окно обновится, и вы увидите данные. Обратите внимание, что ключ отсутствует в сгенерированном HTML-коде.

  

  Сочетание JSX со стандартным JavaScript даёт вам множество инструментов для динамической генерации контента, и вы можете использовать любой стандартный JavaScript. На этом этапе вы заменили жёстко заданный JSX массивом и циклом для динамической генерации HTML. На следующем этапе вы отображаете информацию с помощью сокращённой записи.

  Шаг 5 – Условное отображение короткозамкнутых элементов

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

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

  Для этого используется короткое замыкание: то есть, используется условие, и если первая часть истинна, возвращается информация из второй части.

  Вот пример. Если вы хотите, чтобы кнопка отображалась только в том случае, если пользователь вошёл в систему, заключите этот элемент в фигурные скобки и добавьте условие.

  {isLoggedIn && <button>Log Out</button>}

  В этом примере используется оператор &&, который возвращает последнее значение, если все параметры верны. В противном случае возвращается false, что указывает React не возвращать дополнительную разметку. Если isLoggedIn равен true, React отображает кнопку. Если isLoggedIn равен false, кнопка не отображается.

  Чтобы попробовать это, добавьте следующие выделенные строки:

  import React from 'react';
  import './App.css';
  ...
  function App() {
  const greeting = "greeting";
  const displayAction = false;
  return(
  <div className="container">
  <h1 id={greeting}>Hello, World</h1>
  {displayAction && <p>I am writing JSX</p>}
  <ul>
  ...
  </ul>
  </div>
  )
  }
  export default App;

  В текстовом редакторе вы создали переменную displayAction со значением false. Затем тег <p> Вы заключили displayAction в фигурные скобки. В начале фигурных скобок вы добавили &amp;&amp; для создания условия.

  Сохраните файл, и вы увидите, что элемент исчезнет в браузере. Что важно, он также не появится в сгенерированном HTML-коде. Это не похоже на скрытие элемента с помощью CSS. В итоговой разметке его вообще не будет.

  

  В настоящее время значение displayAction жестко закодировано, но вы также можете сохранить это значение как состояние или передать его как базу из родительского компонента.

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

  Результат

  К этому моменту вы создали собственное приложение с использованием JSX. Вы научились добавлять HTML-подобные элементы в компонент, добавлять к ним элементы стилей, передавать атрибуты для создания семантической и доступной разметки и прикреплять события к компонентам. Затем вы объединили JavaScript с JSX, чтобы уменьшить дублирование кода и отображать/скрывать элементы по условию.

  Это основа, необходимая для создания будущих компонентов. Используя сочетание JavaScript и HTML, вы можете создавать динамические компоненты, которые будут гибкими и позволять вашему приложению расти и меняться.