@Vakzinator

Какой верный подход при создании многостраничного react приложения?

Доброго времени суток, разработчики!

Появилась потребность в изучении react.js. До этого уверенно использовал только jQuery. Сейчас начал вникать в материал по реакту. Но некоторые моменты не до конца понимаю. Мне предстоит сверстать каталог именно на react.js, это будет многостраничный сайт. Как правильно будет сверстать такое многостраничное приложение?

1. Делается ли так, что react приложением будет лишь сам каталог, а header и footer, всякие окна - это обычной версткой? Или же это не правильный подход?
2. Логично предположить, что если используется react, то подключать другие библиотеки, к примеру, jQuery (для каруселей, окон, ajax) будет в корне не верно?
3. Как организовано многостраничное приложение? Это будут просто разные страницы, на которых будут вызываться нужные компоненты (каталог, подкатегория, детальная страница) или тут другая логика?
4. Чисто любопытно: если на странице будет только один блок #app, к примеру, а все остальное подгружается через js, как обстоят дела с СЕО?

Хочется разобраться с этими вопросами, чтобы дальше продолжать штудировать react, понимая картину в целом.
  • Вопрос задан
  • 166 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
1. В вашем случае нет, вам же, насколько я понимаю, нужна навигация без перезагрузки страницы.
2. Забудьте на время разработки что такое JQuery и подходы которые с ним принято использовать. По поводу библиотек, экосистема react содержит множество библиотек. Так же есть смыл подключить библиотеку для ajax запросов axios/superagent/etc. Вообще, перед тем как подключать какую-либо библиотеку лучше 3 раза подумать, так как многие из них существенно увеличивают размер бандла, например, тот же moment. Для того чтобы быть в курсе того, что и сколько в вашем бандле занимает места можно подключить в prod сборку webpack-bundle-analyzer.
3. Почитайте про роутинг на стороне клиента. Для React разработки стандарт react-router.
4. SSR.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@dimoff66
Кратко о себе: Я есть
1. Если header и footer не имеют кнопок или других элементов, меняющих состояние компонентов, то можно обычной версткой, а внутрь поместить блок, в котором будет работать главный компонент приложения
2. Да, так и есть.
3. Почитайте про React Router, вкратце: страницы помещаются внутрь компонента Switch и у каждого в пропсах прописывается путь, при котором оно будет отбражено. И есть компоненты Link, которые меняют location компонента.
4. В интернете много материалов, как подружить React Router с SEO
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Instamart Москва
До 130 000 руб.
AEON Москва
от 120 000 до 180 000 руб.
17 июн. 2019, в 19:31
500 руб./за проект
17 июн. 2019, в 19:17
1500 руб./за проект