React Competent in SilverStripe

React Competent in SilverStripe

// gist title

app.js

 var React = require('react/addons');

 var App = React.createClass({
   
   getInitialState: function() {
     return {
       data: window.ReactAppData
     };
   },

   render: function() {
     var data = this.state.data;
     return (
       <div className="event-app">
        <h1>data.Title</h1>
        <p>data.Content</p>
        <div className="footer">data.FooterText</div>
       </div>
       );
   }

 });

MyPage.php

<?php
class MyPage extends Page{
  private static $has_one = array(
    'ReactComponent' => 'MyReactComponent'
  );
}

MyPage.ss

$ReactComponent

MyReactComponent.php

<?php
class MyReactComponent extends Dataobject{
  private static $db = array(
    'Title' => 'Varchar(255)',
    'Content' => 'Varchar(255)',
    'FooterText' => 'Varchar(255)'
  );
  
  private static $belongs_to = array(
    'Parent' => 'MyPage.ReactComponent'
  );
  
  public function forTemplate(){
    Requirements::javascript("path/to/app.js");
    $output = "window.ReactAppData=".json_encode($this->toMap());
    $output .= "<div id=\"AppRoot\"></div>";
    return $output;
  }
}