Render React components directly in Fluid templates.
This Extensions enables you to render React Components directly in Fluid templates. It acts as an integration for symfony/ux-react into TYPO3.
The recommended way to install the extension is by using Composer. In your Composer based TYPO3 project root, just run:
composer require svenpetersen/typo3-ux-react
Before you start, make sure you have EXT:typo3_encore installed and configured. This extensions integrates Webpack Encore into TYPO3.
Follow the Symfony UX React official documentation
Additionally:
# Add this line to your package.json dependencies:
"@symfony/ux-react": "file:vendor/symfony/ux-react/assets"
# Install react
$ npm i react react-dom
# or
$ yarn add react react-dom
# Add these lines to your controllers.json:
"@symfony/ux-react": {
"react": {
"enabled": true,
"fetch": "eager"
}
}
# run
$ npm install --force
$ npm run watch
# or
$ yarn install --force
$ yarn watch
In any fluid template: Just register the Namespace and use the provided ViewHelper to render your component:
<html xmlns:ux="http://typo3.org/ns/SvenPetersen/UX/React/ViewHelpers">
<div {ux:reactComponent(name:'MyComponent',props:"{'name':'John Doe'}")}></div>
</html>
Please refer to the contributing document included in this repository.