React.Component vs React.createClass

React has supported building components two different ways for a few months. You can extend from React.Component or use React.createClass which has been available since the beginning of React. Is there a good reason to use one over the other?

Modals in React

Have you wanted to use some type of modal in React but didn’t know where to start? I’ll be going over a few community-built components that help you create modals.

There’s been a few times I’ve needed a modal in the app I’m building. Thankfully the community has made a few really good components for this. Let’s jump right in to the first:

Elemental UI’s modal

You can check out a demo of it right here. The markup is straight forward:

<Modal isOpen={this.state.modalIsOpen} onCancel={this.toggleModal} backdropClosesModal>
  <ModalHeader text="Live Demo" showCloseButton onClose={this.toggleModal} />
  <form action="#" onSubmit={this.submitForm} noValidate>
    <ModalBody>
      <FormField label="Email">
        <FormInput label="Email" type="email" name="email" ref="email" value={this.state.email} onChange={updateInput} required />
      </FormField>
    </ModalBody>
    <ModalFooter>
      {submitButton}
      <Button onClick={this.toggleModal} type="link-cancel" disabled={this.state.formProcessing}>Cancel</Button>
    </ModalFooter>
  </form>
</Modal>

You can place things in the header or footer just as easily as the body which is nice. I also like the look of it, and Elemental UI as a whole. My biggest gripe about this modal component is that on scrolling the page it disappears.

React Bootstrap

This is probably one that everyone has heard of, as it is one of the oldest React projects. You can find documentation here. It consists of a couple sub components for the header and footer as well. The root modal component expects two props, a boolean called show, and a function to be called onHide.

<Modal show={this.state.showModal} onHide={this.close}>
  <Modal.Header closeButton>
    <Modal.Title>Modal heading</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    <h4>Text in a modal</h4>
  </Modal.Body>
  <Modal.Footer>
    <Button onClick={this.close}>Close</Button>
  </Modal.Footer>
</Modal>

The close and show functions are flipping the state:

close(){
  this.setState({ showModal: false });
}

Rackt’s Modal

Rackt’s modal is much simpler than the other two, as seen on the github page.

It doesn’t have any sub components. It accepts isOpen (bool) and onRequestClose (function) as props:


<Modal isOpen={bool} onRequestClose={fn} closeTimeoutMS={n}>
  <h1>Modal Content</h1>
  <p>Etc.</p>
</Modal>

Those are the top three modal components out there. At my work, we use popovers a lot. My coworker made his own component called reactable-popover that has been really useful for me. Sadly he’s always too busy to document anything, so I’ll throw in a little example here.

<Popover
  className=''
  toggleButton={button}
  handleClick={this.togglePopover}
  position='left'
  isOpen={true}
  topOffset={10}
  leftOffset={10}>
  <div>
    content
  </div>
</Popover>

The props are very self explanatory, except for toggleButton. It expects a component or some jsx to be passed into it.

Boron Modal

Boron comes out of the box with some animations.

var Modal = require('boron/DropModal');
var Example = React.createClass({
  showModal: function(){
    this.refs.modal.show();
  },
  hideModal: function(){
    this.refs.modal.hide();
  },
  render: function() {
    return (
      <div>
        <button onClick={this.showModal}>Open</button>
        <Modal ref="modal">
          <h2>I am a dialog</h2>
          <button onClick={this.hideModal}>Close</button>
        </Modal>
      </div>
    );
  }
});

The author suggests placing a ref on the modal. Then you can open and close it via this.refs.modal.show() and this.refs.modal.hide().

React Modal Dialog

React modal dialog is an idiomatic way to show dialogs. You simply render the dialog component in when you want to show one, and don’t render it when you don’t. This is achieved through through a ‘portal’.

import {ModalContainer, ModalDialog} from 'react-modal-dialog';

// In a render function:
class Button extends React.Component {
  state = {
    isShowingDialog: false
  }
  render() {
    return (
      <a className="button">
				<span>Button Text</span>

      	{this.state.isShowingDialog ?
          <ModalContainer onClose={...}>
            <ModalDialog onClose={...}>
            <h1>Dialog Content</h1>
            <p>More Content. Anything goes here</p>
            </ModalDialog>
          </ModalContainer>
        : null}
      </a>
    )
  }
}

Thanks for checking out the post, don’t forget to follow @ReactJSNews for more content! Leave a comment if you have any suggestions. As always, you’re welcome to modify this post (or write your own!) by sending in a pull request on github!

Simple React Modal

After writing this post, I realized many of these modals have limitations and force things on you. In my case, most forced some css rules that I could not override. For this reason, I made my own. You can view a demo here with the default styling.

import Modal from 'simple-modal'
import 'simple-react-modal/dist/modal' //import the base css

//inside the render
<a onClick={()=>{this.refs.modal.show()}}>Open Modal</a>
<Modal ref="modal"
className="simple-modal your-class"
closeOnOuterClick={false}>

<a className="close" onClick={()=>{this.refs.modal.hide()}}>X</a>
<div>hey</div>

</Modal>

You can import the base css, or not at all and completely design it yourself. It’s more of a skeleton.

ES6 Gotchas

With ES6 components, there are a few “aha” moments and annoyances. This post was created so that you don’t have to go through some of the struggles myself and others have gone through.

Building Components with React.js and Reflux

React is a great view library. If used just right, it even makes an alright controller. However, sometimes you need something more. That is where Flux can be handy.

Getting Started with Flux

Flux is an application architecture for building complex user interfaces. It eschews MVC in favor of unidirectional data flow. What this means is that data enters through a single place (your actions) and then flows outward through to their state manager (the store) and finally onto the view. The view can then restart the flow by calling other actions in response to user input.

I Hear You Want A React Europe Ticket!

The React Europe team has been kind enough to offer me two tickets. One for me to use, and another to giveaway. I’m excited about this conference, but I’m not 100% sure yet if I’ll be going. Either way, someone will win a ticket. If I do end up being able to go, I’ll be helping at the check in booth, so anyone who didn’t see me at the first conference definitely would this time!

Using Test Driven Development with React.js to Add Multi-Select to the Drag and Drop Component

Test Driven Development (TDD) is a very powerful and popular development methodology. Testing React.js components is most easily accomplished with Jest. However, I rarely see articles that cover the process with lots of examples, especially for React components. This article seeks to do just that. From requirements to all tests green, we will walk through the whole process.

React Conf Recap

After live tweeting the whole conference this past week, I feel obligated to write up on it. I’ll be covering the main stuff announced, at any point feel free to leave a comment or a reply on Twitter @ReactJSNews with any questions. I try my best to respond to everyone.

Testing Drag and Drop Components in React.js

Welcome back! Last time we left off with a nice little Container component that allowed dragging and dropping items both internally and between components. However, despite having the ability with our setup, we did not write a single test. The time has come to fix that shortcoming, with lots and lots of examples.

React Conf Giveaway Winner

I would like to thank everybody that entered the giveaway. It was a lot harder than I thought it would be to choose a winner. I know that everyone who entered tried very hard. Before going into who won, here’s a little recap of what was submitted.