React App block¶
React App block allows an editor to embed a preconfigured React application into a page.
It's configured in YAML files, under the
Page block configuration isn't SiteAccess-aware.
Another element of React App Block is
which adds component and props variables.
It's common to all the blocks.
Clear the persistence cache
Persistence cache must be cleared after any modifications have been made to the block config in Page Builder, such as adding, removing or altering the Page blocks, block attributes, validators or views configuration.
To clear the persistence cache run
./bin/console cache:pool:clear [cache-pool] command.
The default cache-pool is named
cache.tagaware.filesystem. The default cache-pool when running redis is named
cache.redis. If you have customized the persistence cache configuration, the name of your cache pool might be different.
In prod mode, you also need to clear the symfony cache by running
In dev mode, the Symfony cache will be rebuilt automatically.
React App Block configuration¶
componentattribute which binds Page Builder block with React App
viewsattribute is removed
Each configured React app block has an identifier and the following settings:
||Name of the block used in the Page Builder interface.|
||Category in the Page Builder elements menu that the block is shown in.|
||Thumbnail used in the Page Builder elements menu.|
||React App Component name used in
||(Optional) Toggles the block's visibility in the Page Builder elements menu. Remove the block from the layout before you publish another version of the page.|
||(Optional) List of block attributes.|
1 2 3 4 5 6 7 8 9 10 11
Each entry below
react_blocks adds one block to the Page Builder with the defined name, category and thumbnail.
Both name and attributes support a short syntax and a long one for specifics.
Attributes defined without sub-keys use the key as the identifier and name, and the value as the type:
Sub-keys can be used to specify any of the usual attributes configuration key:
1 2 3 4 5 6
Apps that are registered this way must be configured and referenced in the semantic configuration to be registered as blocks.
Parameters passed as props must be converted so that they can be used as the configured type in the app.
Create React App block¶
In the following example, you learn how to create
Calculator React App block.
Configure React App Block¶
First, create a .jsx file which describes your component. You can place it in any location.
In the following example, create
Calculator.jsx file in
1 2 3 4 5 6 7
Then, create a
Calculator.js file in
Files in this directory create a map of Components which then are imported to
As a result, the components are rendered on the page.
1 2 3 4 5
Now, you should see new
Calculator block in the Page Builder blocks list: