Использование React с существующим приложением с JSX - PullRequest
Новая
       132

Использование React с существующим приложением с JSX

0 голосов
/ 10 ноября 2018

Мы планируем переключить новые технологии, такие как «Реакция», на мой проект CMS, который разрабатывается в течение 10 лет.

До сих пор все было просто и понятно в передней части.

Сначала включите jquery.js, затем, если необходимо, включите компоненты и сторонние скрипты, затем кодируйте и танцуйте с DOM.

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

Потратив более 10 часов на документы и учебники React, я очень хорошо понимаю, что это такое и как оно работает.

Но я понял, что я очень незнаком с некоторыми популярными концепциями. Я никогда не использовал node.js, никогда не использовал npm, babel, webpack и, возможно, другие "новые" вещи, которые я видел везде. Я столкнулся лицом к лицу с этими инструментами из-за React, и я убежден, что они неизбежны для современной разработки переднего плана.

Теперь вопрос

Наша CMS работает на PHP и сильно зависит от MooTools во внешнем интерфейсе. Вместо полной переписки 10-летней CMS, я просто хочу попробовать некоторые технологии частично для некоторых случаев. Решили начать с React.

Для случая, в который я хочу интегрировать ag-Grid , чтобы также отреагировать.

Что я не понял, так это как собрать все эти инструменты вместе.

Из-за ag-Grid я не смогу использовать простой способ реагирования include js.

В примерах написанного кода есть JSX. Это означает, что мы пишем JSX и запускаем его переведенным для браузера, чтобы проверить, все ли в порядке.

  • Каждый раз перед тестированием мне нужно переводить эти файлы?
  • И более того, если файлы переведены, отладка становится очень сложно?
  • Может ли Babel сделать это во время бега? Если да, то это хорошая практика.
  • В папке node_modules много файлов. Какой из них включить для производства?

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

Существует множество вопросов, а не пошаговое руководство от начала до производства.

1 Ответ

0 голосов
/ 10 ноября 2018

JSX - это расширение по спецификации JavaScript.Это синтаксический сахар для React.createElement(...) и является необязательным при разработке React.

React можно записать простым ES5: 

React.createElement("div", { foo: "foo" });

Вместо JSX: 

<div foo="foo" />

Или с помощью вспомогательных функций, таких как h, которые достигают той же цели, например react-hyperscript.

Тот факт, что есть PHP backend приложение, не мешаетот разработки приложения React frontend с JSX.Для этого может потребоваться настроить проект React так, чтобы он не использовал встроенный веб-сервер Express, и создать клиентское приложение в произвольном месте, то есть в общей папке существующего приложения.Если используется create-react-app, это может потребовать извлечения проекта).

Каждый раз перед тестированием мне нужно переводить эти файлы?

Они должны бытьпереносится в обычный JavaScript (ES5, если он нацелен на старые браузеры).Они могут быть переведены при каждом изменении в исходных файлах, когда клиентский проект выполняется в режиме наблюдения (условно npm start).

И более того, если файлы переводятся, отладка становится очень сложной?

Для этого предназначены исходные карты.

Может ли Babel сделать это во время выполнения?Если да, то это хорошая практика.

Возможно использовать Babel во время выполнения, и это не очень хорошая практика, даже в среде разработки.

Естьмного файлов в папке node_modules.Какие из них я должен включить для производства?

Содержимое node_modules не имеет значения.Почти все они являются зависимостями разработки, которые необходимы для создания клиентского приложения.Это задача для пакета, который представляет собой Webpack в шаблоне create-react-app.Он строит зависимости проекта для простого JS в папке dist.

...