ReactJS Routing. Делаем навигацию по приложению. Layout. Fullstack 2023. [eng subs]

preview_player
Показать описание

Делаем роутинг по приложению при помощи React Router Dom.

🔥 Обе сборки можно получить по ссылке:

🏆 Поднять мотивацию и получить плюшки(исходники, чат со мной):
🔹 Crypto:
👉 USDT(ERC20): 0xA4008910De17DB20c7505425316fF72d4C5Eed96
👉 USDT(BEP20): 0x4350c4E1C0bB35634C7fDE1cFB278BE0606E3822
👉 Binance Pay: 432902886

⏱️ Тайм-коды: ⏱️
11-Routing
00:00 Вступление
00:07 Layout приложения
02:42 Routing
07:37 Header component
18:26 Error Page
21:24 Итог

  1. Давай Попробуем: JavaScript
  2. typescript
  3. reactjs
  4. react-typescript
  5. fullstack
  6. fullstack приложение с нуля
Рекомендации по теме
ReactJS Routing. Делаем 0:21:39

ReactJS Routing. Делаем навигацию по приложению. Layout. Fullstack 2023. [eng subs]...

React Router - 0:15:57

React Router - делаем навигацию! React. Lite level

ReactJS. Активные ссылки 0:04:36

ReactJS. Активные ссылки навигации

#9 Навигация между 0:12:52

#9 Навигация между страницами с анимацией setup react router

React JS сайт 0:07:31

React JS сайт с нуля - Роутинг сайта, переход по страницам

Уроки React JS 0:07:24

Уроки React JS - Роутинг. Маршрутизация и создание страниц сайта...

Блок 7. Теория. 0:02:48

Блок 7. Теория. React Router. Урок 4. Навигация между страницами...

React-router-dom 6 - 0:19:54

React-router-dom 6 - новый синтаксис роутинга. Routes вместо Switch, elements. SPA и MPSa на RRD6...

Компонент NavLink и 0:09:35

Компонент NavLink и его кастомизация в React-Router 6

Параметры в ссылках 0:11:40

Параметры в ссылках в React Router 6

БЛОК УХОДА СО 0:12:33

БЛОК УХОДА СО СТРАНИЦЫ - ОТМЕНА НАВИГАЦИИ REACT ROUTER DOM JAVASCRIPT...

Вложенный роутинг в 0:10:01

Вложенный роутинг в React Router 6

Роутинг на React. 0:29:12

Роутинг на React. SPA и MPA на примерах

React. Program navigation 0:06:14

React. Program navigation (Программная навигация)

12. React + 0:03:05

12. React + Node.js - Навигация по папкам - Облачное хранилище

Изучение React Native 0:21:32

Изучение React Native / Урок #7 – Навигация внутри проекта

19. Добавление навигации 0:37:36

19. Добавление навигации в sidebar Рендерим наше меню динамически в проекте React js...

8. React Redux 0:03:36

8. React Redux - Роутинг\Маршрутизация по страницам. React-router-dom, Router, Switch, Redirect...

Курс по React 0:58:11

Курс по React JS. #4 Работа с React Router, History API, SPA (single page application)

Основы React JS 1:59:07

Основы React JS - Маршрутизация. React router dom.

19. Уроки React 0:22:56

19. Уроки React JS (route, browser-router, маршрутизация) - react курсы бесплатно...

Курс React JS 0:18:31

Курс React JS Live. Урок 13: Routing в React.js

#15: 🍕 React 0:32:32

#15: 🍕 React Pizza v2 — Сохраняем параметры фильтрации в URL

Основы React: Создание 0:32:32

Основы React: Создание простого приложения с использованием MUI и react-router-dom...

Комментарии
Автор

11/16. Делаем навигацию по приложению и так же создаем Layout.

lets_try_js
Автор

Спасибо, всё чётко объяснил по layout, думаю все поняли всё)

kostyafrompiter
Автор

Как же классно что ты вынес роуты в отдельный файл routes.tsx в основном реакт разработчики пишут в корневом app что выглядит не очень. А у тебя теперь все классно как во вью)

jonyonee
Автор

А по поводу просмотров, бро, это 11 урок, тут просто код и практика, этот ролик посмотрели только те, кто реально заинтересован) вот это число)

kostyafrompiter
Автор

Всё идёт плюс минус хорошо и понятно, сел я значит за ваш фронтенд, только решил писать на scss вместо тайлвинда.
Ага... свэгэшечка, давай-ка покрасим её при наведении...
И залип мля на 6 часов
А вы тут со своими бд, связями и гвардами мучаетесь, вот она где вся сложность!

СергейКиселев-кь
Автор

"Lorem ipsum dolor sit amet, пвапвап consectetur adipiscing elit, sed do eiusmod temапвапвpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. аввпвап Duis aute irure dolor iпвапвапn reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Virisound