Не понимаю как запустить React на localhost без Webpack?

Question

[Ninja Mate]

Нахожусь в начале пути по освоению ReactJS, моя цель сделать Theme для движка WP.
Используею Webpack. Возникли вопросы, которые не получается понять самому.

1 Как запустить React без Webpack, в том смысле, что не понимаю как заставить его работать на том же localhost что и WP которая на xampp (сейчас на разных портах благодаря Webpack)

2 Как все это должно выглядить на сервере С NodeJS или можно без (скомпелировать js ) или запускать CGI-Node?

Answer 1

[Никита Гущин]

Бывают изоморфные приложения - они действительно без node не запустятся. По факту разработка происходит так - ты пишешь код react + jsx + ES6 + ... . Затем скармливаешь все это вебпаку (а он babel'у) и на выходе у тебя получается транслированный .js файл, который можно просто подключить как любой другой файл и все будет работать. Можно делать это рантайм - но я таким не занимался и не очень понимаю зачем это делать в реальных проектах.

Answer 2

[Антон Измайлов]

Как запустить без вэбпака? Подключить через <script>библиотеку реакта и пилить. Собственно всё

Comments

[Ninja Mate]

Не в этом немного вопрос. Как запустить их с движком wp на одном хосте локальном, у меня сейчас их два получается на 3000 и 80 порт

[Антон Измайлов]

Ninja Mate: Вэбпак вешается на 3001 порт и оттуда уже тянется. Можете посмотреть как вэбпак взаимодействует с server-side render'ингом на примере любого react-webpack-* boilerplate

[Ninja Mate]

Антон Измайлов: Понял спасибо, я так в принципе и реальзовал сейчас с 80 порта слушает 3000 и показывает React интерфейс. Для разработки подходит, но как все это на готовом продукте выглядит? (Мой первый проект с React) Задача все это запускать под wp движками (с новыми api), а там везде сервера php. Код готового приложения в js переводить для финальной версии и клиента грузить (что почитать?) или есть способы запускать react без node?

[Антон Измайлов]

Ninja Mate: https://christianalfoni.github.io/react-webpack-co...

Вкратце (поправьте, если ошибаюсь), то в продакшн уходит оптимизированная версия вэбпака, а работает она по той же схеме (на соседнем порте)

[Ninja Mate]

Антон Измайлов: Я подобный вопрос задал здесь https://lamosty.com/2015/10/react-wp-theme-structu... Автор ответил, что все приложение упаковывается в js файл и продакшн только под php сервером отлично работает. Запускал его продукт с github работает (хоть и с ошибками), но как в конце без node запускать не пойму. Проблема не в самом node (есть вроде даже CGI-Node зверь для апача...), но большинство конечных пользователей wp темы, такое не потянут и нужно простое решение для установки через админку движка.

[Никита Гущин]

Ninja Mate: бывают изоморфные приложения - они действительно без node не запустятся. По факту разработка происходит так - ты пишешь код react + jsx + ES6 + ... . Затем скармливаешь все это вебпаку (а он babel'у) и на выходе у тебя получается транслированный файл, который можно просто подключить как любой другой файл и все будет работать. Можно делать это рантайм - но я таким не занимался и не очень понимаю зачем это делать в реальных проектах.

[Ninja Mate]

Никита Гущин: webpack ./theme.js compiled.js Типа такого команды? другой функции чего-то не вижу в документации

[Никита Гущин]

Ninja Mate: ну около того. Обычно это все через JS делается. Там еще конфиг нужен.

[Ninja Mate]

Никита Гущин: Большое спасибо, все стало на свои места.

[Ninja Mate]

Никита Гущин: напишите как отдельный коммент, отмечу как рашение

[Никита Гущин]

Ninja Mate: спасибо)

Answer 3

[UdjinStolboviy]

Здравствуйте! Надо просто настроить правильно фай package.json
добавляете в него путь вашего домена или локального сервера

"version": "0.1.0",
"private": true,

spoiler

"homepage": "localhost/react/1",

"dependencies": {}
потом соберете заново продакшене версию и копируете из папки build все файлы на сервер. Все должно получиться и сайт запуститься.