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

[Raadsert]

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

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

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

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

[Nexus]

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

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

Было бы замечательно если бы документация писалась для людей которые не разбираются.

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


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

[Raadsert]

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

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

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

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

[Nexus]

"Как разделить файл 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>;
}

[Raadsert]

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>;
}

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

[Nexus]

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

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

[ksa]

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

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

[ksa]

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

[Raadsert]

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

[ksa]

часто делают интернет-магазины на реакт?

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

Хорошее ли решение делать магазин на реакте?

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