В последнее время мне захотелось больше попрактиковаться с ReactJS, поэтому я присоединился ко второму соревнованию Speedrun P1xt. Подробнее о том, что значит здесь, можно прочитать. По сути, у нас есть месяц, чтобы закончить как можно больше проектов FCC, а затем создать сайт-портфолио с этими проектами.
Первым испытанием, которое я принял, была Машина случайных цитат, потому что это казалось очень простым, и это было, за исключением некоторых мелких деталей, которые заняли немного больше времени, чем ожидалось :D.
Самыми большими проблемами были:
- Понимание того, как работает create-react-app.
- Поиск хорошего API котировок
- Работаю над дизайном, так как я не очень хороший дизайнер xD
Шаг 1
В последний раз я использовал React для создания приложения несколько месяцев назад, но я никогда не использовал для этого create-react-app. С ним довольно легко начать, и это полезно, по крайней мере, до сих пор… :D.
Шаг 2
Часть приложения, которая заняла больше всего времени, заключалась в поиске списка, JSON или API, в котором есть как минимум 20–30 цитат, которые я мог бы использовать. Я видел, как другие используют API, но у меня он почему-то не работал, поэтому я нашел этот JSON на github.
Я не совсем уверен, является ли это допустимым файлом JSON, даже если он утверждает, что это так, потому что, как вы можете видеть, вокруг него квадратные скобки… Мне потребовалось некоторое время, чтобы преобразовать его в действительный JSON, сначала скопировав все в файл. строку и применяя к ней серию .replacein в JavaScript, пока она не станет одной: D.
Шаг 3
Последней частью была работа над CSS.
У меня нет проблем с CSS, на самом деле мне очень нравится с ним работать. Сложнее всего было найти «приличный» дизайн, смешивая цвета со шрифтами, выравниванием и т. д.
Я использовал простой синий цвет для фона, текста и кнопок и использовал flexbox, чтобы выровнять его по центру. Не самый лучший, но работает, так что я доволен.
Ссылки
Вы можете увидеть работающее приложение здесь.
Также здесь находится репозиторий github.
