Готовим с React.js
Я так люблю еду и программирование, что решил поработать над проектом, который объединяет и то, и другое. Сейчас я работаю над онлайн-книгой рецептов, созданной с помощью React. Цель состоит в том, чтобы создать приложение, которое позволит пользователю войти в профиль, в котором указаны все его диетические предпочтения и предпочтения в еде. Так, например, если человек не ест свинину или является вегетарианцем, то будет возвращена только еда, которую он может есть, или рецепты, которые он может приготовить. Я использую базу данных Yummly для извлечения необходимых данных. Я использую React для функциональности и Sass для дизайна. Репозиторий проекта можно найти здесь
Одна из самых важных основных функций моего проекта — возможность хранить и отображать результаты. Внутри объекта this.setState я сохраняю результаты выборки данных, вызываемой componentDidMount функция. В React componentDidMount — это первое, что запускается после инициализации компонента. По сути, это позволяет моей веб-странице загружать некоторые рецепты вместо пустой страницы.
Ключевой частью componentDidMount является this.setState({matches:matches.matches})”. . Каждый возвращаемый результат сохраняется в массиве с именем matches. Это действительно полезно, потому что позволяет отображать различные рецепты внутри DOM. Внутри функции рендеринга вы увидите это matches.map(function({id, recipeName, smallImageUrls}){})”. Здесь происходит то, что карта будет перебирать совпадения и регистрировать каждый результат в «элемент li» внутри основного «элемент ul». На изображении ниже вы можете увидеть окончательный результат.
Как видите, это всего лишь пример того, на что способен мой проект. Я планирую делать еженедельные серии, чтобы отслеживать мой прогресс в этом проекте. После работы над моим проектом SoundCloud я смог создать этот шаблон за день.
Помимо всего этого, вы можете подписаться на меня в twitter, Github и medium, чтобы быть в курсе моих успехов.
