Какой верный подход при создании многостраничного react приложения?
Доброго времени суток, разработчики!
Появилась потребность в изучении react.js. До этого уверенно использовал только jQuery. Сейчас начал вникать в материал по реакту. Но некоторые моменты не до конца понимаю. Мне предстоит сверстать каталог именно на react.js, это будет многостраничный сайт. Как правильно будет сверстать такое многостраничное приложение?
1. Делается ли так, что react приложением будет лишь сам каталог, а header и footer, всякие окна - это обычной версткой? Или же это не правильный подход?
2. Логично предположить, что если используется react, то подключать другие библиотеки, к примеру, jQuery (для каруселей, окон, ajax) будет в корне не верно?
3. Как организовано многостраничное приложение? Это будут просто разные страницы, на которых будут вызываться нужные компоненты (каталог, подкатегория, детальная страница) или тут другая логика?
4. Чисто любопытно: если на странице будет только один блок #app, к примеру, а все остальное подгружается через js, как обстоят дела с СЕО?
Хочется разобраться с этими вопросами, чтобы дальше продолжать штудировать react, понимая картину в целом.
1. В вашем случае нет, вам же, насколько я понимаю, нужна навигация без перезагрузки страницы.
2. Забудьте на время разработки что такое JQuery и подходы которые с ним принято использовать. По поводу библиотек, экосистема react содержит множество библиотек. Так же есть смыл подключить библиотеку для ajax запросов axios/superagent/etc. Вообще, перед тем как подключать какую-либо библиотеку лучше 3 раза подумать, так как многие из них существенно увеличивают размер бандла, например, тот же moment. Для того чтобы быть в курсе того, что и сколько в вашем бандле занимает места можно подключить в prod сборку webpack-bundle-analyzer.
3. Почитайте про роутинг на стороне клиента. Для React разработки стандарт react-router.
4. SSR.
1. Если header и footer не имеют кнопок или других элементов, меняющих состояние компонентов, то можно обычной версткой, а внутрь поместить блок, в котором будет работать главный компонент приложения
2. Да, так и есть.
3. Почитайте про React Router, вкратце: страницы помещаются внутрь компонента Switch и у каждого в пропсах прописывается путь, при котором оно будет отбражено. И есть компоненты Link, которые меняют location компонента.
4. В интернете много материалов, как подружить React Router с SEO
Афанасий Захаров, в принципе, часто бывает так, что сначала может и не быть никаких интерактивных элементов, но потом что-то да просят добавить. Поэтому для себя отметил, что надо делать все через react
Простой