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
- Go to the /modules folder in your Drupal 8 project (normally DRUPAL_ROOT/modules)
- Clone this repository (or download a zip with the source)
- Enable the Drupal module by
drush pm-enable drupal_block_reactive
or via the UI - Go to the block management page '/admin/structure/block' and find/place the custom module 'Recent comments (reactive)'
- 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