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

Введение

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

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

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

Предварительные условия

• Вам понадобится среда разработки Node.js; это руководство было протестировано на Node.js версии 10.19.0 и npm версии 6.13.4. Чтобы установить это в macOS или Ubuntu 18.04, следуйте инструкциям в разделе «Как установить Node.js и создать локальную среду разработки в macOS» или в разделе Установка с использованием PPA статьи «Как установить Node.js в Ubuntu». 18.04.

• Вам нужно будет иметь возможность создавать приложения с помощью Create React App. Инструкции по установке приложения с помощью Create React App можно найти в разделе «Как настроить проект React с помощью Create React App».

• Вам также потребуются базовые знания JavaScript, которые вы можете найти в разделе «Как кодировать на JavaScript», а также базовые знания HTML и CSS. Хорошим ресурсом по HTML и CSS является сеть разработчиков Mozilla.

Шаг 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, например и className.

Это 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 start. Браузер будет автоматически обновляться при изменениях, поэтому оставьте этот скрипт работающим все время, пока вы работаете:

npm start

Вы получите работающий локальный сервер. Если проект не открылся в окне браузера, его можно найти по адресу http://localhost:3000/. Если вы запускаете это с удаленного сервера, адрес будет http://ваш_IP_адрес: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 from './logo.svg и все, что следует за оператором 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 будет таким же. Однако есть несколько загвоздок.

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

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

Это линтер, сообщающий вам, что вы не используете импортированный код React. Когда вы добавляете строку import React from '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 занимает несколько строк, вам нужно будет заключить выражение в круглые скобки.

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

./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 уже импортирован с помощью строки import './App.css'. Это означает, что веб-пакет будет использовать код для создания окончательной таблицы стилей, но чтобы применить 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. Как правило, если атрибут не работает должным образом, попробуйте добавить версию Camel Case. Еще один атрибут, который немного отличается, — это атрибут 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 без каких-либо изменений. Например, вернитесь в текстовый редактор и добавьте id приветствие к элементу <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 выглядит как стандартная разметка, но преимущество JSX в том, что, хотя он и выглядит как HTML, он обладает мощью 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>
    </div>
  )
}

export default App;

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

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

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

Чтобы продемонстрировать это, вы создадите страницу со списком смайлов. Эти смайлы будут заключены в элемент <button>. Когда вы нажмете на смайлик, вы получите его короткое имя 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;

Здесь вы создали тег <ul> для хранения списка смайлов. Каждый смайлик находится в отдельном элементе <li> и окружен элементом <button>. На следующем шаге вы добавите событие к этой кнопке.

Вы также окружили смайлик тегом <span>, который имеет еще несколько атрибутов. Каждый span имеет атрибут role, которому присвоена роль img. Это сообщит программному обеспечению специальных возможностей, что элемент действует как изображение. Кроме того, каждый <span> также имеет атрибут aria-label и атрибут id с именем смайлика. aria-label сообщит посетителям с помощью программ чтения с экрана, что отображается. Вы будете использовать id при написании событий на следующем шаге.

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

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

Теперь добавьте немного стиля. Откройте код 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;
}

В этом коде вы использовали font-size, border и другие параметры, чтобы настроить внешний вид кнопок и изменить шрифт. Вы также удалили стили списка и добавили display: flex к элементу <ul>, чтобы сделать его горизонтальным.

Сохраните и закройте файл 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, вы использовали onclick в CamelCased, что означает, что вы добавили его как 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>. Во-вторых, каждому элементу необходимо специальное свойство под названием key. key должен быть уникальным фрагментом данных, который 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;

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

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

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

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

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

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

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

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

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

В этом примере вы используете оператор &&, который возвращает последнее значение, если все верно. В противном случае он возвращает false, что указывает React не возвращать дополнительную разметку. Если isLoggedIn правдив, 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 && для создания условия.

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

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

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

Заключение

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

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

Если вы хотите узнать больше о React, посетите нашу тематическую страницу React.

Автор выбрал Creative Commons для получения пожертвования в рамках программы Write for DOnations.