Знакомство

  • 4 мин

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

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

Цели

В этом модуле вы:

  • Добавление состояния в приложение.
  • Добавьте обработчики событий.
  • Используйте перехватчик эффекта для реагирования на изменения состояния.

Необходимые условия

  • Знание JavaScript, HTML и CSS
  • Базовое понимание компонентов React
  • Редактор кода, например Visual Studio Code
  • Node.js установлен локально
  • Git установлен локально
  • Начальный проект, описанный в следующем разделе

Клонирование проекта

Этот модуль использует начальный проект. Клонируйте проект и откройте его в Visual Studio Code.

  1. Чтобы получить начальный проект, выполните следующие действия в командном окне или окне терминала. Этот шаг клонирует репозиторий и открывает начальную папку в Visual Studio Code.

    # Windows
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react\code\3-state-events\start
code .

    # macOS or Linux
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react/code/3-state-events/start
code .

  2. В Visual Studio Code откройте интегрированный терминал, выбрав Вид>Терминал. Или выберите Ctrl+`. (В Mac выберите Cmd+.)

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

    npm install
npm start

  4. Браузер по умолчанию должен автоматически открываться. Если это не так, откройте браузер и перейдите к http://locahost:8080. Откроется начальная страница.