Узнайте, как создавать: приложение «Астрономическая картина дня» с помощью NASA API и React + Redux - Часть I

Недавно я узнал, что у НАСА есть публичный API. Прохладный! Давайте сегодня что-нибудь построим с помощью API!

Что будем строить? Мы собираемся создать приложение под названием астрономическая картина дня!

Предпосылки

Базовый опыт работы с JavasScript.

Мы используем React для создания пользовательского интерфейса приложения, Axios для получения данных и Redux для управления состоянием нашего приложения.

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

Шаг 1. Строительные леса

Пожалуйста, возьмите нашу конфигурацию Webpack из этого репозитория.

1. Мы собираемся переименовать текущий проект в nasa-react-redux.
2. Измените каталог, перейдите к ветке chapter-5 и выполните git pull origin chapter-5.
3. Удалите .git , поскольку мы не хотим, чтобы наш небольшой проект был связан с репозиторием руководств Webpack.
4. Установите зависимости npm: npm install или npm i для краткости.

Давайте загрузим нашу конфигурацию Webpack и откроем проект в нашем любимом текстовом редакторе.

Команда для загрузки Webpack - npm run start , и если все работает правильно, вы должны увидеть что-то вроде следующего.

Вы прошли часть строительных лесов и перешли ко второму шагу!

Шаг 2 - Зарегистрируйтесь для получения ключа API НАСА

Перейдите на официальный сайт НАСА и подпишитесь на ключ API. Это очень просто. Ключ должен быть доступен мгновенно.

Ключ API также будет отправлен на вашу электронную почту. Храните ключ в надежном месте.

Шаг 3 - Создание самого приложения с помощью React

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

Краткое объяснение того, как сейчас настроен React:

У нас есть index.html внутри public/ и index.js внутри src/.

Вкратце - у нас есть #root div внутри index.html, который подключается к React. Мы позволяем Webpack выполнять всю магию компиляции нашего React в простой JavaScript, который читает браузер.

Очевидно, это смехотворно упрощенное объяснение, но вы уловили основную идею.

Примечание. Если вам кажется, что это слишком много для вас, попробуйте создать пару веб-сайтов с использованием простого HTML / CSS / JS и вернитесь, когда почувствуете себя более уверенно - это может быть сложно, когда вы только начинаете.

Теперь набираем темп.

1. Мы создаем новый directory inside src/app и называем его components.
2. Внутри components мы создаем два дополнительных файла с именами AstronomyContainer.js и AstronomyCard.js.
3. Давайте очистим src/app/App.js и importAstronomyContainer.js.

С отслеживанием состояния и без сохранения состояния

Теперь нам нужно сделать несколько вещей.

Нам нужно написать два компонента, один из них называется stateful (он же интеллектуальный / динамический компонент), а второй - stateless (он же немой / фиктивный / статический компонент).

Вы можете угадать, что есть что?

• Без сохранения состояния - всегда возвращает один и тот же результат. Компонент, внутри которого «текут» данные. В основном используется для представления чего-либо. Не включает состояние, только реквизит!
• Stateful - имеет некоторую активность, а компонент имеет внутреннее состояние. Примеры действий: получение данных, взаимодействие с пользователем (например, нажатие кнопки) и передача данных.

Надеюсь, это не показалось слишком сложным, это действительно простая концепция.

Давайте напишем основу для двух компонентов.

Обратите внимание, как один из компонентов class основан, а второй - нет?

Компонент на основе класса будет нести состояние. Зачем нам государство? Нам нужно состояние, чтобы мы могли сохранить то, что происходит с нашим динамическим приложением.

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

Пример :

У нас есть счетчик с нулевым начальным номером. Начальное состояние равно нулю. Пользователь нажимает на кнопку. Как мы собираемся соединить части вместе и, что более важно, увеличивать или уменьшать число?

Нам нужен какой-то динамический механизм для представления наших действий и преобразования их в репрезентативную обратную связь / данные. Мы называем это государством. Как только вы используете состояние - вы не можете жить без него.

Вернемся к созданию приложения. Взгляните на астрономическую картину НАСА конечной точки дня.

Убедитесь, что вы просматриваете URL-адрес и измените api_key= на свой личный ключ.

Нам нужно как-то получить данные. К счастью для нас, это относительно легко.

Зайдите в корень вашего проекта и установите Axios.

npm i axios

Я покажу вам код. Попытайтесь понять это - я объясню это ниже.

Не забудьте заменить ключ API своим личным.

1. Импортируем axios
2. Мы вызываем метод constructor() , в котором инициализируем наше состояние. Начальное состояние - это просто пустой массив.
3. Мы называем жизненный цикл componentDidMount, а внутри метода жизненного цикла объявляем константы END_POINT и API_KEY.
4. Внутри метода componentDidMount мы вызываем запрос GET с axios.
5. Axios возвращает обещание, и внутри этого обещания у нас есть доступ к данным. Данные под response.data.

Если вы откроете консоль браузера, вы сможете увидеть ответ.

Мы почти там. Теперь нам нужно сохранить ответ в текущем состоянии.

Мы вызываем метод setState() и передаем наш объект состояния.

Если мы console.log() наше состояние, мы должны увидеть данные! Последний шаг с текущим компонентом, нам также необходимо передать это состояние нашему дочернему компоненту / компоненту без состояния.

Мы передаем AstronomyCard опору как наше состояние. Я включил деструктуризацию причудливых маленьких объектов.

Итак, как нам использовать родительские данные внутри нашего брата или сестры? Оказывается, это несложно - работать с React легко и интуитивно.

У нас есть доступ к данным под props.data в нашем родном брате. Я разбираю объект, поэтому нам не нужно каждый раз выписывать длинные реквизиты. Вместо props.data.title можно написать {title}.

"Последняя вещь. Возьмите стили здесь и разместите их i »n src/assets/stylesheets/styles.scss

Давайте посмотрим на наше приложение.

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

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

НАСА может включать видео вместо URL-адресов. Решение можно найти в файле AstronomyCard.js .

Часть II

Исходный код