kalinchernev/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 npm run dev to write ES6 code in watch mode.

Demo

Inspirations

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

drupal_block_reactive's Issues

Separate Components

Is it possible to separate the CommentBox and Comment components to two separate files and import using require or similar method?

Help

This is a small help, I come from the Drupal world and no very minimum about ReactJS, looks like you've done some cool stuff with it and I just want to know is it possible to render just HTML elements from ReactJS within Drupal.

I'm trying to build Audio player within Drupal using this lib but not sure if we use the same approach as the Github project will that help.

Here is the project : https://github.com/humanhighway/react-audio-player

Please advise.