PHPackages                             maxime-rainville/recipe-react - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. maxime-rainville/recipe-react

ActiveSilverstripe-recipe[Utility & Helpers](/categories/utility)

maxime-rainville/recipe-react
=============================

Quickly set up your Silverstripe CMS project for React development

31.4k1JavaScript

Since Jul 23Pushed 4y ago1 watchersCompare

[ Source](https://github.com/maxime-rainville/recipe-react)[ Packagist](https://packagist.org/packages/maxime-rainville/recipe-react)[ RSS](/packages/maxime-rainville-recipe-react/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (2)Used By (0)

Silverstripe CMS react recipe
=============================

[](#silverstripe-cms-react-recipe)

The purpose of this module is to allow Silverstripe CMS developers to quickly get started building React components to customise the CMS UI.

Before you get started
----------------------

[](#before-you-get-started)

This guides assumes you have the following:

- a working Silverstripe CMS project
- the `composer` executable installed in your path
- the `yarn` executable installed in your path

Setting up your projects
------------------------

[](#setting-up-your-projects)

### Step 1 - Add the recipe to your project

[](#step-1---add-the-recipe-to-your-project)

```
composer require maxime-rainville/recipe-react
```

Installing the recipe will:

- Add a `app/cms-client` folder to your project. This is where you will put your React JS components.
- Add a `app/_config/recipe-config.yml` file to your project. This will get your compiled JS/CSS code loaded in the Silverstripe CMS admin.

### Step 2 - Re-install `silverstripe/admin` from source

[](#step-2---re-install-silverstripeadmin-from-source)

To compile `app/cms-client`, you need to install `silverstripe/admin` from source and download the `silverstripe/admin` JS dependencies.

`maxime-rainville/recipe-react` comes with a small bash script to simplyfie this process:

- Running `vendor/bin/from-source check` will validate if `silverstripe/admin` has been installed properly to do CMS JS development.
- Running `vendor/bin/from-source reinstall` will attempt to reinstall `silverstripe/admin` to allow you to compile `app/cms-client`.

Alternatively, you can run this sequence of command:

```
# Start in your project root. This will reinstall admin from source
rm -rf vendor/silverstripe/admin
composer install --prefer-source

# This line will download all silverstripe/admin JS dependencies
(cd vendor/silverstripe/admin && yarn install)
```

### Step 3 - Initial build of your CMS client

[](#step-3---initial-build-of-your-cms-client)

You should now be able to compile your CMS client:

```
cd app/cms-client
yarn install
yarn dev
```

This should create a `app/cms-client/dist` directory.

### Step 4 - Expose your CMS client

[](#step-4---expose-your-cms-client)

The `app/cms-client/dist` folder needs to be accessible to your browser. To do this you need to "expose" it.

Update your project `composer.json` file. You need to add an `expose` key under `extra` and give it an array of paths to expose. Your composer file should look something like this when you are done.

```
{
    "name": "your/project",
    "require": {
        "php": "^7.1 || ^8",
        "silverstripe/recipe-plugin": "^1.2",
        "silverstripe/recipe-cms": "4.x-dev",
        "silverstripe-themes/simple": "~3.2.0",
        "maxime-rainville/recipe-react": "dev-master"
    },
    "extra": {
        "resources-dir": "_resources",
        "expose": [
            "app/cms-client/dist"
        ]
    },
}
```

You now need to run this command to expose your cms-client:

```
composer vendor-expose
```

You should now have a folder `public/_resources/app/cms-client/dist`.

### Step 5 - Test your set up

[](#step-5---test-your-set-up)

You can take these optional steps to validate that everything is working correctly.

1. Edit `app/cms-client/src/bundles/bundle.js` and add `alert('My set up is done');` at the end.
2. Run `yarn dev` from `app/cms-client` to rebuild your library.
3. Rebuild your Silverstripe CMS project with `vendor/bin/sake dev/build`
4. Access your test site in your browser. You may need to flush the Silverstripe cache with by adding `?flush=1` to your URL.
5. Access the CMS administration area.

You should see a JS alert with "My set up is done".

Building and using your first react component for Silverstripe CMS
------------------------------------------------------------------

[](#building-and-using-your-first-react-component-for-silverstripe-cms)

In this step we will create a simple On/Off form field.

### Step 1 - Create the PHP form field class

[](#step-1---create-the-php-form-field-class)

In your PHP code base, create a `OnOffButton.php` file with this content. This will be the object you will be adding to your PHP form.

```