---
myst:
html_meta:
"description": ""
"property=og:description": ""
"property=og:title": ""
"keywords": ""
---
# Exercise 13: Pattern with React
```{warning}
This exercise requires a working buildout using a fork of the `collective.jstraining` package.
```
In this exercise, we will be walking through creating a pattern that uses [ReactJS](https://react.dev/).
You will be working in the `exercise13` directory of the `collective.jstraining` package.
## Add Your Pattern File
First off, in your `exercise13/static` directory, add a file named `pattern.js`.
Use this file to build your pattern.
This example will bind a React component to a pattern element:
```javascript
/* global require */
require([
'jquery',
'pat-base',
'exercise13-react'
], function($, Base, R) {
'use strict';
/* combining bundle and pattern in same file this example */
var D = R.DOM;
var Exercise13Component = R.createClass({
render: function(){
return D.div({}, [
D.span({}, 'Foobar rendered by exercise 9')
]);
}
});
Base.extend({
name: 'exercise13',
trigger: '.pat-exercise13',
parser: 'mockup',
defaults: {
},
init: function() {
var that = this;
R.render(R.createElement(Exercise13Component, that.options), that.$el[0]);
}
});
});
```
Notice that the `init` of the pattern utilizes the React element binding syntax.
From there, React takes over and options from the pattern go into `props` for the React component.
## Register Static Resource Directory
Next, let us register the static directory we just placed our script into.
To register it, you need to add {term}`ZCML` registration for the static directory your script is in.
Add this to the `exercise13/configure.zcml` file
```xml
```
## Register Your Bundle
Registration is done exactly like the other examples:
```xml
++plone++exercise13/react.min.js
++plone++exercise13/pattern.js
++plone++exercise13/pattern.less
exercise13
default
True
++plone++exercise13/exercise13-compiled.min.js
++plone++exercise13/exercise13-compiled.css
2016-10-04 00:00:00
jquery
pat-base
```
## Installation
At this point, we have all the files necessary to run the pattern.
1. Start up your Plone instance
2. Install the `Exercise 13` add-on
## Running
At this point, we have no compiled version of the code that we are running with so our code does nothing.
1. Go into {menuselection}`Site Setup --> Resource Registries`
2. Check {guilabel}`Development Mode`
3. Select to develop JavaScript and CSS for the `exercise13` bundle
4. Click {guilabel}`save`
This should load your JavaScript and LESS files now.
However, we do not have any elements with the `pat-exercise13` class assigned to them.
It is up to you how to apply the pattern class to an element of your choice.
A couple options available to you are:
1. use TinyMCE source view and add `class="pat-exercise13"` onto any tag
2. customize the theme on your site and add it to an element in your theme file or use a diazo rule to dynamically add the class to an element.
## Production
To build our bundle, we will utilize the `plone-compile-resources` script that ships with Plone.
```{warning}
If you are not running a ZEO setup, you will need to shut down your Plone instance since the ZODB in this mode does not allow multiple processes to access it at the same time.
```
An example command will look like this:
```shell
./bin/plone-compile-resources --site-id=Plone --bundle=exercise13
```
Once this command finishes, your bundle is built and will be deployed with your package.