Будучи студентом группы Flatiron School Software Development 2022, нашим вторым проектом было веб-приложение, которое использовало React JS в качестве внешнего интерфейса.
Мое приложение называется Home of Cocktails-Apalooza!, и мой React-код интерфейса развернут в Netlify. Я назвал это так, потому что использовал API с www.thecocktaildb.com. Я также использовал свой собственный API, который я развернул в Heroku.
Хуки React, которые я использовал, были useState и useEffect. Я использовал маршрутизацию на стороне клиента с помощью react-router-dom. Мои компоненты были созданы как функциональные компоненты.
Вы можете перемещаться по приложению с помощью панели навигации в верхней части страницы, созданной react-router-dom. Исходные визуализированные изображения загружаются с моего сервера db.json, размещенного на Heroku.
Поиск новых изображений коктейлей был создан с использованием формы с вложенным вводом и кнопкой JSX. Изображения коктейлей извлекаются из API www.thecocktaildb.com и ищутся по начальной букве названия коктейля.
Этот проект был более сложным, чем мой проект Фазы 1 (обычный Javascript), поскольку он включал в себя как внешний, так и внутренний код и был развернут на двух разных сервисах (Netlify и Heroku). Планирование структуры компонентов должно быть сделано в начале для проектов React. Я заметил, что изучение того, как стать опытным в React, занимает довольно много времени. Создание дорожной карты относительно того, как компоненты связаны друг с другом (в отношении состояния), может прояснить, как код будет перемещаться по всему приложению.
