Прошло около 3 недель с тех пор, как я в последний раз писал в блоге. Я опустил голову и помчался к финишу. Не могу сказать, что я готов на 100%, но скоро буду. Я завершил свой последний проект портфолио и завтра должен получить оценку. Надо сказать, Redux забросил меня на одного, работая над этим проектом. Создавая этот проект, я наткнулся на множество камней преткновения. Я думаю, что мой спринт был немного амбициозным, и в итоге я не знал материала Redux так глубоко, как хотел. Я определенно создал из-за этого некоторое собственное разочарование. Однако я его взломал и получил. Я смотрел видео на YouTube, Курс Wes Bos’s Redux и даже пару раз использовал HackHands благодаря полученному мной на счету Github Education Student Developer Pack 25 долларов.

HackHands был интересным опытом. Получение помощи от людей, для которых английский язык не является родным (я предполагал, что это именно тот человек, который я получу, учитывая, что делаю это 4 июля), и возможность рассказать, как я застрял. Два раза я не получил прямого ответа на свой вопрос. Тем не менее, я видел, как кто-то отлаживал мой код вживую, и в конце концов источник моей проблемы был освещен с помощью справки.

Итак, одна проблема, с которой я столкнулся, заключалась в том, что я не получал данные из моего API, когда я звонил fetchPlaces(). Я был в тупике. По общему мнению, он должен работать. Мой API возвращал данные в правильном формате JSON. Я имел:

Я ни за что не мог понять, почему я не получал обратно нужные мне данные. Я подумывал об использовании parseJSON(), но не думал, что мне это нужно, поскольку возвращаемые данные уже были в формате JSON. Я тоже собирался его использовать. Я не принимал во внимание тот факт, что я использовал fetch() для получения JSON из моего API. Чтобы узнать больше о небольшой, но важной части, которую мне не хватало, взгляните на Использование Fetch, а затем Body.json () на MDN. Обладая этими знаниями, я смог исправить свой вызов, реализовав .json() в строке 7 ниже, за которым последовал другой .then, который теперь имеет правильные данные для передачи в полезную нагрузку.

Еще одна проблема, с которой я столкнулся, - это нарушение CORS. CORS означает «совместное использование ресурсов между разными источниками» и может быть описан как:

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

Если в этом нет смысла, не волнуйтесь. Просто знайте, что CORS реализован для обеспечения безопасности в Интернете. Однако это также означало, что, если я явно не укажу, что мое приложение React может взаимодействовать с моим Rails API, я не смогу получить данные. К счастью, есть довольно простой способ включить это, и для этого потребовалось всего несколько строк кода. Сначала я добавил gem 'rack-cors', :require => 'rack/cors' в свой Gemfile и запустил bundle. Затем мне пришлось добавить код:

Это позволило моему приложению React, работающему на localhost:3000, без проблем взаимодействовать с моим сервером Rails API, работающим на localhost:3001.

В конце концов, работая над этим проектом, я узнал МНОГО. Я не на 100% доволен тем, где сейчас находится мое приложение. Однако, насколько я понимаю, он отвечает всем требованиям проекта, и это то, для чего я снимался. Я вижу, как абстрагируется от серверной части и настраивается для извлечения всех данных из внешнего вызова API. Однако, построив бэкенд, я знаю, что он всегда будет работать так, как я хочу, и, следовательно, это более стабильный проект для включения в портфолио.

Посетите Foodie View и убедитесь, что вы думаете сами. Я скоро загрузу его на Heroku и сделаю ссылку на него с GitHub.

Всего проведено время: 457: 50
Всего проведено уроков: 689

Вернитесь в День 109.

Если вы знаете кого-то, кто подумывает провести онлайн-курс по программированию, поделитесь этой статьей в Facebook и Twitter.

И нажмите 💚 ниже, чтобы другие люди увидели это здесь, на Medium. Спасибо за чтение.

Первоначально опубликовано на сайте itzsaga.github.io 5 июля 2017 г.