├── test
├── drupal_react.gif
├── react_blocks.info
├── react_blocks.module
├── README.md
└── src
    └── react_blocks.js


/test:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/drupal_react.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/blackwood/drupal-react-blocks/HEAD/drupal_react.gif


--------------------------------------------------------------------------------
/react_blocks.info:
--------------------------------------------------------------------------------
1 | name = React Blocks Example
2 | description = Building A realtime React Block with JSON.
3 | core = 7.x
4 | 


--------------------------------------------------------------------------------
/react_blocks.module:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * @file
 5 |  * Sandbox Helper main .module file.
 6 |  *
 7 |  */
 8 | 
 9 | /**
10 |  * Implements hook_block_info().
11 |  */
12 | function react_blocks_block_info() {
13 |   // react recent nodes block
14 |   $blocks['react_recent_comments'] = array(
15 |     'info' => t('ReactJS Recent Comments'),
16 |     'cache' => DRUPAL_NO_CACHE
17 |   );
18 | 
19 |   return $blocks;
20 | }
21 | 
22 | /**
23 |  * Implements hook_block_view().
24 |  */
25 | function react_blocks_block_view($delta) {
26 | 
27 |   libraries_load('react');
28 |   drupal_add_js(drupal_get_path('module', 'react_blocks') . "/build/react_blocks.js");
29 | 
30 |   $block = array();
31 | 
32 |   switch ($delta) {
33 |     case 'react_recent_comments':
34 |       $block['subject'] = t('Recent Comments');
35 |       $block['content'] = _react_blocks_react_recent_comments_content();
36 |       break;
37 | 
38 |   }
39 |   return $block;
40 | }
41 | 
42 | function _react_blocks_react_recent_comments_content() {
43 | 
44 |   $output = "<div id='recent-comments'></div>";
45 | 
46 |   return $output;
47 | 
48 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a simple example of a ReactJS based Recent Comments block on Drupal, structured after/inspired by the [ReactJS Tutorial](http://facebook.github.io/react/docs/tutorial.html)
 2 | 
 3 | <img src="drupal_react.gif" title="Drupal and ReactJS" alt="The Reactive DOM is fun with Drupal!"/>
 4 | <p style="font-size:10px;color:lightgrey">Comment submission on the right, no browser refresh on the left.</p>
 5 | 
 6 | ## What's ReactJS?
 7 | 
 8 | > ### JUST THE UI
 9 | Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
10 | 
11 | > ### VIRTUAL DOM
12 | React uses a virtual DOM diff implementation for ultra-high performance. It can also render on the server using Node.js — no heavy browser DOM required.
13 | 
14 | > ### DATA FLOW
15 | React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.
16 | 
17 | Here, these are the [ReactJS Docs](http://facebook.github.io/react/docs/getting-started.html)
18 | 
19 | This also relies on the [React](http://drupal.org/project/react) module to serve the library.
20 | 
21 | And the [Services](http://drupal.org/project/services) module to render the JSON. In renderComponent you can chagne this URL that gets polled for to whatever you want.
22 | 
23 | To use the JSX syntax do this:
24 | 
25 | `npm install -g react-tools`
26 | 
27 | `jsx --watch src/ build/`
28 | 
29 | Otherwise you can edit the `build/` directly and delete `src` to add your own react components.
30 | 
31 | Cheers! :cat:
32 | 
33 | [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/milesblackwood/drupal-react_blocks/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
34 | 
35 | 


--------------------------------------------------------------------------------
/src/react_blocks.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @file
 3 |  * Main JS file for react functionality.
 4 |  *
 5 |  */
 6 | 
 7 | (function ($) {
 8 | 
 9 |   Drupal.behaviors.react_blocks = {
10 |     attach: function (context) {
11 | 
12 |       // A div with some text in it
13 |       var CommentBox = React.createClass({
14 | 
15 |       loadCommentsFromServer: function() {
16 |         $.ajax({
17 |           url: this.props.url,
18 |           dataType: 'json',
19 |           success: function(data) {
20 |             this.setState({data: data});
21 |           }.bind(this),
22 |           error: function(xhr, status, err) {
23 |             console.error(this.props.url, status, err.toString());
24 |           }.bind(this)
25 |         });
26 |       },
27 | 
28 |       getInitialState: function() {
29 |         return {data: []};
30 |       },
31 | 
32 |       componentDidMount: function() {
33 |         this.loadCommentsFromServer();
34 |         setInterval(this.loadCommentsFromServer, this.props.pollInterval);
35 |       },
36 | 
37 |       render: function() {
38 |           return (
39 |             <div className="commentBox">
40 |               <h3><b>Check them out!</b></h3>
41 |               <CommentList data={this.state.data} />
42 |             </div>
43 |           );
44 |         }
45 |       });
46 | 
47 |       var CommentList = React.createClass({
48 |         render: function() {
49 |           var commentNodes = this.props.data.map(function (comment) {
50 |             return (
51 |               <Comment name={comment.name} subject={comment.subject}>
52 |                 {comment.subject}
53 |               </Comment>
54 |             );
55 |           });
56 |           return (
57 |             <div className="commentList">
58 |               {commentNodes}
59 |             </div>
60 |           );
61 |         }
62 |       });
63 | 
64 |       var Comment = React.createClass({
65 |         render: function() {
66 |           return (
67 |             <div className="comment">
68 |               <h2 className="commentAuthor">
69 |                 {this.props.name}
70 |               </h2>
71 |               {this.props.subject}
72 |             </div>
73 |           );
74 |         }
75 |       });
76 | 
77 |       // Render our reactComponent
78 |       React.render(
79 |         <CommentBox url="/api/v1/comment.json" pollInterval={2000} />,
80 |         document.getElementById('recent-comments')
81 |       );
82 | 
83 |     }
84 |   }
85 | 
86 | })(jQuery);


--------------------------------------------------------------------------------