React JS фундаментальный курс от А до Я

React Полный курс от А до Я. Рассмотрим основные концепции и разработаем функционал, который встречается в каждом приложении.

Таймкоды:
00:00 ➝ Введение
03:15 ➝ Теория
11:40 ➝ Начало разработки. Создание проекта
16:10 ➝ Что такое JSX?
18:11 ➝ Компонент App. Работа с состоянием. UseState
22:25 ➝ Управляемый инпут
24:07 ➝ Первый функциональный компонент
26:40 ➝ Первый классовый компонент
30:25 ➝ Что такое хуки? useState, useEffect
31:10 ➝ Стили. CSS. Классы
34:30 ➝ Props. Аргументы компонента.
36:55 ➝ Работы со списками. Преобразование массива объектов в массив React элементов
41:50 ➝ Форма создания поста. Управляемые и неуправляемые компоненты
42:30 ➝ Создание UI библиотеки. Первые компоненты. CSS модули. Пропс children
50:00 ➝ Предотвращаем обновление страницы при submit формы
50:45 ➝ хук useRef. Доступ к DOM элементу. Неуправляемый компонент
57:35 ➝ React Devtools. Инструменты разработчика React
59:15 ➝ Обмен данными между компонентами. От родителя к ребенку. От ребенка к родителю.
01:04:20 ➝ Отрисовка по условию
01:05:30 ➝ Сортировка. Выпадающий список
01:12:00 ➝ Поиск. Фильтрация.
01:15:10 ➝ useMemo. Мемоизация. Кеширование
01:23:50 ➝ Модальное окно. Переиспользуемый UI компонент
01:30:23 ➝ Анимации. React transition group
01:33:40 ➝ Декомпозиция. Кастомные хуки
01:36:20 ➝ Работа с сервером. Axios
01:38:40 ➝ Жизненный цикл компонента. useEffect
01:43:08 ➝ API. PostService
01:44:45 ➝ Индикация загрузки данных с сервера
01:46:20 ➝ Компонент Loader. Анимации
01:49:25 ➝ Кастомный хук useFetching(). Обработка ошибок
01:54:15➝ Постраничный вывод. Пагинация (pagination)
02:06:20 ➝ Обьяснение механизма изменения состояния
02:12:00 ➝ React router. Постраничная навигация. BrowserRouter, Route, Switch, Redirect
02:22:00 ➝ Динамическая навигация. useHistory, useParams
02:29:30 ➝ Загрузка комментариев к посту
02:33:10 ➝ Улучшаем навигацию. Приватные и публичные маршруты
02:38:00 ➝ useContext. Глобальные данные. Авторизация пользователя
02:47:10 ➝ Бесконечная лента. Динамическая пагинация. useObserver
02:58:40 ➝ План на дальнейшее обучение. Ставим лайки и пишем комментарии :)



Поддержать меня и мой канал вы можете по ссылкам ниже.

[sbgqosx]

лайк, кто смотрит в 2024)

курс пушка-бомба!!!

[jtwbzcm]

Приятно слушать курс без бекания-мекания, последовательно изложенный с нормальной речью. Спасибо

[co]

Если кто-то собрался смотреть это видео с полного 0 не тратьте время!, для того чтобы получить максимальную пользу выполните следующее:
1- поймите JS любым способом на хорошем уровне
2- Пройдите любой курс по REACT (плохой/хороший долгий/быстрый не важно
3- Приступайте к этому видео и после просмотра каждой темы останавливайте видео пытайтесь сделать сами, гуглите подглядывайте обратно в видео если не получается сделать и так весь курс до победного конца (займет это все примерно от 10 часов до 20)
4- Поздравляю вы знаете и умеете в REACT

Если начнете смотреть сразу с 0 без базовых знаний, вы просто не поймете на сколько крутой этот курс.
Автору здоровья и большое спасибо! Прошел этот курс и наконец почувствовал уверенность в своих силах в REACT

[pptdhst]

если кто дошел до BrowserRouter, то теперь делают вот так:
<BrowserRouter>
<Navbar />

<Routes>
<Route path="posts" element={<Posts />}/>
<Route path="about" element={<About />}/>
<Route path="*" element={<Error />}/>
</Routes>
</BrowserRouter>

[hdmitjr]

Огромное спасибо автору!!! Проходил React на курсах и много из видео знаю, но твои примеры и советы помогают сложить пазл из каши полученных знаний если не до конца, то на огромный процент!!! Надеюсь ты простишь новичка за некоторые исправления твоего видео))))
1. Вместо switch теперь необходимо использовать Routes;
2. useHistory убрали в router-dom v6 и заменили на useNavige, в котором по умолчанию исп-ся push
3.exact не нужен теперь
4. в route исп-ся теперь element c указанием компонента, вместо component
5.у тебя в видео при рендере массива роутов идет component={route.component} ; у меня рендер массива роутов заработал только после указания в скобках element={<route.element />}
6.Redirect тоже убрали вместо него нужно исп-ть Route с переданным в element модуля <Navigate />,
пример с моего кода( <Route path="/*" element={<Navigate to="/login" replace />} />))

Еще раз - автор не злись))) может кому-нибудь пригодится

[learningit]

Досмотрел до конца, все повторил за тобой, еще много чего не понятно. Потратил так же около 30 часов. Огромная благодарность. Ты сделал большое дело. Сейчас у нас в Украине вакансий практически нет, но мы не унываем продолжаем учится и молимся что бы настал МИР! Ценю твой труд, очень при очень благодарен тебе

[ubwlcvm]

На мой взгляд это актуально даже в 2024, а такой подачи и полноты информации нигде больше не найти. Лучший канал с курсами.

[sanchopansa]

Тимур, ты бесподобен!
Честно признаться, твоё упорство в создании столь объёмного, качественного и разностороннего материала, причём бесплатного, вызывает восхищение!
Продолжай в том же духе, ты очень сильно помогаешь! Твои курсы в сочетании с книгами и документацией дают безумно мощную базу.

[gtbzsoi]

Поверь не могу, что люди могут делать столько добра и пользы, сколько в этом курсе. Я в шоке. У тебя какая-то поразительная грамотность в речи, а ход мыслей и уверенность просто впечатляют. Очень круто! Пример!

[interpol]

Автор лучший! Огромная работа, разбирался в каждой строчке. Спасибо больше!
Так же в связи с датой выхода ролика, помощь молодым выкатываю ниже

36:50
Изменены props и теперь могут выглядит так: <Post id="1" title="title 1" body="description 1"/>

Если у кого проблема с Route/react-router v6 то теперь нужно писать так:
2:15:18
<BrowserRouter>
<Routes>
<Route path = "/about" element={<About/>}/>
</Routes>
</BrowserRouter>

2:19:27
Вместо <Switch> используется <Routes>

2:20:51
Вместо <Redirect> использовал <Route>
<Route path="*" element={<Error />} />

2:23:05 (Вместо useHistory() теперь используется useNavigate()
const navigate = useNavigate()
function transitToPost(id) {
navigate(`/posts/${id}`, { replace: true })
}
//
<MyButton onClick={() =>
Открыть
</MyButton>

2:25:09
Пропс exact больше не нужен <Route path="/posts/:id" element={<PostIdPage />} />

2:34:49(Работа с декомпозицией файлов):AppRouter.jsx
return (
<Routes>
{routes.map(route =>
<Route exact={route.exact}
path={route.path}
element={route.element} />
)}
</Routes>
)

И файлом router.js У автора это файл по пути ../src/Router/index.js
export const routes = [
{ path: "/about", element: <About />, exact: true },
{ path: "/posts", element: <Posts />, exact: true },
{ path: "/posts/:id", element: <PostIdPage />, exact: true },
{ path: "/", element: <Posts />, exact: true },
{ path: "*", element: <Error />, exact: true },
];

[drm_o_o]

Тем, кто делает сейчас. useHistory убрали, вместо него вы можете использовать useNavigate
Было const router = useHistory()
Стало const router = useNavigate()
Далее, router.push('/path') меняем на router('/path')
router.replace('/path') меняем на router('/path', {replace: true})
Если вы хотите использовать state, используйте router('/path', { state: { name:'Xyz' }})

[vitaliyyakovlev]

Огромная благодарность автору! Настолько разжевать материал и вместить информацию в 3 часа, проделана колоссальная работа. Для старта в React - самое то!

[selfishhsifles]

Для VScode rsc можно заменить расширением "ES7 snippets" и ввести вместо rsc "rafce"

[mqgdwgh]

Ulbi, прими скромные слова благодарности. Получил мощнейшую информацию за этот ролик, делал все параллельно с тобой, ушло где-то 30-35 часов на всё. В какие-то моменты делал ошибки, искал решения, гуглил, думал уже, что это всё не для меня, но в итоге решал все и продолжал дальше. Огромное тебе спасибо за такую гигантскую помощь. Буду дальше продолжать работать с твоим каналом, это невероятный кладезь знаний

[endfine]

Какой же этот курс мощный, сегодня начал использовать всё что выучил на курсе и это прям вау, не представляю насколько тогда офигенен 'Продвинутый Frontend'

[sentisie]

Курс, который по праву может называться фундаментальным. Такого четкого объяснения не видел нигде, да и в принципе, чтобы столько функционала затрагивали в одном видео. Большое спасибо за проделанную работу!

[nothingg]

Спасибо большое за этот курс! Невозможно описать, насколько я был рад на него наткнуться. До этого работал с React на реальных проектах, но было много дыр в стилистике написания кода, некоторых нюансах и популярных решениях, по типу поиска, сортировки, навигации и т.п.
Этот курс решил все мои проблемы, и теперь я могу писать свой код намного лучше!
Огромное спасибо, что Вы выложили подобный материал в бесплатный доступ для простых смертных.
Бесконечное уважение и успехов в развитии канала!

[drunkmaster]

Редко оставляю коментарии. Но тут не могу пройти мимо. Это, наверное, лучший ролик по теме реакта для начинающих во всем рунете. Большое тебе спасибо за такой труд. Тут я узнал больше, чем при чтении официальной документации.

[MrMenma]

Это просто потрясающе. Большинство онлайн-школ за такой курс запросило бы приличные деньги и растягивало его на месяц. Вы сделали невероятную работу, спасибо.

[tkeibwd]

Просто супер, нет слов насколько это было полезно, понятно, последовательно, не скучно и интересно. Спасибо за твой труд!!! Это бесценно))) Это самое идеальное видео, которое я смотрела и слушала. Успехов тебе во всем!!!