Фронтэнд: как воткнуть Реакт в существующий сайт
Люди часто спрашивают «а как воткнуть Реакт в существующий сайт? У нас есть огромный фронтэнд на каком-нибудь Джквери или не дай бог Ангуларе первом, мы устали от всего этого, но огромный рефакторинг нам никто не даст (и слава богу — иначе это затянется на десятилетия), как нам начать втыкать Реакт потихоньку?»
Для этого нам нужно познакомиться с работой Реакта и узнать, почему существуют react-pdf, redocx (рендеринг в .docx 😧) и даже react-tv, не говоря уж про react-native.
UPD: добавил более богатый пример (а не хеллоу ворлд небольшой) и блок “Как отправить в продакшен”. Заодно был обновлен скрипт билда, чтобы он работал только с Джсом, а не с нашей демкой на src/index.html. И демку на Гитхабе.
Реакт не рендерит
Реакт (библиотека react, весом в 2.2 Кб) не занимается рендером. Задача Реакта — построить дерево элементов и обновлять его когда обновляются стейт или пропы.
Рендерингом занимаются другие библиотеки: react-dom, react-native, redocx, react-tv и другие.
На примере react-dom это выглядит так: ReactDOM.render(React.createElement(App), document.getElementById("app")), где App — ваше Реакт-приложение.
Какой практический смысл с этого? Вы можете заняться рефакторингом постепенно: не сразу переделывать всё приложение, а писать реакт-приложения и рендерить их через кучу ReactDOM.render().
Про тулинг — Бейбель, Вебпак и другое
«Женя, но Реакт же сложный! Нужно много всего устанавливать, ставить, вебпак и бейбель чтобы всё работало!».
Ну, как мы видим в примере выше, нет — работает в браузере даже через тег <script>. Дело только в том, что хочется-то модулей, хочется нормального ES6, хочется JSX, а это даёт только Бейбель.
С Вебпаком мы возиться не будем: он слишком сложный, а create-react-app тоже не особо подойдёт: он подходит либо для новых приложений, либо для существующих уже на Реакте (чтобы избавиться от настройки Вебпака и другого), потому что там идёт мощная инфраструктура. Для постепенной миграции на Реакт она не нужна.
Мы выберем Парцел: новый билдер, в котором практически ничего настраивать не надо, потому что он преднастроен на работу с Бейбелем, ПостЦСС, Тайпскриптом и другими. Он выполняет только одну работу: дать возможности Вебпака под одной командой, поэтому идеально подойдёт в нашем кейсе. В будущем можно будет переехать на react-scripts (основа create-react-app), но это необязательно.
Работаем с Реактом через Парцел
В коде ниже будет подразумеваться, что вы знакомы с Ярном и Терминалом.
Давайте попробуем наш пример перевезти с Джсфиддла к себе.
После этого создаёте файл .babelrc и прописываете использование этих пресетов:
В package.json ко всему прочему нужно прописать скрипты для старта:
Это всё, теперь можно перейти к коду: по команде yarn start запустится сервер, а yarn build выдаст готовый билд в директорию dist.
UPD: раньше тут был простейший пример с Hello World, но люди сказали что это слишком легко, поэтому я переделал на демку более-менее возможного сайта (взял moscow.expert за референс)
В src/index.html (это наш пример, в вашему случае может быть какой-нибудь шаблонизатор в готовой системе) подключаем наш джс-файл и вставляем элементы, в которые будем рендерить реакт-приложения:
В src/index.js. уже используем модули, современный Джс и JSX:
Переходим на localhost:1234 и вуаля, наш Реакт работает уже вместе с JSX:
Как отправить в продакшен?
Но, конечно, во всей этой истории есть большой вопрос: а как отправить в продакшен? Демка с src/index.html на Парцеле это прикольно, но нам же нужно интегрировать в существующую систему.
src/index.html это всего лишь демка, вы можете использовать любой шаблонизатор, нам важен лишь бандл с реакт-приложениями.
В своей билд-системе вы настроите Парцел через yarn build, чтобы получить файл dist/index.js, который потом и подключаете обычным тегом <script>.
Итог
Сначала мы разобрались в чём отличие Реакта от react-dom, react-native, react-pdf и других рендеров.
Затем поняли, что мы можем рендерить много разных Реакт-приложений на одной странице: можно вызывать ReactDOM.render() к каждому нужному элементу (например, на огромной странице вы можете отрендерить несколько блоков: калькулятор ипотеки, информацию о ЖК, а остальное оставить на вашем старом Джквери).
И вишенкой на торте стал Парцел: замена Вебпаку практически без конфигурации.
Телеграм-канал про фронтэнд.
Ссылки и статьи от фронтэндеров и для фронтэндеров.
Посты выходят 2–3 раза в день.
