Интернет-магазин React
 

Здравствуйте.

Подскажите, хорошая ли идея делать интернет-магазин на react?
Реакт ведь используется для создания SPA, а интернет-магазин под это определение слабо подходит. Или на реакте можно как то делать MPA?

Тут бы узнать какое определение "интернет магазина" ты используешь... :)
Чем это СПА вдруг стало "слабо подходить" для реализации какого-либо вэб-приложения?

Типичное представление интернет магазина:
- главная страница
- раздел с товарами и подразделы
- страница товара
- страница оплаты
- и прочее...

Насколько я понимаю, SPA ограничивается одним файлом, в котором содержится весь сайт и вся его логика, и с моей точки зрения, было бы неправильно запихивать на страницу "Оплата" код для главной страницы. Кроме того даже при использовании роутеров (в реакте) все пути вроде "exemple.com/page-1", если по ссылкам переходить напрямую - работать не будут.

Я искал на этот счёт информацию, но кроме какой-то настройки вебпака, ничего не нашёл.

Ты не правильно понимаешь про СПА...

Если все сделано правильно - все будет работать...

Условно, вся логика же хранится в 1-м файле main.js.

А как сделать несколько отдельных страниц в реакт? Нигде не нашёл чего-то подобного:
page-1.html
page-1.js

Это если вовсе "условно"... :)

ХТМЛ-файл там действительно один... Это и есть СПА.
А вот скриптовых файлов там может быть вагон и маленькая тележка.

Если не нашел - значит плохо искал...
Вот, например, довольно много чего показано, что можно реализовать на Реакт.
https://www.youtube.com/watch?v=GNrdg3PzpJQ

Это всё отлично работает при тестах на локалке, а если скомпилированный (run build) проект закинуть на хостинг - ссылочная навигация работать не будет(переход по прямой ссылке на условную страницу оплаты вернёт 404).

О том как отделить код который формирует главную страницу, от кода который формирует страницу оплаты - там тоже не говорится. Всё компилируется в файл main.js.

А сервер (или само приложение) настроить, чтобы он отдавал SPA вместо 404 не пробовали?

Если вы сами планировали на React магазин писать, то явно идея плохая. Делайте на том, в чем разбираетесь.

Да? Вот было бы замечательно как-то узнать об этом. А ещё было бы круто если бы по запросу "запуск проекта react на хостинге" гуглилось бы хоть что-то кроме видосов с демками на локалке.

Ага, а то в чём не разбираетесь - не разбирайтесь, и вообще не учите ничего и никуда не суйтесь. Спасибо за совет.

Ну так и ведь и гуглится: how to deploy react app on vps, если даже какая-то инструкция на сайте CRA.

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

Обращайтесь.

Дайте-ка подумать, чем же обычный хостинг отличается от VPS... Хммм... Вы конечно посчитаете что у меня "не все дома" интернет-магазин на реакте, да на обычный хостинг. Но тут я хочу разобраться как это сделать именно с обычным хостингом.

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

Вам дать ссылку на запрос «how to deploy react app on shared hosting» или вы сами справитесь с задачей?

Пожалуйста, соседняя ссылка в меню сайта react.dev: https://react.dev/learn - для людей, которые не разбираются в react и, возможно, едва ли знакомы вообще с js, ибо ссылки на mdn встречаются с завидной регулярностью.


А вот ссылка на учебник по js сразу на русском языке: https://learn.javascript.ru/intro

Хорошо, тогда возможно у вас найдётся и правильный запрос который поможет ответить на вопрос "Как разделить файл main.js для каждой страницы? Чтоб по адресу /page-1 загружалась только та часть кода которая нужна для /page-1"?

Спасибо, оставьте себе.

Как-то так:

import React from 'react';

const Page1 = React.lazy(() => import('./Page1.tsx'));
const Page2 = React.lazy(() => import('./Page2.tsx'));

export default function App() {
    const pathname = location?.pathname;
    
    let PageComponent: any | null = null;
    if (pathname === '/page-1') {
        PageComponent = Page1;
    }
    
    if (pathname === '/page-2') {
        PageComponent = Page2;
    }
    
    if (!PageComponent) {
        return <>Main page</>;
    }
    
    return <React.Suspense fallback={<>Loading...</>}>
        <PageComponent/>
    </React.Suspense>;
}

Выглядит как костыль

Это просто пример того, как можно разбить приложение на чанки. По хорошему тут вместо if-else нужно использовать роутер.

Это уже все зависит от настроек того "хостинга"...
Нужно чтобы на запросы "определенного типа" хостинг отдавал только один файл...
Это же СПА.

Raadsert, я конечно понимаю, что учить специалиста - только портить... :D
Но если спрашиваешь - так будь готов читать то, что будут писать в ответ.
Тут врагов нет...

ksa, Nexus, А в целом что скажете, часто делают интернет-магазины на реакт? Хорошее ли решение делать магазин на реакте?

Без разницы на чем их делать...
Кто на чем умеет - на том и делает.

Ни чем не будет отличаться от любой другой реализации...

А можно как-то очищать память от загруженных чанков в течении одной сессии? А то ведь, чем больше страниц посещается, тем больше чанков будет лежать в памяти.

Я не встречал информации по этому вопросу... Обычно просто рассказывается о "ленивой подгрузке" и на этом все.