Создание интерактивных компонентов React

Введение

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

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• настраивать React-проект с файлами HTML, CSS и JavaScript;
• использовать хук useState для управления состоянием приложения;
• условно рендерить компоненты в зависимости от состояния;
• стилизовать компоненты с использованием CSS.

🏆 Достижения

После завершения этого проекта вы сможете:

• создавать базовое React-приложение;
• реализовывать управление состоянием для контроля видимости элементов;
• интегрировать HTML, CSS и JavaScript в React-проект;
• понять основы создания интерактивных пользовательских интерфейсов с использованием React.

Настройка проекта

В этом шаге вы настроите проект и познакомитесь с предоставленными файлами.

1. Откройте редактор справа. В директории проекта вы можете увидеть следующие файлы:

├── style.css
├── index.html
├── script.js
└── dog.png

2. Нажмите кнопку "Go Live" в нижнем правом углу, чтобы открыть проект на порту 8080.

Реализация функциональности показа/скрытия

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

1. Откройте файл script.js.
2. Создайте компонент App:

function App() {
  const [show, setShow] = React.useState(true);

  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      "button",
      { onClick: () => setShow(!show) },
      show ? "Hide Element" : "Show Element"
    ),

    show && React.createElement("img", { src: "dog.png" })
  );
}

В этом компоненте:

• Мы используем хук useState для создания переменной состояния show и функции setShow для ее обновления.
• Начальное значение show устанавливается в true.
• Мы рендерим кнопку, которая переключает значение show при нажатии.
• Текст кнопки меняется в зависимости от значения show.
• Мы условно рендерим изображение с использованием переменной состояния show.

3. Сохраните файл App.js.
4. Обновите страницу в браузере.
5. Нажмите кнопку "Hide Element", чтобы скрыть изображение.
6. Нажмите кнопку "Show Element", чтобы показать изображение снова.

Поздравляем! Вы завершили проект "Show and Hide". Вы узнали, как использовать React для создания простой функциональности показа/скрытия с использованием кнопки.

Резюме

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