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 янв.
45 просмотров

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 янв.

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

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

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

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

JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 3 часа назад
- 21 просмотр
0

ответов
React

Простой
Zod: Валидация select?
- 1 подписчик
- 18 часов назад
- 51 просмотр
0

ответов
React

Простой
Как, используя i18next-extract, разделять файлы переводов постранично?
- 1 подписчик
- вчера
- 21 просмотр
0

ответов
React

Простой
Почему данные не подгружаются в форму?
- 2 подписчика
- 18 нояб.
- 75 просмотров
3

ответа
React

Средний
Сборка build открывается на хостинге с ошибками в консоли, на localhost все работает, в чем может быть проблема?
- 1 подписчик
- 17 нояб.
- 132 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Почему выдает ошибку когда загружаю проект в Vercel?
- 1 подписчик
- 15 нояб.
- 93 просмотра
0

ответов
React

Средний
React Hook Form. Какие существуют лучшие практики приведения объектов полученных с бекенда к значениям формы и обратно?
- 1 подписчик
- 13 нояб.
- 65 просмотров
0

ответов
JavaScript

+4 ещё

Простой
Почему слайдер на базе Swiper с видео YouTube в iframe не двигается при свайпе?
- 2 подписчика
- 13 нояб.
- 79 просмотров
1

ответ
React

Простой
Ошибка TypeError: Cannot read properties of undefined (reading 'completedCourses') в React-компоненте?
- 1 подписчик
- 13 нояб.
- 55 просмотров
0

ответов
React

+1 ещё

Средний
Как правильно обработать запрос в rtkq?
- 1 подписчик
- 11 нояб.
- 39 просмотров
1

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

Ведущий React Native разработчик

Студия 15

от 200 000 до 250 000 ₽

React Native Developer

Wanted. • Санкт-Петербург

До 300 000 ₽

React Native developer (+Node.js)

CTRL+ • Москва

от 250 000 до 320 000 ₽

Разработка сайта под ключ на CMS Bitrix или Wordpress по готову дизайн

22 нояб. 2024, в 14:05

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

Написание статей в нужном стиле ( интерьер, дизайн спальни )

22 нояб. 2024, в 13:52

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

Необходимо доработать расширение для Google Chrome

22 нояб. 2024, в 13:51

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

Никакой проблемы нет. Ты можешь рендерить реакт в сколько хочешь контейнеров. Можешь даже подключить реакт через 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?

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

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

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