Создание административной панели на React.js + PHP
Этот курс направлен на практическое изучение того, как создать административную панель для статических сайтов в виде web приложения. Вы получите весь материал для работы и мы вместе будем создавать реальный fullstack (frontend + backend) проект шаг за шагом. Как итог курса – у вас будет готовый продукт, который можно использовать в своей работе, предлагать заказчикам как дополнительную услугу или просто положить в портфолио.
Для кого подойдет этот курс?
-
Если вы хотите приобрести реальный практический опыт создания fullstack приложений
-
Если у вас есть знания, но не хватает практики
-
Если вы хотите создать свой продукт и продавать его за дополнительную плату клиентам
Что внутри курса?
Мы с вами пройдем путь от установки первых npm пакетов, настройки планировщика задач и сборщика проекта до полноценного приложения, которое можно использовать абсолютно на любом сайте и расширять любыми дополнительными функциями. Посмотрим, как развивается приложение при разработке и появлении новых идей. И все это с понятными и доступными объяснениями всего кода.
Все ссылки на ресурсы и дополнительные материалы для практики будут предоставлены внутри курса.
-
мы научимся создавать полноценные fullstack приложения
-
мы получим реальный опыт разработки приложений, используя библиотеку React и PHP
-
научимся писать свои API на языке PHP
-
научимся работать с библиотекой axios и взаимодействию с API
-
настроим свою систему сборки, используя Webpack, Gulp, Babel
-
изучим декларативный подход при создании приложений и как правильно расширять их в будущем
-
научимся использовать готовые библиотеки компонентов, наподобие UIKit
Почему стоит начать свое обучение уже сейчас?
Не важно, фрилансер вы или работаете в офисе – вам пригодится опыт создания полноценных продуктов, используя сразу несколько технологий. Сейчас web приложения – это тренд, а библиотека React – самый популярный инструмент для их создания. Кроме этого, нужно уметь не только взаимодействовать с API, но и создавать их. Да и настроить сборку проекта так, чтобы было не стыдно 🙂
Все это мы будем делать шаг за шагом, так что не упускайте возможность!
Подготовка к работе
В этом уроке мы говорим о том, как будет строится работа на данном курсе и как его лучше проходить.
В этом уроке мы поговорим про то, что такое статический веб-сайт, административная панель, зачем она нужна и какой смысл создавать новую.
В этом уроке мы настроим сборку нашего проекта при помощи планировщика задач Gulp, Webpack, Babel и его выгрузку на локальный сервер в автоматическом режиме.
В этом уроке мы с вами создадим свой первый API по выводу списка html страниц на сервере, используя PHP
В этом уроке мы продолжим работать с API и создадим функционал создания новых страниц на сервере
В этом уроке мы познакомимся с библиотекой React и узнаем, что именно нам понадобится для прохождения курса
В этом уроке мы начнем создание нашего приложения, используя библиотеку React и познакомимся с axios для создания запросов
В этом уроке мы создадим функционал удаления страниц на сервере
Создание визуального редактора
В этом уроке мы создадим визуальное отображение нашего редактора и поработаем с элементом Iframe. Узнаем нюансы его работы и как обходить их.
В этом уроке мы познакомимся с атрибутом contenteditable и включим редактирование всех текстовых элементов на странице
В этом уроке мы будем подготавливать DOM дерево для постинга на реальную страницу, поработаем с редкими объектами в JS и Virtual DOM
В этом уроке мы реализуем сохранение всех изменений из редактора на основную страницу
В этом уроке мы отпимизируем работу вспомогательных методов, создав новый модуль
В этом уроке мы доработаем нашу админ панель и устраним все недочеты в её работе
В этом уроке мы настроим редактирование не только текста, но и ссылок
В этом уроке мы создадим пользовательский интерфейс для нашей административной панели при помощи готовых компонентов любого фрэймворка/библиотеки
В этом уроке мы реализуем функционал открытия других страниц в админке и отрефакторим код модальных окон
Реализация возможностей админки
В этом уроке мы создадим функционал для восстановления резервных копий
В этом уроке мы создадим редактор мета-тэгов на страницах проекта
В этом уроке мы создадим функционал по замене изображений на сайте
В этом уроке мы доработаем UI и оптимизируем работу компонентов
Иногда в проектах может не быть папки img и это может привести к ошибке. В этом уроке мы исправим данное поведение.
В этом уроке мы начнем создавать функционал по авторизации в админке
В этом уроке мы продолжим работу над авторизацией и безопасностью нашей админки
В этом уроке мы создадим таск для создания окончательного билда приложения и поговорим о том, что делать дальше
Дополнительные материалы
В этом уроке мы настроим редактор кода VSCode
В этом уроке мы настроим крайне полезный плагин ESLint
В этом уроке мы создадим библиотеку для правильной загрузки iframe и разберемся как она работает
В этом уроке мы посмотрим как можно использовать экспериментальную возможность JS для облегчения работы.
