Вы можете добавить пакет приложений внешнего интерфейса, используя вызовы Requirements::javascript() в своем контроллере, или из своего шаблона, используя вызовы <% require %>. Фундаментальная концепция заключается в том, чтобы «добавить свои JavaScript (и / или CSS) пакеты в мой внешний вид». С этого момента ваш пакет должен инициировать себя, учитывая, что пакеты доступны на странице.
Вот легкий пример, добавленный к теме:
- Добавить папку темы, например
themes/my-theme
- Включите его, добавив к
app/_config/theme.yml
- Добавление макета ReactPage (примечание: макет - это раздел содержимого, а не полный макет страницы)
# File: ./themes/my-theme/templates/Layout/ReactPage.ss
<div id="my-react-app">
If you can see this, your React app hasn't initialised yet
</div>
- Очистить (
?flush в вашем браузере) кеш
Если вы добавите ReactPage в CMS, а затем откроете его на своем веб-интерфейсе, вы должны увидеть сообщение о том, что ваше приложение React еще не инициализировано. Это работает, потому что SilverStripe будет искать цепочку наследования страниц, чтобы найти ту, которая имеет шаблон, соответствующий его имени класса. Обратите внимание, что это включает в себя пространство имен класса, поэтому, если у вашего класса оно есть, оно должно быть, например, templates/Foo/Bar/Layout/ReactPage.ss.
Теперь инициализируйте демонстрационное приложение React:
cd themes/my-theme && create-react-app jscd js && yarn build
Теперь вам нужно указать SilverStripe «выставить» ресурсы вашей темы , которые будут символически связывать их (по умолчанию) с каталогом public/resources, чтобы вы могли получить к ним доступ через webroot (* 1042) * папка).
# File: ./composer.json
...
"extra": {
"expose": [
"themes/my-theme/build/static/js/bundle.js"
]
}
Запустите composer vendor-expose из корневой папки проекта, чтобы повторно открыть все ваши ресурсы.
Наконец, добавьте ваши требования к шаблону SilverStripe или контроллеру. Вы можете сделать это с помощью метода init() контроллера или непосредственно в шаблоне:
# File: ReactPageController.php (note that this may not exist and doesn't need to necessarily)
use SilverStripe\View\Requirements;
// ...
protected function init()
{
parent::init();
Requirements::javascript('themes/my-theme/js/build/static/js/main.ad956de7.chunk.js');
Requirements::javascript('themes/my-theme/js/build/static/js/2.6efc73d3.chunk.js');
Requirements::javascript('themes/my-theme/js/build/static/js/runtime~main.a8a9905a.js');
Requirements::css('themes/my-theme/js/build/static/css/main.5c68d653.chunk.css');
}
Для целей этого примера я использовал хеш-имена файлов, которые были созданы create-react-app. Было бы проще интегрировать в SilverStripe, если у вас есть согласованное имя файла, например bundle.js или что-то в этом роде.
Вы также можете сделать это в своем шаблоне:
# File: ./themes/my-theme/templates/Layout/ReactPage.ss
...
<% require javascript('themes/my-theme/js/build/static/js/main.ad956de7.chunk.js') %>
<% require javascript('themes/my-theme/js/build/static/js/2.6efc73d3.chunk.js') %>
<% require javascript('themes/my-theme/js/build/static/js/runtime~main.a8a9905a.js') %>
<% require css('themes/my-theme/js/build/static/css/main.5c68d653.chunk.css') %>
Загрузите ваш браузер сейчас, и вы увидите, что приложение React работает. Он будет немного сломан, но для примера достаточно показать, как запустить приложение React на вашей странице.