78 - React JS - login и logout api
HTML-код
- Опубликовано: 7 ноя 2024
- it-incubator.i... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_s...
API: social-network...
Флоу по логинизации и вообще авторизации на первый взгляд несложный, но на второй взгляд - есть куча нюансов!!! И нам нужно их учесть: правильные и своевременные редиректы, понимание, кто мы сейчас в данный момент, имеем право ли мы быть здесь и здесь, а сейчас, а через 4 секунды??
Делаем первую версию, багованую и не финальную! Переделывать не придётся, не бойтесь))) Но дорабатывать будем!
Летим, самураи!!!
Уроки по React JS: • Курс "React JS - путь ...
Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
Мы в соц. сетях:
itkamas...
/ itkamasutra
telegram.me/it...
Мои личные VK и Insta:
d.kuzyu...
/ it.kamasutra.dimych
#login #react #пример
спасибо за урок! успехов тем, кто добрался до 78 урока!
От 1-го урока до 78-го дошел, спасибо Дима)
*_За какое время?_*
@@b_o_r-d5d работу нашел?
@@b_o_r-d5d Ну как успехи с работой?
@@b_o_r-d5d ну да, отлично. Поздравляю)
@@b_o_r-d5d а сейчас как успехи?)
"И ты еще не старик, поверь еще не поздно!" - вот после этого я просто обязан втащить тему до конца! Спасибо, Димыч!
как успехи Антон ?
@@ДониёрРахманов-ч1ю полгода уже работаю :)
@@anthem_xlii успехов в карьере) , и как знания от сэнсея пригодились? Или много еще учить для продакшнэна ?
@@ДониёрРахманов-ч1ю Спс. главные скиллы - это чтение кода и дебажинг. Так что да, все пригодилось.
@@anthem_xlii какой город? были проблемы?
С каждим випуском я все больше ощущаю мощь front-end разработчика, спасибо 🎉; хотя стоит понимать, што из-за давности видео road map джуниора подрос и после сотово випуска нужно будет еще учить redux toolkit, react query, material ui, но ето уже совсем другая история.
"Не бояться непонимания и двигаться вперед"- Это лучшая и мотивирующая фраза, которая звучит от Димыча. Когда я что-то не понимаю, я начинаю думать, что я полная тупень ахахах))
Спасибо за урок! Много нового узнал. Теперь по-человечески можно заходить на свой акк))))
у меня тоже такие мысли проскальзывают🙃
Отличный выпуск про login и logout в React и Redux ! Ещё совсем немного осталось до юбилейного сотого выпуска ) Уже так много проделано работы и одновременно ещё столько всего интересного нас ждёт впереди, и всё благодаря Димычу, за что ему преогромнейшая благодарность !!!
🙏👍 действительно, ребят, мелочей и нюансов ещё много!! Летим!!! 🚀🚀🚀
Спасибо! Сделал на Formik, получилась немного другая структура компонентов, добавил форму регистрации, адаптив и стилизацию на Material UI. Пришлось погуглить. Честно говоря, не думал что получится . Спасибо Дима!!!! Reactjs ! login logout!
Теперь еще сто раз переделать чтобы запомнить !!!)
мощно что ты все это сам проделал, что хватило усердия и нашёл время)
Была ошибка, не мог залогиниться! Перелопатил учебни гит репозиторий, сравнивал строчку за строчкой. Отчаялся. Отрыл debagger- пулемет! Оказалось что в полях Field
name="email" - писал с большой буквы, а в пропсах получал с маленькой. Поэтому было undefained значение!! Господа будьте внимательны в таких вещах! Всем успехов! Диме большое спасибо!
столкнулся с такой же ошибкой, но каким то чудом, быстро исправил
спасибо тебе за коммент, у меня было тоже самое, думал сойду с ума!!!!
@@YevhenRight Рад что помог! Успехов тебе!
если в последствии будете стилизовать, можете применить для отличного примера в проекте Material UI... дабы не особо мучиться с стилизацией компонентов в целом)))
но не забывать надо, что если ради пару кнопок и полей то не стоит. UI библиотечка весит прилично
Очень красивая и приятная песня в конце) Спасибо большое Дмитрию! Прекрасные уроки по React - Redux! Отличная подача! Дмитрий лучший! Вперед, IT-KAMASUTRA!
Димыч ,ты абсолютно прав,я не знаю как это работает ,но это работает,когда возвращаешься назад на темы которые недопонимал,теперь каким то образом стали понятными))))Магия)))
Когда пишем thunk creator для logout проще будет создать новый action creator
const resetAuthDataAC = () => {
return { type: RESET_USER_AUTH_DATA }
}
и потом его использовать для изменения стейта, по сути сбрасывая его значения до начального:
case RESET_USER_AUTH_DATA:
return {
...state,
...initialState
}
Таким образом нам не придётся вешать все на action creator setAuthUserData и при этом добавлять в него еще один параметр isAuth.
Первый раз прослушал песню в конце без х1.5 ускорения ! Так Сенсей еще и петь умеет ! ))
Спасибо ! React JS - login и logout api
Сегодня месяц как я начал этот курс. Последние несколько серий торможу, но прогрызаюсь. Бомбим!
{ react redux js formik hok thunk hook }
React JS - login и logout api. Два дня пересматривал это видео и не мог найти свою ошибку. У меня при вводе данных на странице логин не происходила авторизация и редирект на страницу профиля. Оказалось, что я не внимательно написал функции login и logout в auth-reducer. В методе then работал с данными которых там нет. Вот же засада. Спасибо за такой отличный курс.
Тоже долго искал ошибку, почему же я раньше не видел этот комент?)
столкнулся с той же проблемой. Смотрел на гите проекта это кусок кода - переписал так же. Пока не работает, копаюсь дальше
Я использовал команду Navigate вместо Redirect
Синтаксис как показано ниже
import { Navigate } from "react-router-dom";
if (props.isAuth) {
return ;
}
if (props.isAuth) {
return
}
эта песня в конце, не могу!( такая мелодичная и приятная! спасибо!
С каждым уроком все легче и легче, уже так иногда напрягаешься. Например прошлый выпуск напрягся, а этот весь в носу проковырялся. Спасибо Димыч за мой прогресс
06/06/2023 ... в части не знаю как у кого, а у меня "выстреливает" любимый Димычем error ))
Может много "6" в дате, но скорее, как я понял, React шагает семимильными шагами и упрощает (?) все хуками для таких как я)
Погуглил, и заменил :
ЭТО:
if (props.isAuth) {
return
}
На Это:
const navigate = useNavigate();
if (props.isAuth) {
return navigate ('/profile')}
Пользуясь случаем - Дмитрий, твой курс #React JS, #Redux etc просто Supper!! It-Kamasutra Forever!
в предыдущих уроках ты как редирект оформлял? с помощью компонента Navigate, вот и тут Redirect заменяешь на Navigate и все работает
Яке приємне відчуття, коли одразу помітила помилку і сидиш чекаєш, коли ж і автор її знайде :)) Просто і доступно про login i logout API
Уфф, круто круто, сенсей, летим!! Супер уроки по React, Redux, react-thunk. Наглядно и понятно о FLUX-архитектуре SPA-приложений
Отличный выпуск про login и logout в React и Redux 2023
React JS - login и logout api
Лучшие уроки по React JS & Redux !!!
The BEST!!! lessons of React & Redux!!!
Programming and Coding!!!
Just simply about information technology =)
Какое же крутое ощущение, дошла до логинизации! Спасибо тебе,Димыч! Верю в себя и во всех,кто дошел,всем уверенности в себе и удачи!! Лучшие уроки ReactJs login и logout api
3 раз пересматриваю видео и каждый раз, когда в видео приходит сообщение в телегу, думаю что это у меня....))
и на этом уроке я поняла что придется откатиться назад)) спасибо!
Круто осознавать, что дошел почти до конца
Спасибо за очередной взрывной урок, доходчиво и понятно до безобразия!)
Димасик, верим и ждем выпуски!))
Продолжаю изучение - 20-ый день - 78/100
Димыч, спасибо за труд!
20? ты практикуешься?
@@ДенисКускильдинКонечно. Просто весь день уделяю процессу
@@RedSkyWan если это действительно так, то ты молодец. Я уже почти все тоже прошёл. Осталось пару видео и заново повторить, а дальше резюме и все такое
@@RedSkyWan опиши, если несложно твой путь, если устроишься на работу
мне так нравится это мелодия в конце, браво
Самый лучший курс по React JS. Login Logout API Redux
Спасибо!
Блин, круто, что у меня сразу заработало, потом оказалось, что я сам сразу же убрал повторный isAuth. Приятно было. Спасибо.
Оооо! Эта песня в конце)
Она же вроде в начале курса была
Я даже помню как она у меня потом в голове застряла))
Сразу заметил что расширение стало лучше, иконки стали меньше. Поздравляю с новым ноутом. Хотя уже почти год прошёл после покупки ))
я планировал пройти этот курс за 1 месяц, но вот уже прошло два месяца и даже более, а я еще на 78 уроке. Да, я брал иногда отдых. Я переделывал проект на typescript, что не входит в рамки этого курса. Изучал Material UI библиотеку, для того чтобы все выглядело красивее. Изучал Formik, писал много чего сам.
Именно так и выглядит реальность: твои планы - это не более, чем планы. В реальности, как правило, все немного(или намного) сложнее). Так что тем, кто тоже не укладывается в сроки планируемого завершения курса - топите дальше, отдыхайте, когда это необходимо, изучайте что-то, что тоже необходимо для фронтенда на реакте. Курс вышел давно, тут, безусловно, есть база, но и акутальные вещи также необходимо уметь применять. Успехов всем!
🤝🙌🏻
респект Димычу за обучение дебаггингу! Коряво деструктурировал объект и в итоге на сервер в свойстве email отправлял email в месте с паролем. По нетворку в хроме я что-то проморгал эту ошибку в данных, но в дебаггере сразу заметил. Димыч лучший!
Спасибо, очень классный ролик!
Спасибо Димыч! Было познавательно - лечу дальше!
React JS - лучший курс!
До выпуска с формами все шло гладенько, но поскольку редакс-формы устарели, использовала Formik , и это было уже сложнее- никто не разжёвывал, как для дебилов:)) но только благодаря этим всем выпускам и многократным повторениям принципов работы удалось понять документацию и внедрить другую форму в проект, поэтому тем, кто говорит, что курс устарел - не верьте, тем более, если читать документацию реакта, то там очевидно, что многие вещи, например классы и hoc спокойно планируются пока поддерживаться.
Подскажи, пожалуйста, а контейнерную компоненту на Формике получилось сделать ?
@@СтепанЦуканов-т9ы смотря зачем она там нужна, формик - это просто обертка, куда ты передаёшь определенные, указанные в документации пропсы, она никак не мешает создать любую компоненту. Но для неё не нужен редакс, все значения не нужно сохранять в сторе, так как они все хранятся в локальном стейте «под капотом» формика. Так что там скорее всего контейнерная не нужна
А я все делала по урокам так как считаю что для понимания нужно пройти, тем более что я только учусь и самой с Formik мне трудно
@@O_Shpak не бойся экспериментировать. Потом тебе так же будет сложно внедрять новые технологии, но ещё и страшно, если сейчас этого не сделаешь. Я прочёл коммент о том, что react-form устарела, и пошёл искать инфу. Перешёл за пару дней на react-hook-form. Код стал чище, короче и удобнее, а как следствие - его проще писать и читать.
От поры до времени возвращаюсь к предыдущим урокам. Вспомнил, что есть ещё капча и решил её вывести. С первого раза, конечно, по невнимательности ничего не получилось (чтение документации). А на второй раз за 20 минут сделал её и понял принцип работы. Спасибо, Димыч!!!
Уго, супер! Молодец! Новый выпуск будет об этом)
Отличный выпуск про login и logout в React JS. Это однозначно лучший бесплатный курс по реакту. Дима, большое спасибо!
Че за магия ? С каждым уроком удивляюсь все больше) Спасибо Димыч ))
Благодарю!!
(login и logout api)
Отличный урок, спасибо! Ты самый лучший в youtube, для тех кто действительно хочет научиться писать на React JS и у кого нет средств или времени на курсы где-то в каком-то офисе, а с твоими уроками можно в домашних условиях учиться)LIKE!)
react js redux крутой курс!
Ещё остановочку проехали, едем дальше!
Когда писал по твоей аналогии но немного подругому , как же я волновался что бы я залогиниться, но когда залогигился счастью нет предела )))) Димы огромное спасибо за твой труд , надеюсь в будущем смогу тебя отблагодарить
Спасибо за уроки
Спасибо Сансей, летим. Март 2023
Отличный выпуск о React JS - login и logout api. Отличный курс!
Спасибо. Бомбим дальше ©
React JS - login и logout api
Спасибо!
Спасибо за урок! А после 100го будет ли пару выпусков по стилизации?)
Сегодня 05.12.21 продолжаю учиться. Урок классный !!!Сколько у вас терпения Дмитрий, столько уроков сделать!
Да нашёл требуются лиди@@KanalReal
Очень инетересный урок,большое спасибо ! login и logout api
React JS - login и logout api.
Сделал это еще два видео назад. Теперь можно расслабиться и просто посмотреть)
Спасибо, Димыч! Отличный выпуск
Летим дальше! Спасибо, Димыч! пс. React JS, login, logout api
чисто лайк)
Сколько ещё видосов планируеться на данный плейлист?
Лично я готов смотреть вечно!
100 всего будет в данном цикле!!!
@@ITKAMASUTRA прикольно.
А потом что, если не секрет?
@@sergiystebelskiy2863 апгрейд знаний
С каждым выпуском загрузка мозга обеспечена) Пересматривать что-то в любом случае нужно, хотя меня совсем новичком в программировании не назовёшь.
Спасибо Вам за ваш труд!
login и logout в redux-form, спасибо за информацию!)
Ух и намучался с этим. Целый день потратил. Спаибо Димыч за видос :)
держись мужик) не ты один такой)
тоже ушел день, а если быть точным 7 часов как в сухую почву
spasibo za urok - 78 - React JS - login и logout api
react js redux крутой курс!
login logout api летим дальше))
Шикарнейший курс!!!!!!!
Это лучший из лучших контентов во всем Интернет-пространстве по REACT !
Спасибо Димыч, ты отичный программер, преподаватель и мотиватор !
P.S. Проблему с загрузкой Profil-а на первом rendere можно решить, используя старый-добрый setTimout внутри componentDidMount в ProfileContainer. Т.о. при задержке всего в 100 мл.с ответ с нашим id с запроса me... будет успевать приходить...
Спасибо за Ваши уроки!!!
React JS login и logout api
охх... пашем пашем) и заветная соточка уже близко! спасибо
😍👍доступные курсы по реакт react samurai
Отличный урок! React, Redux, Redux-form! Знать будем круто!
прикольно, когда доходишь до моментов которые ранее сделал сам))) Посоны, не бойтесь щупать проект самостоятельно и пытаться что-то допиливать)
Всем удачи! Всем мира!
Спасибо огромное! благодаря прошлым выпускам (точнее пониманию) почти не переписываю твой код, тк и так понятно, что и куда нужно написать, главное уловить цель всех написаний и последовательно все отобразить(не в UI, а в виде кода). React Redux Login Logout
Ребят,у кого не редиректится с реактом в17 и реакт-дом в6,вместо редирект пишем
Спасибо Димыч, я ещё не сдался!
Круто! Всё работает! 🔥 реакт редакс react redux Login log out
я на 2 недели завис с этим формиком)) завтра сабмит сделаю
@@СтепанЦуканов-т9ы да я тоже на формике висел немного 😁
Очень интересно тебя смотреть и не менее интересно делать когда все понял в уроке 🚀
Все Это меня несказанно радует, прям очень React JS - login и logout api))))
Отличный курс, спасибо Димыч тебе, мне очень интересно именно реализация отправки сообщение и получение хотя знаю что этого не будет в этой части курса, надеюсь будет в продолжение курса, жду продолжение ! 🚀
Спасибо, Димыч! React js
Димыч спасибо огромное.. Серия уроков подходит к концу, но они мне очень помогли освоить и понять главные принципы работы с Реакт. Обязательно сделаю донат скоро..
2022. Спасибо большое! Очень долго ждал login и logout
увидел Димыча - поставил лайк!)
Димыч, 26:25 ) Красава
Спасибо, Димыч, получаю удовольствие от того, что все так четко работает...
Я час потратил на поиск ошибки, которую допустил в одном из уроков. Это был увлекательный опыт. Рассказываю:
Где-то на середине урока, когда Дима пошел проверять авторизацию через форму логин, у меня приложение падало в ошибку "Render is not a function". Сколько я дебаггеров поставил, сколько я брейкпоинтов воткнул в код, но ошибка не хотела решаться.
Нервы были на пределе, интернет смотреть не хотел, гораздо больше опыта приобретаешь в те моменты, когда такие ошибки доводят тебя до белого каления. И как же становится приятно, когда наконец-то находишь решение... =)
Решение:
В файле App.js, где мы через роуты указываем path='/login' в параметр render, я не передал коллбэк с компонентой Login - render={() => }
А передал напрямую компоненту Login - render={Login}
Дима, спасибо!
Именно с твоими уроками начинаешь думать и решать задачи, как программист)
Успехов тебе во всех проектах
Урок 78. Пишу свой белорусский социально-экологический проект. Комент как благодарность (:
Дима, спасибо))
#login #react #пример
Классный урок! Спасибо!
До 18:30 делаем диспачь и санки как у димы. Дальше выполнил все на Formik кому нужно держите код сравните.
Главное выйти с сайта и вписать свои данные в Login. Все
import React from 'react';
import {Formik, Form, Field, ErrorMessage} from 'formik';
import * as Yup from 'yup';
import style from './Login.module.css';
import {connect} from "react-redux";
import {Navigate} from 'react-router-dom';
import {login} from "../../redux/Reducer/AuthReducer";
const validateLoginForm = values => {
const errors = {};
if (!values.email) {
errors.email = 'Введите email';
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
) {
errors.email = 'Invalid email address';
}
return errors;
};
const validationSchemaLoginForm = Yup.object().shape({
password: Yup.string()
.min(2, "Must be longer than 2 characters")
.max(10, "Must be shorter than 10 characters")
.required("Введите пароль")
});
const Login = (props) => {
if (props.isAuth) return
return (
Log in
{
props.login(values.email, values.password, values.rememberMe);
}}
>
{() => (
remember me
Log in
{props.messageError}
)}
);
};
let mapStateToProps = (state) => {
return {
messageError: state.auth.messageError,
isAuth: state.auth.isAuth
}
}
export default connect(mapStateToProps, {login})(Login);
thanks!
Песня очень крутая аж до мурашек ! Спасибо шурую дальше )
СПАИБО ДИМЫЧ!!! СПАСИБО ЗА СЛОВА ПОДДЕРЖКИ, С ТОБОЙ ИНТЕРЕСНО И ПОЗНАВАТЕЛЬНО!!! REACT REDUX API
Спасибо за видео. 40 минут видео часа 3 обрабатывал ))
Всё работает, летим дальше 🚀
React Login, Logout, Axios, request, response, Thunk, mapStateToProps
🤩React JS - login и logout api
14к просмотров и 0 дизлайков на видосе про login и logout, определенно победа Димыча, отличный курс)
оп, подгон) благодарочка, лайк
Спасибо!
Очень интересно!
React JS - login и logout api ))
Пушка-гонка!!! Димыч, спасибо огромное, чую трудоустройство уже близко!)
Летим-летим!))
Как всегда отлично, спасибо за урок!
Плюсик для лучшего ранжирования =)
Все будет хорошо! )
React JS от Димыча
Большое реактивное спасибо, Димыч! React JS login logout
Димыч. Огромное спасибо тебе !)