https://github.com/kalinchernev/drupal_block_reactive
Drupal 8, ES2015 (w/ Babel) and React.js
https://github.com/kalinchernev/drupal_block_reactive
babel drupal drupal8 react reactivity
Last synced: 5 months ago
JSON representation
Drupal 8, ES2015 (w/ Babel) and React.js
- Host: GitHub
- URL: https://github.com/kalinchernev/drupal_block_reactive
- Owner: kalinchernev
- Archived: true
- Created: 2016-05-24T17:42:17.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-08-01T20:11:09.000Z (almost 9 years ago)
- Last Synced: 2024-09-27T10:41:10.206Z (8 months ago)
- Topics: babel, drupal, drupal8, react, reactivity
- Language: JavaScript
- Homepage:
- Size: 1.76 MB
- Stars: 9
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Drupal Block Reactive (codename Hipster)
[Drupal 8](https://www.drupal.org/8) module creates a block with recent comments. Displayed dynamically using [React.js](https://facebook.github.io/react/).
[ES2015 (ES6)](https://babeljs.io/docs/learn-es2015/) 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](https://nodejs.org/en/download/) for using npm. The internal API is based on Views.
- npm for package management (comes with node.js)
- working [Drupal 8](https://www.drupal.org/project/drupal) 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](https://www.drupal.org/documentation/install/modules-themes/modules-8)
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](https://github.com/blackwood/drupal-react_blocks) (same idea for Drupal 7)
- [React.js tutorial](https://facebook.github.io/react/docs/tutorial.html)
- [Powering Up With React](https://www.codeschool.com/courses/powering-up-with-react)