ceaucari/drupal_block_reactive

Drupal 8, ES2015 (w/ Babel) and React.js

Drupal Block Reactive (codename Hipster)

Drupal 8 module creates a block with recent comments. Displayed dynamically using React.js.

ES2015 (ES6) is used via Babel and npm scripts.

The goal of the module is to be as simple as possible: minimum dependencies, tools and steps to actually write ES6 code that works. This way, developers can play easily without too much hassle of setting up webpack for example.

Requirements

• node.js for using npm. The internal API is based on Views.
• npm for package management (comes with node.js)
• working Drupal 8 project
• command line to make your life easier

Installation

1. Go to the /modules folder in your Drupal 8 project (normally DRUPAL_ROOT/modules)
2. Clone this repository (or download a zip with the source)
3. Enable the Drupal module by drush pm-enable drupal_block_reactive or via the UI
4. Go to the block management page '/admin/structure/block' and find/place the custom module 'Recent comments (reactive)'
5. Go to the page where you placed the block and you should see 'No comments.' message in a block.

Now, play with the reactivity by splitting the window into 2 and posting a comment from one to the other. The expected modern behavior :)

If you want to modify the /js, run npm install to download dependencies and gulp to write ES6 code.

Demo

Inspirations

• Drupal React Block (same idea for Drupal 7)
• React.js tutorial
• Powering Up With React