На этом семинаре мы научились создавать приложение React с помощью Turbo 360, работать с компонентами и контейнерами React, а также сохранять и извлекать данные в хранилище данных Turbo и из него. В этой части семинара мы собираемся начать рендеринг наших внутренних данных во внешнем интерфейсе React.
Чтобы просмотреть видеоверсию этого семинара, нажмите ЗДЕСЬ.
Назад к интерфейсу
Теперь, когда мы можем получать задания из нашей базы данных, мы будем отображать их в интерфейсе. Откройте src/components/containers/Job.js.
Создание государства
У каждого компонента есть состояние, в котором хранятся данные, относящиеся к этому компоненту. Мы собираемся настроить состояние, содержащее информацию о работе. Используя состояние, мы сопоставим список заданий, чтобы отобразить их во внешнем интерфейсе. Сейчас мы добавим тестовое состояние, чтобы убедиться, что все работает правильно, и визуализируем данные из этого тестового состояния:
Убедитесь, что у вас все еще запущены веб-пакет и сервер разработки Turbo, и проверьте свое приложение на localhost:3000. Вы должны увидеть такую страницу:
Добавление запроса API
Теперь мы хотим получить наши данные из серверной части, чтобы отобразить их. Мы собираемся использовать модуль узла под названием «Суперагент», чтобы сделать запрос к нашему бэкэнду. Установите его с помощью следующей команды:
$ npm i -S superagent
Запрос должен быть сделан, как только страница загрузится, что делается путем переопределения метода жизненного цикла. React дает вам ряд жизненных циклов, которые можно (и нужно) переопределить, чтобы повлиять на поведение вашей страницы. Мы собираемся переопределить метод componentDidMount(), который срабатывает, как только компонент загружается. В этом методе мы добавляем запрос API к нашему собственному серверу с помощью Superagent.
Теперь, если вы откроете консоль и перезагрузите страницу, вы увидите 2 журнала. Данные из второго журнала — это то, что мы получили из серверной части.
Теперь мы просто анализируем наши данные на один уровень глубже, чтобы у нас был точный массив данных, с которым мы хотим работать, и устанавливаем состояние для включения этого массива:
Когда страница загрузится, она отреагирует на это изменение состояния и отобразит наши задания из бэкенда:
Чтобы проверить это, вернитесь к localhost:3000/addjob и создайте новое задание. Если вы обновите целевую страницу, вы должны увидеть новую вакансию.
Создание нового компонента
Теперь мы хотим разделить наш div, который показывает задания, на отдельный компонент. Причина, по которой мы это делаем, заключается в том, что div на самом деле не является компонентом-контейнером. Он просто отображает данные, поэтому он известен как компонент представления. Выполните следующие команды:
$ cd src $ cd components $ mkdir presentation $ cd presentation $ touch Preview.js $ cd ../../..
Этот компонент будет настолько простым, что даже не будет классом и не будет иметь состояния. Это известно как функциональный компонент без сохранения состояния. Добавьте следующий код в Preview.js:
И убедитесь, что вы обновили Jobs.js, чтобы включить компонент Preview и правильно передать ему данные:
Обратите внимание, что «…» в строке 43 называется оператором распространения, и этот синтаксис является сокращением для следующего:
<Preview title: {job.title} description={job.description} />
Теперь, если вы перезагрузите страницу, вы должны увидеть, что все ваши задания отображаются так же, как и раньше, но теперь мы используем лучшую архитектуру React с нашим компонентом презентации:
Заключительные слова
Если вы закончили это руководство, значит, вы успешно создали приложение React на основе Node/Express, которое динамически отображает данные. Поздравляем! Если вы хотите продолжить узнавать больше о React или о том, как использовать Redux с вашими проектами React, обязательно ознакомьтесь с еще несколькими бесплатными уроками по Turbo 360.
