Dev/Build окружение для отдельных компонентов React?

Question

Dmitry Shnyrev @dmnBrest

Salesforce for money. Python, Go, Ruby for soul.

React

Dev/Build окружение для отдельных компонентов React?

Хочу попробовать React для такой цели. Мне надо сделать много мелких независимых react компонентов для использования на сайте. (типа header, sidebar, search и прочие). Но все туториалы рассказывают как сделать монолитный SPA. А мне надо сделать такой проект с кучей компонентов которые будут компилироваться в свои отдельные js бандлы, ну или в один большой, но потом их можно будет распихать по html странице. По типа Web Components. Наверное правильнее это описать как компилирование React Components в Web Components. Нужно что-то типа https://github.com/facebook/create-react-app но чтобы компоненты можно было использовать отдельно а не в составе большого app.

Вопрос задан 24 янв.
39 просмотров

7 комментариев

Подписаться 1 Простой 7 комментариев

Kentavr16 @Kentavr16

Никакой проблемы нет. Ты можешь рендерить реакт в сколько хочешь контейнеров. Можешь даже подключить реакт через cdn и играться на здоровье. Просто для каждого компонента указываешь свой рут (если использовал create-react-app, то нужно повторить процедуру из index.js для каждого отдельного компонента ).

Написано 24 янв.
Kentavr16 @Kentavr16

По логике это должны быть либо разные проекты, либо (проще всего) делать это на основе html-файла+cdn с кусками js.

Написано 24 янв.
Dmitry Shnyrev @dmnBrest Автор вопроса
Kentavr16, так в этом и суть чтобы запустить dev server по типу npm start, а он тебе все компилирует в js bundle(s). так чтобы ты мог на html странице сделать

sjdhfkjsdfkjsdhf <my-header /> dskflhsldfjlsd <my-sidebar /> fkjslfjdsf <my-footer />

и не приходилось перезапускать этот dev server для каждого отдельного компонента со своим app. И работал hot-reload.
Написано 24 янв.
Kentavr16 @Kentavr16

Можно попробовать настроить вебпак на то чтобы он делал отдельный бандл для каждого входного файла(компонента). Пока разрабатываешь - все рендеришь в корень, после - используешь по необходимости. Это либо руками с 0 проект настроить, либо eject того же create-react-app и конфиги ковырять.

Написано 24 янв.
Kentavr16 @Kentavr16

Dmitry Shnyrev, просто я не пойму зачем тут нода) Если можно просто скачать какой-то лайв сервер на vs-code и писать все не отходя от кассы, так сказать?

Написано 24 янв.
Dmitry Shnyrev @dmnBrest Автор вопроса

Kentavr16, а вот это интересно "лайв сервер на vs-code" я что-то не встречал примеры об этом. Просто долго работал с ангуляром, привык к dev серверу. Мне собственно и надо чтобы jsx в js компилить, да на страницу script тегом подключать. Просто думал есть готовые решения, а дока по реакту советует использовать фреймворки типа next.js

Написано 24 янв.
Kentavr16 @Kentavr16
предполагаю ты хочешь что-то вроде
этого.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const App = () => { return ( <div> <h1 style={{color:"red"}}>Hello, world</h1> </div> ); }; ReactDOM.render( <App />, document.getElementById("root") ); </script> <div id="root2"></div> <script type="text/babel"> const App2 = () => { return ( <div> <h1 style={{ color: "red" }}>Hello again, world</h1> </div> ); }; ReactDOM.render( <App2 />, document.getElementById("root2") ); </script> </body> </html>

Вроде ок работает. Есть ньюанс в том что не смог отрендерить через createRoot( в консольке браузера предупреждение), но думаю это легко поправить - сам копаться не стал, лень.
Способ это конечно "экзотический", если не сказать жестче. Но и цель твоя тоже "оригинальная"... Решай сам. Способов много, все зависит от сложности компонентов и того что ты хочешь добиться. Если бегом - то сдн,если что-то серьезнее - придется крутить вебпак или галп.
Обрати внимание на то что бабел также подключается, иначе работать не будет.

Советуют фреймворки потому что обьективно нет причин их не использовать) Такие "вкрапления" реакта дело скорее всего бессмысленное. Проще переписать весь сайт потихоньку на реакт, но подходить к этому более основательно а не тут кусок - там кусок. Тебе задача виднее, в принципе.
p.s. - про "во сколько хочешь контейнеров" возможно загнул - я бы на твоем месте мониторил производительность после добавления нового контейнера для виджета реакт. На всякий случай.
Написано 24 янв.

Пригласить эксперта

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

React

Простой
Не работает библиотека classnames?
- 1 подписчик
- 15 часов назад
- 34 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему падает локальный сервер?
- 1 подписчик
- вчера
- 92 просмотра
0

ответов
React

+1 ещё

Простой
В чём преимущества использования Redux c React?
- 1 подписчик
- 28 апр.
- 120 просмотров
1

ответ
React

Простой
React (Класс расширяет значение undefined не является конструктором или null)?
- 1 подписчик
- 27 апр.
- 55 просмотров
1

ответ
React

Простой
Почему не обновляется значение в useState?
- 1 подписчик
- 26 апр.
- 76 просмотров
1

ответ
React

Средний
Выделение ядра у фронта на реакте, какие есть варианты реализации?
- 1 подписчик
- 26 апр.
- 48 просмотров
0

ответов
React

+2 ещё

Средний
Как загружать данные перед серверным рендерингом в React?
- 2 подписчика
- 26 апр.
- 166 просмотров
1

ответ
React

Простой
В чем заключается суть оптимизации скорости обновления компонентов через useReducer?
- 1 подписчик
- 24 апр.
- 113 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- 23 апр.
- 108 просмотров
0

ответов
React

Простой
Почему Vite/Rollup не может зарезолвить абсолютные импорты?
- 1 подписчик
- 23 апр.
- 55 просмотров
1

ответ
Показать ещё Загружается…

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Senior React Developer

DARS • Москва

от 200 000 до 300 000 ₽

React Native разработчик

Petsee

от 90 000 до 150 000 ₽

Нужна презентация и опросник на новую фичу для ресторанов

02 мая 2024, в 01:05

8000 руб./за проект

Поменять пароль root пользователя mysql

01 мая 2024, в 23:44

1000 руб./за проект

Модифицировать android приложение

01 мая 2024, в 23:25

2000 руб./за проект

Никакой проблемы нет. Ты можешь рендерить реакт в сколько хочешь контейнеров. Можешь даже подключить реакт через cdn и играться на здоровье. Просто для каждого компонента указываешь свой рут (если использовал create-react-app, то нужно повторить процедуру из index.js для каждого отдельного компонента ).
По логике это должны быть либо разные проекты, либо (проще всего) делать это на основе html-файла+cdn с кусками js.
Kentavr16, так в этом и суть чтобы запустить dev server по типу npm start, а он тебе все компилирует в js bundle(s). так чтобы ты мог на html странице сделать

sjdhfkjsdfkjsdhf <my-header /> dskflhsldfjlsd <my-sidebar /> fkjslfjdsf <my-footer />

и не приходилось перезапускать этот dev server для каждого отдельного компонента со своим app. И работал hot-reload.
Можно попробовать настроить вебпак на то чтобы он делал отдельный бандл для каждого входного файла(компонента). Пока разрабатываешь - все рендеришь в корень, после - используешь по необходимости. Это либо руками с 0 проект настроить, либо eject того же create-react-app и конфиги ковырять.
Dmitry Shnyrev, просто я не пойму зачем тут нода) Если можно просто скачать какой-то лайв сервер на vs-code и писать все не отходя от кассы, так сказать?
Kentavr16, а вот это интересно "лайв сервер на vs-code" я что-то не встречал примеры об этом. Просто долго работал с ангуляром, привык к dev серверу. Мне собственно и надо чтобы jsx в js компилить, да на страницу script тегом подключать. Просто думал есть готовые решения, а дока по реакту советует использовать фреймворки типа next.js

Dev/Build окружение для отдельных компонентов React?

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

Минуточку внимания

Войдите на сайт