Полный Full Stack курс ReactJS + NodeJS для начинающих за 4 часа! (MongoDB, Express, React, NodeJS)
00:00:00 Бэкенд (начало)
00:00:28 Теория по бэкенду
00:08:26 Начало разработки бэкенда
00:10:25 Установка библиотеки Express
00:10:57 Подключаем модульный подход для NodeJS (import, export, es6 и т.п.)
00:12:15 Начинаем разработку приложения на Express
00:19:11 Делаем HTTP-запросы на приложение через Insomnia
00:20:05 Создаем тестовую авторизацию
00:23:26 Подключаем JSON Web Token (JWT)
00:27:08 Делаем регистрацию + подключаем базу данных MongoDB
00:31:18 Создаем модель UserModel
00:36:07 Устанавливаем Express Validator и подключаем в проект
00:44:38 Создаем пользователя в БД
00:45:45 Шифруем пароль с помощью BCrypt
00:48:45 Подключаемся к БД через программу MongoDB Compass
00:51:47 Обрабатываем ошибки
00:57:17 Скрываем пароль юзера из ответа
00:58:35 Делаем реальную авторизацию
01:04:53 Делаем роут на получение информации о профиле
01:05:52 Создаем middleware (функцию посредник) - checkAuth.js
01:16:47 Делаем небольшой рефакторинг index.js
01:19:52 Создаем функционал для статей (CRUD)
01:50:18 Делаем загрузку картинок на сервер (Multer)
01:56:10 Возвращаем статические файлы (загруженные картинки)
01:57:54 Создаем middleware - handleValidationErrors.js
02:01:06 Рефакторим итоговый код бэкенда
02:05:09 Фронтенд
02:06:22 Изучаем структуру фронтенд проекта
02:09:16 Подключаем React Router
02:13:34 Подключаем Redux Toolkit
02:15:26 Создаем slice для статей (posts)
02:19:20 Настраиваем Axios
02:21:13 Исправляем ошибку CORS
02:23:23 Создаем асинхронный action в Redux Toolkit
02:25:32 Сохраняем в стейт статус запроса и сами статьи
02:32:58 Вытаскиваем тэги из бэкенда
02:36:28 Делаем вывод полной записи
02:44:01 Создаем функционал для авторизации
03:00:10 Проверяем авторизован пользователь или нет
03:06:00 Сохранять токен в LocalStorage, чтобы не выкидывало из аккаунта
03:16:55 Делаем форму регистрации
03:24:38 Разрешаем удалять статью только автору
03:27:44 Форма создания статьи + Simple Editor
03:34:24 Загрузка изображения на сервер
03:43:04 Отправка статьи на бэкенд
03:51:43 Рендерим статьи с помощью React Markdown
03:54:10 Удаление статьи
04:01:55 Редактирование статьи
04:09:49 Что сказала кукуруза? (итого)
04:10:25 Домашние задания для тебя
04:13:02 Деплой блога на Heroku + Vercel
04:14:24 Heroku
04:17:56 Vercel
04:23:45 Конец
https://www.youtube.com/watch?v=GQ_pTmcXNrQ
👉 @frontend_1
00:00:00 Бэкенд (начало)
00:00:28 Теория по бэкенду
00:08:26 Начало разработки бэкенда
00:10:25 Установка библиотеки Express
00:10:57 Подключаем модульный подход для NodeJS (import, export, es6 и т.п.)
00:12:15 Начинаем разработку приложения на Express
00:19:11 Делаем HTTP-запросы на приложение через Insomnia
00:20:05 Создаем тестовую авторизацию
00:23:26 Подключаем JSON Web Token (JWT)
00:27:08 Делаем регистрацию + подключаем базу данных MongoDB
00:31:18 Создаем модель UserModel
00:36:07 Устанавливаем Express Validator и подключаем в проект
00:44:38 Создаем пользователя в БД
00:45:45 Шифруем пароль с помощью BCrypt
00:48:45 Подключаемся к БД через программу MongoDB Compass
00:51:47 Обрабатываем ошибки
00:57:17 Скрываем пароль юзера из ответа
00:58:35 Делаем реальную авторизацию
01:04:53 Делаем роут на получение информации о профиле
01:05:52 Создаем middleware (функцию посредник) - checkAuth.js
01:16:47 Делаем небольшой рефакторинг index.js
01:19:52 Создаем функционал для статей (CRUD)
01:50:18 Делаем загрузку картинок на сервер (Multer)
01:56:10 Возвращаем статические файлы (загруженные картинки)
01:57:54 Создаем middleware - handleValidationErrors.js
02:01:06 Рефакторим итоговый код бэкенда
02:05:09 Фронтенд
02:06:22 Изучаем структуру фронтенд проекта
02:09:16 Подключаем React Router
02:13:34 Подключаем Redux Toolkit
02:15:26 Создаем slice для статей (posts)
02:19:20 Настраиваем Axios
02:21:13 Исправляем ошибку CORS
02:23:23 Создаем асинхронный action в Redux Toolkit
02:25:32 Сохраняем в стейт статус запроса и сами статьи
02:32:58 Вытаскиваем тэги из бэкенда
02:36:28 Делаем вывод полной записи
02:44:01 Создаем функционал для авторизации
03:00:10 Проверяем авторизован пользователь или нет
03:06:00 Сохранять токен в LocalStorage, чтобы не выкидывало из аккаунта
03:16:55 Делаем форму регистрации
03:24:38 Разрешаем удалять статью только автору
03:27:44 Форма создания статьи + Simple Editor
03:34:24 Загрузка изображения на сервер
03:43:04 Отправка статьи на бэкенд
03:51:43 Рендерим статьи с помощью React Markdown
03:54:10 Удаление статьи
04:01:55 Редактирование статьи
04:09:49 Что сказала кукуруза? (итого)
04:10:25 Домашние задания для тебя
04:13:02 Деплой блога на Heroku + Vercel
04:14:24 Heroku
04:17:56 Vercel
04:23:45 Конец
https://www.youtube.com/watch?v=GQ_pTmcXNrQ
👉 @frontend_1
YouTube
Полный Full Stack курс ReactJS + NodeJS для начинающих за 4 часа! (MongoDB, Express, React, NodeJS)
В этом видео ты научишься с нуля разрабатывать бэкенд на стэке MERN (MongoDB, Express, React, NodeJS) и подключать к фронтенду свой бэкенд. Также, к завершению урока ты научишься деплоить своё приложение на Heroku + Vercel.
Курс идеально подойдёт для новичков…
Курс идеально подойдёт для новичков…
👍11
Интерактивное руководство по рендерингу в React
В чистом виде React - это библиотека для построения пользовательских интерфейсов. Она настолько проста, что всю ментальную модель можно представить в виде формулы v = f(s) - где ваше представление является просто функцией вашего состояния.
Хотя это уравнение дает нам простую мысленную модель работы React, есть один аспект уравнения, который до сих пор, после стольких лет, кажется, смущает людей. Когда и как именно вызывается f? Или, говоря иначе, когда и как React обновляет представление?
Этой, казалось бы, простой теме посвящено множество постов в блогах, докладов на конференциях и сообщений в твиттере. И все же почему-то даже опытные разработчики React имеют некоторые (часто неизвестные) заблуждения на этот счет.
https://ui.dev/why-react-renders
👉 @frontend_1
В чистом виде React - это библиотека для построения пользовательских интерфейсов. Она настолько проста, что всю ментальную модель можно представить в виде формулы v = f(s) - где ваше представление является просто функцией вашего состояния.
Хотя это уравнение дает нам простую мысленную модель работы React, есть один аспект уравнения, который до сих пор, после стольких лет, кажется, смущает людей. Когда и как именно вызывается f? Или, говоря иначе, когда и как React обновляет представление?
Этой, казалось бы, простой теме посвящено множество постов в блогах, докладов на конференциях и сообщений в твиттере. И все же почему-то даже опытные разработчики React имеют некоторые (часто неизвестные) заблуждения на этот счет.
https://ui.dev/why-react-renders
👉 @frontend_1
👍5
rem vs em - все, что нужно знать
CSS является важнейшей частью дизайна любого сайта, однако разобраться в тонкостях его использования бывает непросто. Одним из наиболее важных моментов, требующих понимания, является разница между использованием rem и em в CSS, а также то, почему и когда следует использовать ту или иную единицу.
Понимание различий между этими двумя единицами крайне важно для веб-разработчиков, которые хотят создавать гибкие и отзывчивые веб-страницы, которые легко поддерживать и изменять. Кроме того, это поможет вашему сайту соответствовать современным рекомендациям по обеспечению доступности веб-страниц.
В этой статье мы рассмотрим все, что связано с em и rem, их различия, когда и как их использовать, а также практические примеры использования em и rem в действии. К концу статьи вы должны иметь четкое представление об обоих значениях. Без лишних слов перейдем непосредственно к делу.
https://dev.to/refine/rem-vs-em-everything-you-need-to-know-5342
👉 @frontend_1
CSS является важнейшей частью дизайна любого сайта, однако разобраться в тонкостях его использования бывает непросто. Одним из наиболее важных моментов, требующих понимания, является разница между использованием rem и em в CSS, а также то, почему и когда следует использовать ту или иную единицу.
Понимание различий между этими двумя единицами крайне важно для веб-разработчиков, которые хотят создавать гибкие и отзывчивые веб-страницы, которые легко поддерживать и изменять. Кроме того, это поможет вашему сайту соответствовать современным рекомендациям по обеспечению доступности веб-страниц.
В этой статье мы рассмотрим все, что связано с em и rem, их различия, когда и как их использовать, а также практические примеры использования em и rem в действии. К концу статьи вы должны иметь четкое представление об обоих значениях. Без лишних слов перейдем непосредственно к делу.
https://dev.to/refine/rem-vs-em-everything-you-need-to-know-5342
👉 @frontend_1
👍4
Шпаргалка по HTML, CSS и JavaScript
Здесь вы можете найти примеры кода HTML, CSS и JavaScript. Каждый пример имеет пояснение. Подобная шпаргалка.
https://htmlcheatsheet.com/js/
👉 @frontend_1
Здесь вы можете найти примеры кода HTML, CSS и JavaScript. Каждый пример имеет пояснение. Подобная шпаргалка.
https://htmlcheatsheet.com/js/
👉 @frontend_1
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Theme toggles
Это коллекция замечательных, простых в использовании, анимированных тумблеров, предназначенных для переключения между светлым и темным режимами. Это модульная библиотека, цель которой - обеспечить широкие возможности настройки там, где это необходимо. Отлично работает с CSS-фреймворками, такими как Tailwindcss.
https://github.com/AlfieJones/theme-toggles
👉 @frontend_1
Это коллекция замечательных, простых в использовании, анимированных тумблеров, предназначенных для переключения между светлым и темным режимами. Это модульная библиотека, цель которой - обеспечить широкие возможности настройки там, где это необходимо. Отлично работает с CSS-фреймворками, такими как Tailwindcss.
https://github.com/AlfieJones/theme-toggles
👉 @frontend_1
👍6
Javascript: базовые вопросы и понятия для самых маленьких
Javascript ― язык весьма оригинальный. Его можно любить, ненавидеть и даже бояться, но равнодушным он вас вряд ли оставит. Не знать или не понимать, с чем ты работаешь ― самая частая ошибка, допускаемая современными фронтенд‑разработчиками. Вам бы понравилось, если бы дантист, к которому вы пришли, не понимал, какой он инструмент использует и какие у него особенности работы? Очевидно, что нет. И рано или поздно, если вы действительно хотите стать профессионалами, вы разберётесь во всём, но как сделать так, чтоб это случилось раньше?
В этой статье в блоге ЛАНИТ хотелось бы показать, что о сложных вещах можно и нужно говорить просто.
https://habr.com/ru/companies/lanit/articles/718130/
👉 @frontend_1
Javascript ― язык весьма оригинальный. Его можно любить, ненавидеть и даже бояться, но равнодушным он вас вряд ли оставит. Не знать или не понимать, с чем ты работаешь ― самая частая ошибка, допускаемая современными фронтенд‑разработчиками. Вам бы понравилось, если бы дантист, к которому вы пришли, не понимал, какой он инструмент использует и какие у него особенности работы? Очевидно, что нет. И рано или поздно, если вы действительно хотите стать профессионалами, вы разберётесь во всём, но как сделать так, чтоб это случилось раньше?
В этой статье в блоге ЛАНИТ хотелось бы показать, что о сложных вещах можно и нужно говорить просто.
https://habr.com/ru/companies/lanit/articles/718130/
👉 @frontend_1
👍6❤2😁1
JavaScript для самых маленьких. Часть 2
Не так давно в блоге ЛАНИТ на Хабре мы представили вашему вниманию часть нашей методички по JavaScript. Сегодня же предлагаем ознакомиться с ещё одним блоком, который затрагивает самые базовые и необходимые понятия для тех, кто только начинает свой путь в мире JavaScript.
https://habr.com/ru/companies/lanit/articles/733064/
👉 @frontend_1
Не так давно в блоге ЛАНИТ на Хабре мы представили вашему вниманию часть нашей методички по JavaScript. Сегодня же предлагаем ознакомиться с ещё одним блоком, который затрагивает самые базовые и необходимые понятия для тех, кто только начинает свой путь в мире JavaScript.
https://habr.com/ru/companies/lanit/articles/733064/
👉 @frontend_1
👍2
50+ ChatGPT промтов для веб-разработчиков
Если вы устали от утомительных и повторяющихся задач по программированию и хотите оптимизировать свою эффективность, то вы попали по адресу. С помощью ChatGPT можно оптимизировать рабочий процесс, сократить количество ошибок и даже получить представление о том, как улучшить свой код.
В этой статье мы предоставим вам более 50 подсказок и стратегий, которые помогут вам ускорить рабочий процесс веб-разработки с помощью ChatGPT. Здесь вы найдете все, что нужно, чтобы максимально эффективно использовать ИИ в качестве веб-разработчика: от изучения концепций в качестве новичка до подготовки к собеседованиям.
https://www.builder.io/blog/ai-prompts-for-web-developers-chatgpt
👉 @frontend_1
Если вы устали от утомительных и повторяющихся задач по программированию и хотите оптимизировать свою эффективность, то вы попали по адресу. С помощью ChatGPT можно оптимизировать рабочий процесс, сократить количество ошибок и даже получить представление о том, как улучшить свой код.
В этой статье мы предоставим вам более 50 подсказок и стратегий, которые помогут вам ускорить рабочий процесс веб-разработки с помощью ChatGPT. Здесь вы найдете все, что нужно, чтобы максимально эффективно использовать ИИ в качестве веб-разработчика: от изучения концепций в качестве новичка до подготовки к собеседованиям.
https://www.builder.io/blog/ai-prompts-for-web-developers-chatgpt
👉 @frontend_1
👍4
Совет по Javascript 💡
Возможно, вы не знали, что мы можем легко добавить пользовательские проверки в форме HTML 🤩
👉 @frontend_1
Возможно, вы не знали, что мы можем легко добавить пользовательские проверки в форме HTML 🤩
👉 @frontend_1
👍11
Совет по CSS 💡
Знаете ли вы, что мы можем легко определить, поддерживается ли функция CSS в браузере или нет, и применить резервные стили, если они не поддерживаются? 🤩
👉 @frontend_1
Знаете ли вы, что мы можем легко определить, поддерживается ли функция CSS в браузере или нет, и применить резервные стили, если они не поддерживаются? 🤩
👉 @frontend_1
👍4
11 этапов становления JavaScript Full-Stack инженера
За последний год я получил множество сообщений, в основном от новичков, только что окончивших вуз и вступивших в мир программирования. Большинство вопросов касаются того, как быстро повысить свою квалификацию, как стать Full Stack Developer или как выбрать направление карьеры.
Хотя я стараюсь отвечать каждому по отдельности, я хочу объединить свой собственный опыт и создать дорожную карту, как стать Full-Stack инженером, которой я хочу поделиться со всеми.
https://dev.to/paulknulst/11-stages-to-become-a-javascript-full-stack-engineer-ngm
👉 @frontend_1
За последний год я получил множество сообщений, в основном от новичков, только что окончивших вуз и вступивших в мир программирования. Большинство вопросов касаются того, как быстро повысить свою квалификацию, как стать Full Stack Developer или как выбрать направление карьеры.
Хотя я стараюсь отвечать каждому по отдельности, я хочу объединить свой собственный опыт и создать дорожную карту, как стать Full-Stack инженером, которой я хочу поделиться со всеми.
https://dev.to/paulknulst/11-stages-to-become-a-javascript-full-stack-engineer-ngm
👉 @frontend_1
👍2
HTML, CSS, PHP: полная шпаргалка
https://bookflow.ru/html-css-php-polnaya-shpargalka-cheat-sheet/
👉 @frontend_1
https://bookflow.ru/html-css-php-polnaya-shpargalka-cheat-sheet/
👉 @frontend_1
👍3
Forwarded from React
React: революция использования фигурных скобочек
Хорошо, react. Как много мы используем всего, потому что так исторически сложилось: пишем функции задом наперед (сначала объяви, потом вызывай). Оборачиваем все в стрелочные функции и константы с ними, когда достаточно именованной функции. Этот список можно хорошенько продолжить.
В этой статье хотелось бы обсудить несколько привычек, которые есть у нас всех и которые, возможно, пора переосмыслить.
Начнем с кастомных хуков, которым надо вернуть результат, в частности пару значений. Классическим примером может быть хук для запроса данных по сети и отслеживания в процессе ли этот запрос сейчас, чтобы добавить на страницу лоадер.
https://habr.com/ru/articles/727542/
✍️ @React_lib
Хорошо, react. Как много мы используем всего, потому что так исторически сложилось: пишем функции задом наперед (сначала объяви, потом вызывай). Оборачиваем все в стрелочные функции и константы с ними, когда достаточно именованной функции. Этот список можно хорошенько продолжить.
В этой статье хотелось бы обсудить несколько привычек, которые есть у нас всех и которые, возможно, пора переосмыслить.
Начнем с кастомных хуков, которым надо вернуть результат, в частности пару значений. Классическим примером может быть хук для запроса данных по сети и отслеживания в процессе ли этот запрос сейчас, чтобы добавить на страницу лоадер.
function useClient(clientId) {
const [loadedClient, setLoadedClient] = useState(null)
const [isLoading, setIsLoading] = useState(false)
useEffect(() => {
const loadClient = async () => {
try {
setIsLoading(true)
const clientData = {} // actual data loading call goes here
setLoadedClient(clientData)
}
finally {
setIsLoading(false)
}
}
loadClient()
}, [clientId])
return [loadedClient, isLoading]
}
https://habr.com/ru/articles/727542/
✍️ @React_lib
Хабр
React: революция использования фигурных скобочек
Хорошо, react . Как много мы используем всего, потому что так исторически сложилось: пишем функции задом наперед (сначала объяви, потом вызывай). Оборачиваем все в стрелочные функции и константы с...
👍3👎1🔥1
Экосистема JavaScript восхитительно странная
Заметьте, я не говорю, что JavaScript странный, хотя он, безусловно, странный. Но суть этой статьи не в этом.
Потерпите, вместо того чтобы начать с того, как странна экосистема JavaScript, я начну с того, почему экосистема JavaScript странная.
https://fly.io/blog/js-ecosystem-delightfully-wierd/
👉 @frontend_1
Заметьте, я не говорю, что JavaScript странный, хотя он, безусловно, странный. Но суть этой статьи не в этом.
Потерпите, вместо того чтобы начать с того, как странна экосистема JavaScript, я начну с того, почему экосистема JavaScript странная.
https://fly.io/blog/js-ecosystem-delightfully-wierd/
👉 @frontend_1
👍3
Совет по производительности в Интернете 💡
Предварительная выборка ресурсов следующих возможных страниц для более быстрой навигации 🚀
👉 @frontend_1
Предварительная выборка ресурсов следующих возможных страниц для более быстрой навигации 🚀
👉 @frontend_1
👍4
100 современных CSS-кнопок. Все стили, которые вы можете себе представить.
https://ui-buttons.web.app/
👉 @frontend_1
https://ui-buttons.web.app/
👉 @frontend_1
👍7🔥3
Интересные трюки HTML, CSS и JS
Здесь вы найдёте небольшую подборку нестандартных вариантов использования HTML/CSS/JS. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.
Примечание. Некоторые трюки основаны на открытых уязвимостях браузеров и поисковой системы Google и др. Поэтому могут перестать работать в ближайшее время (или продолжат, если разработчики не признают баги и не захотят их исправлять). Другие функции работают только начиная с конкретных версий Chrome, Firefox и т. д.
https://habr.com/ru/companies/ruvds/articles/731960/
👉 @frontend_1
Здесь вы найдёте небольшую подборку нестандартных вариантов использования HTML/CSS/JS. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.
Примечание. Некоторые трюки основаны на открытых уязвимостях браузеров и поисковой системы Google и др. Поэтому могут перестать работать в ближайшее время (или продолжат, если разработчики не признают баги и не захотят их исправлять). Другие функции работают только начиная с конкретных версий Chrome, Firefox и т. д.
https://habr.com/ru/companies/ruvds/articles/731960/
👉 @frontend_1
👍6❤1
Интересные трюки JS, HTML и CSS, #2
Небольшая подборка нестандартных вариантов использования HTML/JS/CSS, где каждый найдёт что-то интересное. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.
Предыдущая часть здесь.
В этом выпуске — DevTools для мобильных браузеров, CSS-антистресс для Booking .com (на КДПВ), единственная защита от фингерпринтинга (спойлер: это браузер Tor, он же Firefox) и др.
https://habr.com/ru/companies/ruvds/articles/748950/
👉 @frontend_1
Небольшая подборка нестандартных вариантов использования HTML/JS/CSS, где каждый найдёт что-то интересное. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.
Предыдущая часть здесь.
В этом выпуске — DevTools для мобильных браузеров, CSS-антистресс для Booking .com (на КДПВ), единственная защита от фингерпринтинга (спойлер: это браузер Tor, он же Firefox) и др.
https://habr.com/ru/companies/ruvds/articles/748950/
👉 @frontend_1
👍6