One place for hosting & domains

      Создание элементов React с помощью JSX


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

      Введение

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

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

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

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

      Шаг 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> и className.

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

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

      Создайте новый проект. В командной строке запустите следующий скрипт для установки нового проекта с помощью create-react-app:

      • npx create-react-app jsx-tutorial

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

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

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

      Ваш браузер будет загружать приложение React, добавленное в Create React App.

      Шаблон проекта React

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

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

      Вы увидите следующий файл:

      jsx-tutorial/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. Окончательный код будет выглядеть следующим образом:

      jsx-tutorial/src/App.js

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

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

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

      Вы не будете использовать этот файл 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. При добавлении строки import React from 'react'​​​​​ в ваш код, вы импортируете код JavaScript, который конвертирует JSX в код React. Если JSX отсутствует, то нет и необходимости в импорте.

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

      jsx-tutorial/src/App.js

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

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

      экран браузера с надписью "Hello, World"

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

      jsx-tutorial/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;
      

      Поскольку код 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 в редакторе и добавьте пустой тег:

      jsx-tutorial/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 один элемент.

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

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

      Браузер, демонстрирующий разметку и инструменты разработчика, показывающие разметку без пустых тегов

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

      Шаг 2 — Добавление стилей в элемент с помощью атрибутов

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

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

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

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

      Далее вам нужно добавить несколько стилей для выравнивания текста по центру. В src/App.css добавьте следующий код:

      jsx-tutorial/src/App.css

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

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

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

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

      Во-первых, в текстовом редакторе замените пустые теги <> на <div>.

      jsx-tutorial/src/App.js

      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. Как правило, если атрибут не работает ожидаемым образом, попробуйте добавить версию в «верблюжьем» стиле. Еще один атрибут, который несколько отличается, — это атрибут for, который вы будете использовать для меток. Есть несколько других случаев, но, к счастью, список довольно короткий.

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

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

      jsx-tutorial/src/App.js

      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;
      

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

      Выровненные по центру элементы html в браузере.

      Атрибут className является уникальным для React. Вы можете добавить большинство атрибутов HTML в JSX без изменений. В качестве примера вернитесь в текстовый редактор и добавьте id greeting​​ в элемент <h1>. Он будет выглядеть как стандартный HTML:

      jsx-tutorial/src/App.js

      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. Это означает, что вы можете назначать переменные и ссылаться на них в ваших атрибутах. Для использования атрибута оберните его в фигурные скобки — {} — вместо кавычек.

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

      jsx-tutorial/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>
          </div>
        )
      }
      
      export default App;
      

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

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

      Страница с тегом id, выделенным в инструментах для разработчиков

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

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

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

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

      jsx-tutorial/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-код в вашем текстовом редакторе:

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

      jsx-tutorial/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. Вы добавили классы, идентификаторы и теги, а также использовали данные в качестве строк и переменных. Но React также использует атрибуты для определения того, как ваши элементы должны реагировать на пользовательские события. На следующем шаге мы начнем делать страницу интерактивной, добавляя события для кнопки.

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

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

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

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

      jsx-tutorial/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
                  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 в «верблюжьем» стиле, что означает, что вы должны добавить его как onClick. Этот атрибут onClick использует анонимную функцию для получения информации об элементе, на который нажимает пользователь.

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

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

      Сигнал для party popper

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

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

      jsx-tutorial/src/App.js

      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. Откройте файл снова, если вы закрыли его:

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

      jsx-tutorial/src/App.js

      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>​​ на информацию из цикла.

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

      jsx-tutorial/src/App.js

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

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

      Браузер с инструментами разработчика, демонстрирующий обновленный HTML без свойств ключей

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

      Шаг 5 — Условное представление элементов с сокращенным вычислением

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

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

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

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

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

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

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

      jsx-tutorial/src/App.js

      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.



      Source link

      Comment créer des éléments React avec JSX


      L’auteur a choisi Creative Commons​​​ pour recevoir un don dans le cadre du programme Write for DOnations.

      Introduction

      Dans ce tutoriel, vous apprendrez à décrire des éléments avec JSX. JSX est une abstraction qui vous permet d’écrire une syntaxe de type HTML dans votre code JavaScript et vous permettra de construire des composants React qui ressemblent au balisage HTML standard.  JSX est le langage de référence de React, et constitue donc le fondement de tout balisage que React apportera à votre demande. 

      Comme JSX vous permet également d’écrire du JavaScript dans votre balisage, vous pourrez tirer parti des fonctions et des méthodes JavaScript, notamment le mappage des tables et l’évaluation des courts-circuits pour les conditionnels

      Dans le cadre du tutoriel, vous capturerez les événements de clic sur les boutons directement dans le balisage et repérerez les cas où la syntaxe ne correspond pas exactement au HTML standard, par exemple avec les classes CSS. À la fin de ce tutoriel, vous disposerez d’une application de travail qui utilise diverses fonctionnalités JSX pour afficher une liste d’éléments ayant un auditeur de clics intégré. Il s’agit d’un modèle courant dans les applications React que vous utiliserez souvent durant l’apprentissage du cadre. Vous pourrez également mélanger des éléments HTML standard avec du JavaScript pour voir comment React vous donne la possibilité de créer de petits morceaux de code réutilisables.

      Conditions préalables

      Étape 1 – Ajouert des balises à un élément de React

      Comme mentionné précédemment, React dispose d’un langage de balisage spécial appelé JSX. Il s’agit d’un mélange de syntaxe HTML et JavaScript qui ressemble à quelque chose comme ça :

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

      Vous reconnaîtrez certaines fonctionnalités de JavaScript telles que .filter et .mapainsi que du HTML standard comme <div>. Mais il y a d’autres parties qui ressemblent à la fois au HTML et au JavaScript, comme <Card> et className. 

      Il s’agit de JSX, le langage de balisage spécial qui donne aux composants de React la sensation du HTML avec la puissance du JavaScript.

      Dans cette étape, vous apprendrez à ajouter une syntaxe de base de type HTML à un élément React existant. Pour commencer, vous ajouterez des éléments HTML standard dans une fonction JavaScript, puis vous verrez le code compilé dans un navigateur. Vous regrouperez également les éléments afin que React puisse les compiler avec un minimum de balisage, laissant une sortie HTML propre.

      Pour commencer, faites un nouveau projet. Sur votre ligne de commande, exécutez le script suivant pour installer un nouveau projet en utilisant create-react-app :

      • npx create-react-app jsx-tutorial

      Une fois le projet terminé, passez dans le répertoire :

      Dans un nouvel onglet ou une nouvelle fenêtre du terminal, démarrez le projet en utilisant le script de démarrage de l’application Create React . Le navigateur se réactualise automatiquement en fonction des changements, alors laissez ce script fonctionner pendant toute la durée de votre travail :

      Vous obtiendrez un serveur local en fonctionnement. Si le projet ne s’est pas ouvert dans une fenêtre de navigateur, vous pouvez le trouver sur http://localhost:3000/. Si vous l’exécutez à partir d’un serveur distant, l’adresse sera http://your_IP_address:3000.

      Votre navigateur se chargera avec une application React incluse dans le cadre de Create React App.

      Modèle de projet React

      Vous allez créer un tout nouvel ensemble de composants personnalisés, vous devrez donc commencer par effacer du code passe-partout afin d’avoir un projet vide. Pour commencer,ouvrez App.js dans un éditeur de texte. C’est le composant root (racine) qui est injecté dans la page. Tous les composants partiront de là.

      Dans un nouveau terminal, déplacez-vous dans le dossier du projet et ouvrez src/App.js avec la commande suivante : 

      Vous verrez un fichier comme ceci :

      jsx-tutorial/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;
      

      Maintenant, supprimez la ligne import logo from './logo.svg et tout ce qui suit la déclaration de retour dans la fonction. Modifiez-le pour retourner null. Le code final ressemblera à ceci :

      jsx-tutorial/src/App.js

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

      Sauvegardez et quittez l’éditeur de texte.

      Enfin, supprimez le logo. Dans la fenêtre du terminal, tapez la commande suivante :

      Vous n’utiliserez pas ce fichier SVG dans votre application, et vous devez supprimer les fichiers inutilisés pendant que vous travaillez. Cela permettra de mieux organiser votre code sur le long terme.

      Maintenant que ces parties de votre projet ont été supprimées, vous pouvez passer à l’exploration des facettes de JSX. Ce langage de balisage est compilé par React et devient finalement le HTML que vous voyez sur une page web. Sans aller trop loin dans les internes, React prend le JSX et crée un modèle de ce à quoi ressemblera votre page, puis crée les éléments nécessaires et les ajoute à la page. 

      Cela signifie que vous pouvez écrire ce qui ressemble à du HTML et vous attendre à ce que le HTML rendu soit similaire. Cependant, il y a quelques pièges.

      Tout d’abord, si vous regardez l’onglet ou la fenêtre de votre serveur, vous verrez ceci :

      Output

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

      C’est le linter qui vous dit que vous n’utilisez pas le code React importé. Lorsque vous ajoutez la ligne import React à partir de « react » à votre code, vous importez du code JavaScript qui convertit le code JSX en code React. S’il n’y a pas de JSX, l’importation n’est pas nécessaire.

      Changeons cela en ajoutant une petite quantité de JSX. Commencez par remplacer null avec l’exemple Hello, World : 

      jsx-tutorial/src/App.js

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

      Sauvegardez le fichier. Si vous regardez le terminal avec le serveur en marche, vous verrez que le message d’avertissement a disparu. Si vous consultez votre navigateur, vous verrez le message comme un h1 element. 

      écran de navigateur affichant « Hello, World ». 

      Ensuite, sous la balise <h1>, ajoutez une balise de paragraphe qui contient la chaîne J'écris JSX. Le code ressemblera à ceci :

      jsx-tutorial/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;
      

      Comme le JSX s’étend sur plusieurs lignes, vous devrez mettre l’expression entre parenthèses.

      Sauvegardez le fichier. Lorsque vous le ferez, vous verrez une erreur dans le terminal qui fait fonctionner votre serveur :

      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 |

      Lorsque vous renvoyez JSX à partir d’une fonction ou d’une déclaration, vous devez renvoyer un seul élément. Cet élément peut avoir des enfants nichés, mais il doit y avoir un seul élément de haut niveau. Dans ce cas, vous rendez deux éléments.

      Le correctif est un petit changement de code. Entourez le code d’une balise vide. Une balise vide est un élément HTML sans aucun mot. Il ressemble à ceci : <></>.

      Retournez à la page ./src/App.js dans votre éditeur et ajoutez la balise vide : 

      jsx-tutorial/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;
      

      La balise vide crée un élément unique, mais lorsque le code est compilé, il n’est pas ajouté à la balise finale. Cela vous permettra de garder votre code propre tout en donnant à React un seul élément.

      Note : Vous auriez également pu envelopper le code avec un div au lieu de balises vides à condition que le code renvoie un élément. Dans cet exemple, une balise vide a l’avantage de ne pas ajouter de balisage supplémentaire à la sortie analysée.

      Enregistrez le code et quittez le fichier. Votre navigateur rafraîchit et affiche la page mise à jour avec l’élément de paragraphe. En outre, lorsque le code est converti, les balises vides sont supprimées :

      Navigateur affichant le balisage et devtools affichant le balisage sans les balises vides 

      Vous avez maintenant ajouté quelques JSX de base à votre composant et appris comment tous les JSX doivent être imbriqués dans un seul composant. Dans l’étape suivante, vous ajouterez un peu de style à votre composant.

      Étape 2 – Ajout de style à un élément avec attributs

      Dans cette étape, vous allez styliser les éléments de votre composant pour apprendre comment les attributs HTML fonctionnent avec JSX. Il existe de nombreuses options de style dans React. Certaines d’entre elles impliquent l’écriture de CSS en Javascript, d’autres utilisent des préprocesseurs. Dans ce tutoriel, vous travaillerez avec des classes CSS et CSS importées.

      Maintenant que vous avez votre code, il est temps d’ajouter un peu de style. Ouvrez App.css dans votre éditeur de texte :

      Comme vous commencez avec le nouveau JSX, le CSS actuel fait référence à des éléments qui n’existent plus. Comme vous n’avez pas besoin du CSS, vous pouvez le supprimer.

      Après avoir effacé le code, vous aurez un fichier vide.

      Ensuite, vous ajouterez un style pour centrer le texte. Dans src/App.css, ajoutez le code suivant :

      jsx-tutorial/src/App.css

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

      Dans ce bloc de code, vous avez créé un sélecteur de classe CSS appelé .container et utilisé ça pour centrer le contenu en utilisant display : flex.

      Sauvegardez le fichier et quittez. Le navigateur sera mis à jour, mais rien ne changera. Pour pouvoir voir le changement, vous devez ajouter la classe CSS à votre composant React. Ouvrez le code JavaScript du composant :

      Le code CSS est déjà importé avec la ligne import './App.css'. Cela signifie que le webpack va tirer le code pour faire une feuille de style finale, mais pour appliquer le CSS à vos éléments, vous devez ajouter les classes. 

      Tout d’abord, dans votre éditeur de texte, changez les balises vides <> en <div>.

      jsx-tutorial/src/App.js

      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;
      

      Dans ce code, vous avez remplacé les balises vides –<>-avec les balises div. Les balises vides sont utiles pour regrouper votre code sans ajouter de balises supplémentaires, mais ici vous devez utiliser un div car les balises vides n’en acceptent aucuns attributs HTML.

      Ensuite, vous devez ajouter le nom de la classe. C’est là que JSX va commencer à s’écarter du HTML. Si vous vouliez ajouter une classe à un élément HTML habituel, vous le feriez comme ceci :

      <div class="container">
      

      Mais comme JSX est du JavaScript, il a quelques limites. L’une des limites est que JavaScript a réservé des mots-clés. Cela signifie que vous ne pouvez pas utiliser certains mots dans un code JavaScript. Par exemple, vous ne pouvez pas faire de variable appelée null parce que ce mot est déjà réservé.

      L’un des mots réservés est classe. Réagissez en contournant ce mot réservé en le modifiant légèrement. Au lieu d’ajouter l’attribut class, vous ajouterez l’attribut className. En règle générale, si un attribut ne fonctionne pas comme prévu, essayez d’ajouter la version en camel case. Un autre attribut qui est légèrement différent est l’attribut for que vous utiliseriez pour les étiquettes. Il y a quelques autres cas mais heureusement, la liste est assez courte. 

      Remarque : Dans React, les attributs sont souvent appelés des accessoires. Les accessoires sont des données que vous pouvez transmettre à d’autres composants personnalisés. Ils ont le même aspect que les attributs, sauf qu’ils ne correspondent à aucune spécification HTML. Dans ce tutoriel, nous les appellerons attributs, car ils sont principalement utilisés comme des attributs HTML standard. Cela permettra de les distinguer des accessoires qui ne se comportent pas comme des attributs HTML qui seront abordés plus loin dans cette série.

      Maintenant que vous savez comment l’attribut class est utilisé dans React, vous pouvez mettre à jour votre code pour inclure les styles. Dans votre éditeur de texte, ajoutez className="container" à votre étiquette de div d’ouverture : 

      jsx-tutorial/src/App.js

      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;
      

      Sauvegardez le fichier. Lorsque vous le ferez, la page se rechargera et le contenu sera centré.

      Éléments html centrés dans un navigateur.

      L’attribut className est unique dans React. Vous pouvez ajouter la plupart des attributs HTML à JSX sans aucune modification. Par exemple, retournez à votre éditeur de texte et ajoutez un id de salutation à votre élément <h1>. Il ressemblera à du HTML standard :

      jsx-tutorial/src/App.js

      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;
      

      Sauvegardez la page et rechargez le navigateur. Ce sera le même.

      Jusqu’à présent, JSX ressemble à un balisage standard, mais l’avantage de JSX est que même s’il ressemble au HTML, il a la puissance du JavaScript. Cela signifie que vous pouvez attribuer des variables et les référencer dans vos attributs. Pour référencer un attribut, enveloppez-le avec des accolades –{}– au lieu de guillemets.

      Dans votre éditeur de texte, ajoutez les lignes surlignées suivantes pour faire référence à un attribut :

      jsx-tutorial/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>
          </div>
        )
      }
      
      export default App;
      

      Dans ce code, vous avez créé une variable au-dessus de l’instruction de return appelée greeting avec la valeur de « greeting », puis référencé la variable dans l’attribut id de votre balise <h1>.

      Enregistrez et quittez le fichier. La page sera la même, mais avec une balise id.

      Page avec la balise id mise en évidence dans les outils de développement 

      Jusqu’à présent, vous avez travaillé avec quelques éléments seuls, mais vous pouvez aussi utiliser JSX pour ajouter de nombreux éléments HTML et les imbriquer pour créer des pages complexes.

      Pour le démontrer, vous ferez une page avec une liste d’emojis. Ces emoji seront enveloppés d’un élément <button>. Lorsque vous cliquez sur les émojis, vous obtenez leur nom abrégé CLDR.

      Pour commencer, vous devrez ajouter quelques éléments supplémentaires à la page. Ouvrez src/App.js dans votre éditeur de texte. Gardez-le ouvert tout au long de cette étape.

      Tout d’abord, ajoutez une liste d’emojis en ajoutant les lignes surlignées suivantes :

      jsx-tutorial/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;
      

      Ici vous avez créé une balise <ul> pour contenir une liste d’emojis. Chaque emoji se trouve dans un élément séparé <li> et est entouré d’un élément <button>. À l’étape suivante, vous ajouterez un événement à ce bouton.

      Vous avez également entouré l’emoji avec une balise <span> qui possède quelques autres attributs. Chaque span possède l’attribut de rôle fixé au rôle img. Cela signalera au logiciel d’accessibilité que l’élément agit comme une image. En outre, chaque <span> a également une étiquette aria-label et un id avec le nom de l’emoji. L’étiquette aria-label indiquera aux visiteurs munis de lecteurs d’écran ce qui est affiché. Vous utiliserez l’id lors de la rédaction des événements de l’étape suivante.

      Lorsque vous écrivez un code de cette manière, vous utilisez des éléments sémantiques ce qui permettra de garder la page accessible et facile à analyser pour les lecteurs d’écran. 

      Enregistrez et quittez le fichier. Votre navigateur va se rafraîchir et vous verrez ceci :

      navigateur avec emojis comme liste

      Maintenant, ajoutez un peu de style. Ouvrez le code CSS dans votre éditeur de texte :

      Ajoutez le code surligné suivant pour supprimer l’arrière-plan et la bordure par défaut des boutons tout en augmentant la taille de la police :

      jsx-tutorial/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;
      }
      

      Dans ce code, vous avez utilisé la taille de la police, la bordure et d’autres paramètres permettant d’ajuster l’apparence de vos boutons et de modifier la police. Vous avez également supprimé les styles de liste et ajouté display : flex à l’élément <ul> pour le rendre horizontal.

      Enregistrez et fermez le fichier CSS. Votre navigateur va se rafraîchir et vous verrez ceci :

      liste avec les styles par défaut supprimés 

      Vous avez maintenant travaillé avec plusieurs éléments JSX qui ressemblent à du HTML normal. Vous avez ajouté des classes, des ids et des balises aria, et vous avez travaillé avec des données sous forme de chaînes et de variables. Mais React utilise également des attributs pour définir comment vos éléments doivent répondre aux événements des utilisateurs. Dans l’étape suivante, vous commencerez à rendre la page interactive en ajoutant des événements au bouton.

      Étape 3 – Ajouter des événements aux éléments

      Dans cette étape, vous ajouterez des événements aux éléments en utilisant des attributs spéciaux et capturerez un événement de clic sur un élément de bouton. Vous apprendrez comment saisir les informations de l’événement pour envoyer une autre action ou utiliser d’autres informations dans le cadre du dossier.

      Maintenant que vous disposez d’une page d’information de base, il est temps d’y ajouter quelques événements. Il existe de nombreux gestionnaires d’événements que vous pouvez ajouter aux éléments HTML. React vous donne accès à tous ces éléments. Comme votre code JavaScript est couplé à votre balisage, vous pouvez rapidement ajouter les événements tout en gardant votre code bien organisé.

      Pour commencer, ajoutez le gestionnaire d’événements onclick. Cela vous permet d’ajouter un peu de code JavaScript directement à votre élément plutôt que d’attacher un auditeur de l’événement :

      jsx-tutorial/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
                  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;
      

      Comme il s’agit de JSX, vous avez mis onclick en camel case, ce qui signifie que vous l’avez ajouté en tant que onClick. Cet attribut onClick utilise une fonction d’anonymat pour récupérer des informations sur l’élément cliqué. 

      Vous avez ajouté une fonction de flèche anonyme qui obtiendra l’événement à partir du bouton cliqué, et l’événement aura une cible qui est l’élément <span>. Les informations dont vous avez besoin se trouvent dans l’attribut id auquel vous pouvez accéder avec event.target.id. Vous pouvez déclencher l’alerte avec la fonction alert().

      Sauvegardez le fichier. Dans votre navigateur, cliquez sur l’un des emojis et vous obtiendrez une alerte avec le nom.

      Alerte pour le party popper 

      Vous pouvez réduire une duplication en déclarant la fonction une fois et en la passant à chaque action onClick. Comme la fonction ne repose sur rien d’autre que des entrées et des sorties, vous pouvez la déclarer en dehors de la fonction du composant principal. En d’autres termes, la fonction n’a pas besoin d’accéder au champ d’application du composant. L’avantage de les garder séparés est que la fonction de votre composant est légèrement plus courte et que vous pouvez déplacer la fonction dans un fichier séparé plus tard si vous le souhaitez.

      Dans votre éditeur de texte, créez une fonction appelée displayEmojiName qui prend l’événement et appelle la fonction alert() avec un identifiant. Ensuite, passez la fonction à chaque attribut onClick : 

      jsx-tutorial/src/App.js

      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;
      

      Sauvegardez le fichier. Dans votre navigateur, cliquez sur un émoji et vous verrez la même alerte.

      Dans cette étape, vous avez ajouté des événements à chaque élément. Vous avez également vu comment JSX utilise des noms légèrement différents pour les événements des éléments, et vous avez commencé à écrire du code réutilisable en prenant la fonction et en la réutilisant sur plusieurs éléments. Dans l’étape suivante, vous allez écrire une fonction réutilisable qui renvoie des éléments JSX plutôt que d’écrire chaque élément à la main. Cela permettra de réduire encore la duplication.

      Étape 4 – Recouper les données pour créer des éléments

      Dans cette étape, vous irez au-delà de l’utilisation de JSX comme simple balisage. Vous apprendrez à le combiner avec JavaScript pour créer un balisage dynamique qui réduit le code et améliore la lisibilité. Vous refaites votre code dans un tableau que vous passez en boucle pour créer des éléments HTML.

      JSX ne vous limite pas à une syntaxe de type HTML. Il vous donne également la possibilité d’utiliser JavaScript directement dans votre balisage. Vous avez déjà un peu essayé en passant des fonctions aux attributs. Vous avez également utilisé des variables pour réutiliser les données. Il est maintenant temps de créer JSX directement à partir des données, en utilisant le code JavaScript standard.

      Dans votre éditeur de texte, vous devrez créer un tableau des données emoji dans le fichier src/App.js. Réouvrez le dossier si vous l’avez fermé :

      Ajouter une table qui contiendra les objets qui ont l’émoji et portent le nom de l’émoji. Notez que les emojis doivent être entourés de guillemets. Créez cette table au-dessus de la fonction App :

      jsx-tutorial/src/App.js

      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;
      

      Maintenant que vous avez les données, vous pouvez les passer en boucle. Pour utiliser JavaScript dans JSX, vous devez l’entourer d’accolades : {}. C’est la même chose que lorsque vous avez ajouté des fonctions aux attributs.

      Pour créer les composants React, vous devez convertir les données en éléments JSX. Pour ce faire, vous allez cartographier les données et renvoyer un élément JSX. Il y a quelques éléments que vous devez garder à l’esprit lorsque vous écrivez le code.

      Tout d’abord, un groupe d’articles doit être entouré d’un conteneur <div>. Deuxièmement, chaque objet a besoin d’un bien spécial appelé key. La key, ou clé, doit être une donnée unique que React peut utiliser pour garder une trace des éléments, afin de savoir quand mettre à jour le composant. La clé sera retirée du HTML compilé, car elle est réservée à un usage interne. Chaque fois que vous travaillez avec des boucles, vous devez ajouter une simple chaîne comme clé.

      Voici un exemple simplifié qui fait correspondre une liste de noms à une liste contenant <div>: 

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

      Le HTML qui en résulte ressemblerait à ceci :

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

      La conversion de la liste des emojis sera similaire. Le <ul> sera le conteneur. Vous allez cartographier les données et retourner un <li> avec une clé du nom court de l’emoji. Vous remplacerez les données codées en dur dans les champs <button> et <span> avec des informations provenant de la boucle. 

      Dans votre éditeur de texte, ajoutez ce qui suit :

      jsx-tutorial/src/App.js

      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;
      

      Dans le code, vous avez mis en correspondance sur la table d’emojis dans la balise <ul> et renvoyé un <li>. Dans chaque <li> vous avez utilisé le nom de l’emoji comme accessoire clé. Le bouton aura la même fonction que normalement. Dans l’élément <span>, remplacez l’étiquette aria-label et id par l’élément name. Le contenu de la balise <span> devrait être l’emoji. 

      Sauvegardez le fichier. Votre fenêtre se rafraîchira et vous verrez les données. Remarquez que la clé n’est pas présente dans le HTML généré.

      Navigateur avec outils de développement affichant le HTML mis à jour sans accessoires clés 

      La combinaison de JSX et de JavaScript standard vous donne de nombreux outils pour créer du contenu de manière dynamique, et vous pouvez utiliser n’importe quel JavaScript standard que vous souhaitez. Dans cette étape, vous avez remplacé le JSX codé en dur par une table et une boucle pour créer du HTML de façon dynamique. Dans l’étape suivante, vous afficherez les informations de manière conditionnelle en utilisant un court-circuit.

      Étape 5 – Présenter sous condition des éléments avec un court-circuit

      Dans cette étape, vous utiliserez le court-circuit pour afficher conditionnellement certains éléments HTML. Cela vous permettra de créer des composants qui peuvent masquer ou afficher du HTML en fonction d’informations supplémentaires, ce qui donnera à vos composants la souplesse nécessaire pour gérer plusieurs situations.

      Il y a des moments où vous aurez besoin d’un élément pour montrer des informations dans certains cas et pas dans d’autres. Par exemple, vous pouvez vouloir afficher un message d’alerte pour l’utilisateur seulement si certains cas sont vrais, ou vous pouvez vouloir afficher certaines informations de compte pour un administrateur que vous ne voudriez pas qu’un utilisateur normal voit.

      Pour ce faire, vous utiliserez un court-circuit. Cela signifie que vous utiliserez un conditionnel, et si la première partie est vraie, il renverra les informations dans la deuxième partie.

      Voici un exemple. Si vous vouliez afficher un bouton uniquement dans le case où l’utilisateur serait connecté, vous entoureriez l’élément avec des accolades et ajouteriez la condition précédente.

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

      Dans cet exemple, vous utilisez l’opérateur &&, qui renvoie la dernière valeur si tout est vrai. Sinon, il revient comme faux, ce qui indiquera à React de ne pas renvoyer de balisage supplémentaire. Si isLoggedIn est vrai, React affichera le bouton. Si isLoggedIn est faux, il n’affichera pas le bouton.

      Pour essayer, ajoutez les lignes surlignées suivantes :

      jsx-tutorial/src/App.js

      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;
      

      Dans votre éditeur de texte, vous avez créé une variable appelée displayAction avec une valeur assignée comme false (fausse). Vous avez ensuite entouré la balise <p> avec des accolades.  Au début des bretelles bouclées, vous avez ajouté displayAction && pour créer le conditionnel. 

      Enregistrez le fichier et vous verrez l’élément disparaître dans votre navigateur. Et surtout, il n’apparaîtra pas non plus dans le HTML généré. Ce n’est pas la même chose que de masquer un élément avec le CSS. Il n’existera pas du tout dans le balisage final.

      Navigateur avec outils de développement n'affichant aucun élément de paragraphe 

      Actuellement, la valeur de displayAction est codée en dur, mais vous pouvez également stocker cette valeur en tant qu’état ou la transmettre comme accessoire d’un composant parent. 

      Dans cette étape, vous avez appris à montrer des éléments de manière conditionnelle. Cela vous donne la possibilité de créer des composants qui sont personnalisables en fonction d’autres informations.

      Conclusion

      À ce stade, vous avez créé une application personnalisée avec JSX. Vous avez appris comment ajouter des éléments de type HTML à votre composant, ajouter du style à ces éléments, passer des attributs pour créer un balisage sémantique et accessible, et ajouter des événements aux composants. Vous avez ensuite mélangé JavaScript dans votre JSX pour réduire le code en double et afficher ou masquer les éléments de manière conditionnelle.

      C’est la base dont vous avez besoin pour fabriquer les futurs composants. En utilisant une combinaison de JavaScript et de HTML, vous pouvez construire des composants dynamiques qui sont flexibles et permettent à votre application de se développer et de changer.

      Si vous souhaitez en savoir plus sur React, consultez notre page thématique React.



      Source link

      Como criar elementos React com o JSX


      O autor selecionou a Creative Commons para receber uma doação como parte do programa Write for DOnations.

      Introdução

      Neste tutorial, você aprenderá como descrever elementos com o JSX. O JSX é uma abstração que permite que você escreva uma sintaxe do tipo HTML em seu código JavaScript. Ele permitirá que você compile componentes do React que se parecem com o markup HTML padrão. O JSX é a linguagem de modelagem dos elementos React. Sendo assim, ele é a base para qualquer markup que o React irá renderizar em seu aplicativo.

      Como o JSX também permite que você escreva JavaScript em seu markup, você será capaz de aproveitar as funções e métodos do JavaScript, incluindo o mapeamento de matriz e a avaliação de curto-circuito para condicionais.

      Como parte do tutorial, você irá captar eventos de clique em botões diretamente no markup e capturar instâncias quando a sintaxe não corresponder exatamente ao HTML padrão, tal como com as classes CSS. No final deste tutorial, você terá um aplicativo funcional que usa uma variedade de recursos do JSX para exibir uma lista de elementos que têm um ouvinte de cliques integrado. Este é um padrão comum em aplicativos React que você usará frequentemente no aprendizado do framework. Você também será capaz de misturar elementos HTML padrão com o JavaScript para ver como o React proporciona a capacidade de criar pedaços pequenos e reutilizáveis de código.

      Pré-requisitos

      Passo 1 — Adicionando um markup a um elemento React

      Como mencionado anteriormente, o React tem uma linguagem de marcação especial chamada JSX. É uma mistura da sintaxe HTML e JavaScript, que se parece com esta:

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

      Você reconhecerá algumas funcionalidades do JavaScript, como .filter e .map, além de algumas do HTML padrão, como o <div>. Mas existem outras partes que se parecem com ambos o HTML e JavaScript, como o <Card> e className.

      Este é o JSX, a linguagem de marcação especial que dá aos componentes React a sensação do HTML com o poder do JavaScript.

      Neste passo, você aprenderá a adicionar uma sintaxe básica do tipo HTML a um elemento React existente. Para começar, você adicionará elementos HTML padrão a uma função JavaScript. Em seguida, verá o código compilado em um navegador. Você também agrupará elementos para que o React possa compilá-los com um markup mínimo, deixando HTML limpo no resultado.

      Para começar, crie um novo projeto. Em sua linha de comando, execute o script a seguir para instalar um novo projeto usando o create-react-app:

      • npx create-react-app jsx-tutorial

      Após o projeto ser finalizado, vá para o diretório:

      Em uma nova guia ou janela do terminal, inicie o projeto usando o script start do Create React App. O navegador irá atualizar automaticamente com as alterações. Dessa forma, deixe este script em execução durante todo o tempo em que você estiver trabalhando:

      Você receberá um servidor local em execução. Se o projeto não abriu em uma janela de navegador, você pode encontrá-lo em http://localhost:3000/. Se estiver executando ele a partir de um servidor remoto, o endereço será http://your_IP_address:3000.

      Seu navegador carregará com um aplicativo React incluído como parte do Create React App.

      Projeto modelo do React

      Você irá desenvolver um conjunto completamente novo de componentes personalizados. Assim, será necessário começar removendo um pouco de código boilerplate para que você possa ter um projeto vazio. Para iniciar, abra o App.js em um editor de texto. Esse é o componente raiz que é injetado na página. Todos os componentes iniciarão a partir daqui.

      Em um novo terminal, vá para a pasta do projeto e abra o src/App.js com o seguinte comando:

      Você verá um arquivo como este:

      jsx-tutorial/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;
      

      Agora, exclua a linha import logo from './logo.svg e tudo o que vem depois da instrução de retorno na função. Altere-a para retornar null (nulo). O código final ficará parecido com este:

      jsx-tutorial/src/App.js

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

      Salve e saia do editor de texto.

      Por fim, exclua o logo. Na janela do terminal, digite o seguinte comando:

      Você não usará este arquivo SVG em seu aplicativo e é aconselhável remover arquivos não utilizados durante o trabalho. Dessa forma, seu código ficará mais organizado a longo prazo.

      Agora que essas partes do seu projeto foram removidas, continue para explorar as facetas do JSX. Essa linguagem de marcação é compilada pelo React e eventualmente torna-se o HTML que você vê em uma página Web. Sem aprofundar-nos no sistema interno, o React recebe o JSX e cria um modelo de como será sua página. Em seguida, cria os elementos necessários e adiciona-os à página.

      Isso significa que você pode escrever algo que se parece com HTML e esperar que o HTML renderizado seja parecido com isso. No entanto, há alguns pontos a se considerar.

      Primeiro, se você olhar para a guia ou janela executando seu servidor, verá isso:

      Output

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

      Esse é o linter dizendo que você não está usando o código React importado. Ao adicionar a linha import React from 'react' no seu código, você está importando o código JavaScript que converte o JSX em código React. Se não houver JSX, não há necessidade de importação.

      Vamos alterar isso adicionando uma pequena quantidade de JSX. Comece substituindo null por um exemplo Hello, World:

      jsx-tutorial/src/App.js

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

      Salve o arquivo. Se você olhar para o terminal com o servidor em execução, a mensagem de aviso não estará mais lá. Se você visitar seu navegador, verá a mensagem como um elemento h1.

      Tela do navegador mostrando "Hello, World"

      Em seguida, abaixo do sinalizador <h1>, adicione um parágrafo que contém a string I am writing JSX (Eu estou escrevendo JSX). O código ficará parecido com este:

      jsx-tutorial/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;
      

      Como o JSX abrange várias linhas, você precisará colocar a expressão entre parênteses.

      Salve o arquivo. Ao fazer isso, você verá um erro no terminal executando seu servidor:

      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 |

      Ao retornar JSX de uma função ou instrução, você precisa retornar um único elemento. Esse elemento pode ter filhos aninhados, mas deve haver um único elemento de nível superior. Neste caso, você está retornando dois elementos.

      A correção é uma pequena alteração no código. Cerque o código com um sinalizador vazio. Um sinalizador vazio é um elemento HTML sem palavras. Ele se parece com isto: <></>.

      Volte para ./src/App.js em seu editor e adicione uma tag vazia:

      jsx-tutorial/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;
      

      O sinalizador vazio cria um único elemento, mas quando o código é compilado, ele não é adicionado ao markup final. Isso manterá seu código limpo, ao mesmo tempo em que dá ao React um único elemento.

      Nota: você também poderia ter cercado o código com um div ao invés de sinalizadores vazios, contanto que o código retorne um elemento. Neste exemplo, um sinalizador vazio tem a vantagem de não adicionar markups extras ao resultado analisado.

      Salve o código e saia do arquivo. Seu navegador irá atualizar e exibir a página atualizada com o elemento de parágrafo. Além disso, quando o código é convertido, os sinalizadores vazios são removidos:

      Navegador mostrando markup e ferramentas de desenvolvedor mostrando markup sem sinalizadores vazios

      Você adicionou um pouco de JSX básico ao seu componente e aprendeu como todo JSX precisa ser aninhado em um único componente. No próximo passo, você adicionará estilo ao seu componente.

      Neste passo, você irá estilizar os elementos em seu componente para aprender como os atributos HTML funcionam com o JSX. Há muitas opções de estilo no React. Algumas delas envolvem escrever CSS em Javascript, já outras, usam os pré-processadores. Neste tutorial, você trabalhará com CSS importado e classes de CSS.

      Agora que você tem seu código, é hora de adicionar o estilo. Abra o App.css no seu editor de texto.

      Como você está iniciando com um JSX novo, o CSS atual faz referência a elementos que não existem mais. Como você não precisa do CSS, você pode exclui-lo.

      Após excluir o código, você terá um arquivo vazio.

      Em seguida, você adicionará um estilo para centralizar o texto. Em src/App.css, adicione o código a seguir:

      jsx-tutorial/src/App.css

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

      Nesse bloco de código, você criou um seletor de classe CSS chamado .container e usou ele para centralizar o conteúdo usando display: flex.

      Salve o arquivo e saia. O navegador será atualizado, mas nada mudará. Antes de ver a mudança, você precisa adicionar a classe CSS ao seu componente React. Abra o código do componente JavaScript:

      O código CSS já foi importado com a linha import '. /App.css. Isso significa que o webpack irá extrair o código para criar a folha de estilos final. No entanto, para aplicar o CSS aos seus elementos, você precisa adicionar as classes.

      Primeiro, em seu editor de texto, mude os sinalizadores vazios, <>, para <div>.

      jsx-tutorial/src/App.js

      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;
      

      Nesse código, você substituiu as tags vazias — <> — por sinalizadores div. Os sinalizadores vazios são úteis para agrupar seu código sem adicionar sinalizadores extras, mas aqui você precisa usar um div, pois sinalizadores vazios não aceitam atributos HTML.

      Em seguida, você precisa adicionar o nome da classe. É aqui que o JSX começará a se diferenciar do HTML. Se você quisesse adicionar uma classe a um elemento HTML usual, você faria isso da seguinte maneira:

      <div class="container">
      

      Mas, como o JSX é JavaScript, ele tem algumas limitações. Uma das limitações é que o JavaScript possui palavras-chave reservadas. Isso significa que você não pode usar certas palavras em qualquer código JavaScript. Por exemplo, você não pode criar uma variável chamada null, pois essa palavra já está reservada.

      Uma das palavras reservadas é a class. O React contorna a limitação dessa palavra reservada modificando-a ligeiramente. Ao invés de adicionar o atributo class, você adicionará o atributo className. Via de regra, se um atributo não estiver funcionando como esperado, tente adicionar a versão com minúsculas concatenadas. Outro atributo que é ligeiramente diferente é o atributo for que você usaria para rótulos. Existem alguns outros casos, mas, felizmente, a lista é relativamente curta.

      Nota: no React, atributos são frequentemente chamados de props. Os props são pedaços de dados que você passa para outros componentes personalizados. Eles parecem ser iguais aos atributos, exceto por não corresponderem a nenhuma especificação do HTML. Neste tutorial, os chamaremos de atributos, pois eles são usados principalmente como atributos HTML padrão. Isso os distingue dos props que não se comportam como atributos HTML. Estes serão abordados mais adiante nesta série.

      Agora que sabe como o atributo class é usado no React, atualize o código para incluir os estilos. Em seu editor de texto, adicione className="container" ao seu sinalizador inicial div:

      jsx-tutorial/src/App.js

      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;
      

      Salve o arquivo. Ao fazer isso, a página será atualizada e o conteúdo será centralizado.

      Elementos HTML centralizados em um navegador.

      O atributo className é único no React. Você pode adicionar a maioria dos atributos HTML ao JSX sem alterações. Para demonstrar um exemplo, volte para seu editor de texto e adicione um id de greeting ao seu elemento <h1>. Ele se parecerá com HTML padrão:

      jsx-tutorial/src/App.js

      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;
      

      Salve a página e atualize o navegador. Ele será o mesmo.

      Até agora, o JSX se parece com um markup padrão. A vantagem do JSX é que, embora se pareça com HTML, ele possui o poder do JavaScript. Isso significa que você pode atribuir variáveis e referenciá-las em seus atributos. Para fazer referência a um atributo, coloque-o entre chaves — {} — em vez de aspas.

      Em seu editor de texto, adicione as linhas destacadas a seguir para fazer referência a um atributo:

      jsx-tutorial/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>
          </div>
        )
      }
      
      export default App;
      

      Neste código, você criou uma variável acima da instrução return chamada greeting com o valor de "greeting". Em seguida, referenciou a variável no atributo id do seu sinalizador <h1>.

      Salve e saia do arquivo. A página será a mesma, mas com um sinalizador id.

      Página com sinalizador id destacado nas ferramentas de desenvolvedor

      Até agora, você trabalhou com alguns elementos isoladamente, mas você também pode usar o JSX para adicionar muitos elementos HTML e aninhá-los para criar páginas complexas.

      Para demonstrar isso, você criará uma página com uma lista de emojis. Estes emoji serão envolvidos com um elemento <button>. Ao clicar em um emoji, você receberá seu Nome simplificado em CLDR.

      Para começar, você precisará adicionar alguns elementos adicionais à página. Abra o src/App.css em seu editor de texto. Mantenha-o aberto durante este passo.

      Primeiro, adicione uma lista de emojis, adicionando as linhas destacadas a seguir:

      jsx-tutorial/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;
      

      Aqui, você criou um sinalizador <ul> para conter uma lista de emojis. Cada emoji está em um elemento <li> separado e está envolvido por um elemento <button>. No próximo passo, você adicionará um evento a este botão.

      Você também envolveu o emoji com um sinalizador <span> que possui alguns atributos adicionais. Cada span tem o atributo role (função) definido na função img. Isso sinalizará para softwares de acessibilidade que o elemento está agindo como uma imagem. Além disso, cada <span> possui também um atributo aria-label (sinalizador aria) e um atributo id com o nome do emoji. O aria-label dirá aos visitantes com leitores de tela o que está sendo exibido. Você usará o id ao escrever eventos no próximo passo.

      Ao escrever um código desta maneira, você está usando elementos semânticos, que ajudarão a manter a página acessível e fácil de analisar para leitores de tela.

      Salve e saia do arquivo. Seu navegador será atualizado e você verá isso:

      Navegador com emojis em lista

      Agora, adicione um pouco de estilo. Abra o código CSS em seu editor de texto:

      Para remover o plano de fundo padrão e a borda dos botões, ao mesmo tempo em que aumenta o tamanho da fonte, adicione o código em destaque a seguir:

      jsx-tutorial/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;
      }
      

      Neste código, você usou o font-size (tamanho de fonte), border (borda), e outros parâmetros para ajustar o visual de seus botões e alterar o tipo de fonte. Você também removeu os estilos de lista e adicionou o display: flex ao elemento <ul> para torná-lo horizontal.

      Salve e feche o arquivo CSS. Seu navegador será atualizado e você verá isso:

      Lista com estilo padrão removido

      Agora, você trabalhou com diversos elementos JSX que se parecem com HTML regular. Você adicionou classes, ids e sinalizadores aria, além de ter trabalhado dados como strings e variáveis. Apesar disso, o React também usa atributos para definir como os seus elementos devem responder aos eventos de usuário. No próximo passo, você começará a tornar a página interativa, adicionando eventos ao botão.

      Passo 3 — Adicionando eventos a elementos

      Neste passo, você irá adicionar eventos a elementos usando atributos especiais, além de capturar um evento de clique em um elemento de botão. Você aprenderá como capturar informações do evento para expedir outra ação, ou usar outras informações no âmbito do arquivo.

      Agora que você tem uma página básica com informações, é hora de adicionar alguns eventos a ela. Há muitos manipuladores de eventos que você pode adicionar a elementos HTML. O React dá acesso a todos eles. Como seu código JavaScript está associado ao markup, adicione rapidamente os eventos enquanto mantém o código bem organizado.

      Para começar, adicione o manipulador de eventos onclick. Ele permite que você adicione código JavaScript diretamente ao seu elemento, em vez de anexar um ouvinte de eventos:

      jsx-tutorial/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
                  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;
      

      Como este é o JSX, você deve ter aplicado a regra das minúsculas concatenadas em onclick, o que significa que você adicionou ele como onClick. Este atributo onClick utiliza uma função anônima para recuperar informações sobre o item que foi clicado.

      Você adicionou uma função de flecha anônima que receberá o evento a partir do botão clicado, e o evento terá como destino o elemento <span>. As informações que você precisa estão no atributo id, que você pode acessar com o event.target.id. Você pode disparar o alerta com a função alert().

      Salve o arquivo. Em seu navegador, clique em um dos emojis, e você verá um alerta com o nome.

      Alerta para lança-confete

      Você pode reduzir uma duplicação, declarando a função uma vez e passando ela para cada ação onClick. Como a função não depende de nada que não sejam entradas ou saídas, você pode declará-la fora da função do componente principal. Em outras palavras, a função não precisa acessar o âmbito de aplicação do componente. A vantagem de mantê-las separadas é que sua função do componente fica ligeiramente menor, e você pode mover a função para um arquivo separado mais tarde, caso quiser.

      Em seu editor de texto, crie uma função chamada displayEmojiName, que recebe um evento e chama a função alert() com um id. Em seguida, passe a função para cada atributo onClick:

      jsx-tutorial/src/App.js

      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;
      

      Salve o arquivo. Em seu navegador, clique em um emoji e você verá o mesmo alerta.

      Neste passo, você adicionou eventos a cada elemento. Você também viu como o JSX utiliza nomes ligeiramente diferentes para eventos de elemento. Além disso, começou a escrever um código reutilizável pegando a função e a reutilizando em vários elementos. No próximo passo, você irá escrever uma função reutilizável que retorna elementos JSX, ao invés de escrever cada elemento manualmente. Isso reduzirá ainda mais a duplicação de dados.

      Passo 4 — Mapeando dados para criar elementos

      Neste passo, você irá além do uso do JSX como markup simples. Você aprenderá a combiná-lo com JavaScript para criar um markup dinâmico, que reduz o tamanho do código e melhora a legibilidade. Você irá refatorar seu código em uma matriz sobre a qual aplicará um loop para criar elementos HTML.

      O JSX não limita você a uma sintaxe do tipo HTML. Ele também dá a você a capacidade de usar o JavaScript diretamente em seu markup. Você já experimentou um pouco isso passando funções para atributos. Além disso, você usou variáveis para reutilizar dados. Agora, é hora de criar JSX diretamente dos dados usando o código JavaScript padrão.

      Em seu editor de texto, você precisará criar uma matriz dos dados dos emojis no arquivo src/App.js. Abra o arquivo novamente caso tenha fechado ele:

      Adicione uma matriz que irá conter objetos que possuem o emoji e o nome do emoji. Note que os emojis precisam ser cercados por aspas. Crie esta matriz acima da função App:

      jsx-tutorial/src/App.js

      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;
      

      Agora que você tem os dados, pode aplicar um loop sobre eles. Para usar o JavaScript dentro do JSX, você precisa colocá-lo entre chaves: {}. O processo é semelhante a quando você adicionou funções a atributos.

      Para criar componentes React, você precisará converter os dados em elementos JSX. Para fazer isso, você irá mapear os dados e retornar um elemento JSX. Há algumas coisas que você precisará ter em mente enquanto escreve o código.

      Primeiramente, um grupo de itens precisa ser cercado por um contêiner <div>. Em segundo lugar, cada item precisa de uma propriedade especial chamada key (chave). A key precisa ser um pedaço de dados especial que o React pode usar para acompanhar os elementos. Dessa forma, ele consegue saber quando atualizar o componente. A chave será retirada do HTML compilado, já que ela é usada apenas para fins internos. Sempre que estiver trabalhando com loops, você precisará adicionar uma string simples como uma chave.

      Aqui está um exemplo simplificado que mapeia uma lista de nomes em um <div>:

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

      O HTML resultante se pareceria com este:

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

      Converter a lista de emojis acontecerá de forma similar. O <ul> será contêiner. Você irá mapear dados e retornar um <li> com uma chave do nome curto do emoji. Você irá substituir os dados codificados nos sinalizadores <button> e <span> por informações do loop.

      Em seu editor de texto, adicione o seguinte:

      jsx-tutorial/src/App.js

      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;
      

      No código, você mapeou a matriz de emojis no sinalizador <ul> e retornou um <li>. Em cada <li>, você usou o nome do emoji como o objeto key. O botão terá a mesma função que o normal. No elemento <span>, substitua o aria-label e id pelo name. O conteúdo do sinalizador <span> deve ser o emoji.

      Salve o arquivo. Sua janela será atualizada e você verá os dados. Note que a chave não está presente no HTML gerado.

      Navegador com ferramentas de desenvolvedor mostrando o HTML atualizado sem o objeto chave

      Combinar o JSX com o JavaScript padrão dá a você várias ferramentas para criar conteúdo de maneira dinâmica. Além disso, você pode usar qualquer JavaScript padrão que quiser. Neste passo, você substituiu o JSX codificado por uma matriz e um loop para criar o HTML de maneira dinâmica. No próximo passo, você exibirá as informações condicionalmente usando o curto-circuito.

      Neste passo, você usará o curto-circuito para exibir condicionalmente certos elementos HTML. Isso permitirá que você crie componentes que possam esconder ou exibir HTML com base em informações adicionais. Isso dá flexibilidade aos seus componentes para lidarem com situações diversas.

      Há vezes em que você precisará de um componente para exibir informações em alguns casos e não em outros. Por exemplo, você pode querer exibir apenas uma mensagem de alerta para o usuário se certos casos forem verdadeiros. Em outros casos, pode querer exibir algumas informações de conta para um administrador que você não quer que um usuário normal veja.

      Para fazer isso, você usará o curto-circuito. Isso significa que você usará uma condicional. Se a primeira parte for verdade, ela retornará as informações na segunda parte.

      Aqui está um exemplo. Se quisesse exibir um botão apenas se o usuário estivesse logado, você colocaria o elemento entre chaves e adicionaria a condição antes.

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

      Neste exemplo, você está usando o operador &&, que retorna o último valor se tudo for verdade. Caso contrário, ele retorna false (falso), que dirá ao React para não retornar nenhum markup adicional. Se isLoggedIn for verdadeiro, o React exibirá o botão. Se isLoggedIn for falso, ele não mostrará o botão.

      Para testar isso, adicione as linhas destacadas a seguir:

      jsx-tutorial/src/App.js

      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;
      

      Em seu editor de texto, você criou uma variável chamada displayAction com um valor de false. Em seguida, você colocou o sinalizador <p> entre chaves. No início das chaves, você adicionou displayAction && para criar a condicional.

      Salve o arquivo e você verá o elemento sumindo em seu navegador. Ainda mais importante, ele não aparecerá no HTML gerado. Isso não é a mesma coisa que esconder um elemento com o CSS. Ele não existirá em lugar algum no markup final.

      Navegador com ferramentas de desenvolvedor não mostrando nenhum elemento de parágrafo

      Agora, o valor de displayAction está codificado. No entanto, você também pode armazenar esse valor como um estado ou passá-lo como um objeto de um componente pai.

      Neste passo, você aprendeu como exibir elementos condicionalmente. Isso dá a você a capacidade de criar componentes que são personalizáveis com base em outras informações.

      Conclusão

      Até aqui, você criou um aplicativo personalizado com o JSX. Você aprendeu como adicionar elementos semelhantes a HTML ao seu componente, adicionar estilo a esses elementos, passar atributos para criar um markup semântico e acessível e adicionar eventos aos componentes. Em seguida, você misturou o JavaScript em seu JSX para reduzir o código duplicado e exibir e esconder elementos condicionalmente.

      Esta é a base que você precisa para criar componentes no futuro. Utilizando uma combinação de JavaScript e HTML, você pode desenvolver componentes dinâmicos que são flexíveis e permitem que seu aplicativo cresça e mude.

      Se quiser aprender mais sobre o React, confira nossa página do tópico do React.



      Source link