Создание административной панели на React.js + PHP

Name: Создание административной панели на React.js + PHP
Rating: 4.8 (273 reviews)

Получите реальный практический опыт и создайте свой полноценный продукт!

Created byИван Петриченко

Last updated 9/2022

Russian

What you'll learn

Научитесь создавать полноценные fullstack приложения
Напишите свою административную панель для статических сайтов
Получите реальный опыт разработки приложений, используя библиотеку React и PHP
Научитесь писать свои API на языке PHP
Научитесь работать с библиотекой axios и взаимодействию с API
Настроите свою систему сборки, используя Webpack, Gulp, Babel
Изучите декларативный подход при создании приложений и как правильно расширять их в будущем
Научитесь использовать готовые библиотеки компонентов, наподобие UIKit

Course content

4 sections • 29 lectures • 8h 14m total length

Как проходить данный курс3:34
В этом уроке мы говорим о том, как будет строится работа на данном курсе и как его лучше проходить.
Административная панель и зачем она нужна12:16
В этом уроке мы поговорим про то, что такое статический веб-сайт, административная панель, зачем она нужна и какой смысл создавать новую.
Настраиваем сборку проекта (Gulp, Webpack, Babel и локальный сервер)38:50
В этом уроке мы настроим сборку нашего проекта при помощи планировщика задач Gulp, Webpack, Babel и его выгрузку на локальный сервер в автоматическом режиме.
Создаем первый API и работаем с PHP14:56
В этом уроке мы с вами создадим свой первый API по выводу списка html страниц на сервере, используя PHP
Продолжаем работать с API, реализуем создание страниц на сервере11:34
В этом уроке мы продолжим работать с API и создадим функционал создания новых страниц на сервере
Знакомимся с библиотекой React и что необходимо знать для работы12:24
В этом уроке мы познакомимся с библиотекой React и узнаем, что именно нам понадобится для прохождения курса
Создаем приложение, используя React, библиотека axios, рефакторинг кода Jquery25:45
В этом уроке мы начнем создание нашего приложения, используя библиотеку React и познакомимся с axios для создания запросов
Создаем функционал удаления страниц на сервере5:56
В этом уроке мы создадим функционал удаления страниц на сервере

Создание визуального редактора, правильная работа с Iframe10:41
В этом уроке мы создадим визуальное отображение нашего редактора и поработаем с элементом Iframe. Узнаем нюансы его работы и как обходить их.
Включение редактирования элементов13:52
В этом уроке мы познакомимся с атрибутом contenteditable и включим редактирование всех текстовых элементов на странице
Работа с копиями DOM, подготовка к сохранению страницы29:22
В этом уроке мы будем подготавливать DOM дерево для постинга на реальную страницу, поработаем с редкими объектами в JS и Virtual DOM
Сохранение изменений на сервере10:12
В этом уроке мы реализуем сохранение всех изменений из редактора на основную страницу
Оптимизация работы вспомогательных методов4:01
В этом уроке мы отпимизируем работу вспомогательных методов, создав новый модуль
Изменяем неточности в поведении редактора16:12
В этом уроке мы доработаем нашу админ панель и устраним все недочеты в её работе
Включаем редактирование ссылок4:22
В этом уроке мы настроим редактирование не только текста, но и ссылок
Создаем пользовательский интерфейс28:21
В этом уроке мы создадим пользовательский интерфейс для нашей административной панели при помощи готовых компонентов любого фрэймворка/библиотеки
Реализация открытия других страниц в проекте | Рефакторинг модальных окон20:28
В этом уроке мы реализуем функционал открытия других страниц в админке и отрефакторим код модальных окон

Реализация восстановления страниц из резервных копий35:54
В этом уроке мы создадим функционал для восстановления резервных копий
Создаем редактор meta тэгов39:02
В этом уроке мы создадим редактор мета-тэгов на страницах проекта
Создаем редактор изображений27:24
В этом уроке мы создадим функционал по замене изображений на сайте
Доработка UI, оптимизация работы10:22
В этом уроке мы доработаем UI и оптимизируем работу компонентов
Фиксим непредвиденные обстоятельства1:33
Иногда в проектах может не быть папки img и это может привести к ошибке. В этом уроке мы исправим данное поведение.
Реализация авторизации в приложении, часть 133:40
В этом уроке мы начнем создавать функционал по авторизации в админке
Реализация авторизации в приложении, часть 222:22
В этом уроке мы продолжим работу над авторизацией и безопасностью нашей админки
Создаем финальный билд11:58
В этом уроке мы создадим таск для создания окончательного билда приложения и поговорим о том, что делать дальше

Настройка редактора кода21:48
В этом уроке мы настроим редактор кода VSCode
Настройка ESLint7:16
В этом уроке мы настроим крайне полезный плагин ESLint
Создание библиотеки IframeLoader10:55
В этом уроке мы создадим библиотеку для правильной загрузки iframe и разберемся как она работает
Использование Class fields9:40
В этом уроке мы посмотрим как можно использовать экспериментальную возможность JS для облегчения работы.

Requirements

Желание получить реальный опыт разработки приложений
Хорошее владение языком программирования JavaScript
Базовые знания библиотеки React
Базовые знания языка программирования PHP

Description

Этот курс направлен на практическое изучение того, как создать административную панель для статических сайтов в виде web приложения. Вы получите весь материал для работы и мы вместе будем создавать реальный fullstack (frontend + backend) проект шаг за шагом. Как итог курса - у вас будет готовый продукт, который можно использовать в своей работе, предлагать заказчикам как дополнительную услугу или просто положить в портфолио.

Для кого подойдет этот курс?

Если вы хотите приобрести реальный практический опыт создания fullstack приложений
Если у вас есть знания, но не хватает практики
Если вы хотите создать свой продукт и продавать его за дополнительную плату клиентам

Что внутри курса?

Мы с вами пройдем путь от установки первых npm пакетов, настройки планировщика задач и сборщика проекта до полноценного приложения, которое можно использовать абсолютно на любом сайте и расширять любыми дополнительными функциями. Посмотрим, как развивается приложение при разработке и появлении новых идей. И все это с понятными и доступными объяснениями всего кода.

Все ссылки на ресурсы и дополнительные материалы для практики будут предоставлены внутри курса.

мы научимся создавать полноценные fullstack приложения
мы получим реальный опыт разработки приложений, используя библиотеку React и PHP
научимся писать свои API на языке PHP
научимся работать с библиотекой axios и взаимодействию с API
настроим свою систему сборки, используя Webpack, Gulp, Babel
изучим декларативный подход при создании приложений и как правильно расширять их в будущем
научимся использовать готовые библиотеки компонентов, наподобие UIKit

Почему стоит начать свое обучение уже сейчас?

Не важно, фрилансер вы или работаете в офисе - вам пригодится опыт создания полноценных продуктов, используя сразу несколько технологий. Сейчас web приложения - это тренд, а библиотека React - самый популярный инструмент для их создания. Кроме этого, нужно уметь не только взаимодействовать с API, но и создавать их. Да и настроить сборку проекта так, чтобы было не стыдно :)

Все это мы будем делать шаг за шагом, так что не упускайте возможность!

Who this course is for:

Для тех людей, кто хотел бы приобрести реальный практический опыт создания fullstack приложений
Для тех людей, у кого есть знания, но не хватает практики
Для тех людей, кто хочет создать свой продукт и продавать его за дополнительную плату клиентам

Создание административной панели на React.js + PHP

What you'll learn

Explore related topics

Course content

Подготовка к работе8 lectures • 2hr 5min

Создание визуального редактора9 lectures • 2hr 18min

Реализация возможностей админки8 lectures • 3hr 2min

Дополнительные материалы4 lectures • 50min

Requirements

Description

Who this course is for: