This Week in React: Oct 20

This is the first weekly roundup on ReactJS News! We’ve been busy working on making this site awesome for you guys, and it’s coming along. Let’s get started.

##React DnD First off, we’ve got a React Drag n’ drop library. I’ve had to make something like this at work, but this would have been so much easier to use. Creating a drop target with this mixin is very easy, as we can see from its documentation:

var { DragDropMixin } = require('react-dnd'),
    ItemTypes = require('./ItemTypes');

var ImageBlock = React.createClass({
  mixins: [DragDropMixin],

  configureDragDrop(registerType) {

    registerType(ItemTypes.IMAGE, {

      // dropTarget, when specified, is { acceptDrop(item)?, canDrop(item)? enter(item)?, over(item)?, leave(item)? }
      dropTarget: {
        acceptDrop(image) {
          // Do something with image! for example,
          DocumentActionCreators.setImage(this.props.blockId, image);
        }
      }
    });
  },

  render() {

    // {...this.dropTargetFor(ItemTypes.IMAGE)} will expand into
    // { onDragEnter: (handled by mixin), onDragOver: (handled by mixin), onDragLeave: (handled by mixin), onDrop: (handled by mixin) }.

    return (
      <div {...this.dropTargetFor(ItemTypes.IMAGE)}>
        {this.props.image &&
          <img src={this.props.image.url} />
        }
      </div>
    );
  }
);

Want to play around with it? Check out this JSFiddle! ##Morearty.js Morearty.js aims to help those who need more advanced state handling in React. What’s cool is that component state is transferred to sub-components in a binding attribute and can be retrieved using a custom method. This can be really useful when you have two components interacting together. Creating states (contexts) in morearty is pretty simple:

var Ctx = Morearty.createContext(
  { // initial state
    nowShowing: 'all',
    items: [{
      title: 'My first task',
      completed: false,
      editing: false
    }]
  },
  { // configuration
    requestAnimationFrameEnabled: true
  }
);

Take a look at the docs for more information.

That’s all that was sent in this week. I’ve been super busy trying to get our news section up and running. It’s been hard since I just took on a second job. Please send in anything you make to our Twitter @ReactJSNews. Before you leave, take a look at some of these React articles I found interesting this week:

Interesting Stackoverflow Posts