Давайте сегодня что-то сделаем руками. Если вы читали предыдущие статьи, то знаете, что мне нужно сделать сайт, который продемонстрирует мои навыки и портфолио.
В силу того, что сайт с нуля разрабатывать очень долго, нужно думать над дизайном, делать верстку, программировать поведение, то этот вариант я для себя на данном этапе не рассматривал.
Я определил для себя требования, которые важны для нового сайта:
- Сайт должен быть разработан на React;
- Сайт должен быть красивым и выглядеть профессионально;
- Должен поддерживаться WordPress и подобная CMS;
- Времени на разработку должно уйти 1-2 дня.
Для справки скажу, что сайт уже сделан, но контент еще нужно обновлять и переделывать.
Первым делом я воспользовался поисковиком, чтобы найти готовые шаблоны сайтов на React. Для это ввел запрос "wordpress react landing page" и "wordpress react template". Полазив на многих сайтах из поиска увидев много платных и бесплатных шаблонов я пришел, в итоге на сайт Envato - агрегатор с самыми класными шаблонами в интернете, присутствует много тем которые поддерживают и react и wordpress.
В итоге мне понравилась следующая тема: https://themeforest.net/item/trydo-creative-agency-react-template/25457315
В итоге я приобрел ее за $9 и скачал архив с файлами.
Перед тем, как начать редактировать проект необходимо подгрузить все зависимости. Для этого в коммандной строке вводим:
cd "<путь к папке с проектом>"
npm i
Запускаем проект и для этого выполняем команду:
npm start
Теперь начинаем редактировать. Используем Visual Studio Code. Вот так выглядит структура проекта:
Меняем все надписи. Ищем по структуре проекта и меняем текст, который будет отображаться на странице.
Далее ищем находим картинки, которые у нас отображаются и меняем их на те, что хотим вставить.
По итогу получаем промежуточный результат:
Завтра покажу конечный результат и опишу, как покупать домен и выкладывать сайт на сервер.