4 different kinds of React component styles

07 April 2016   4 comments   Javascript, ReactJS

Powered by Fusion×

I know I'm going to be laughed at for having misunderstood the latest React lingo and best practice. But guess, what I don't give a ...

I'm starting to like React more and more. There's a certain element of confidence about them since they only do what you ask them to do and even though there's state involved, if you do things right it feels like it's only one direction that state "flows". And events also only flow in one direction (backwards, sort of).

However, an ugly wart with React is the angle of it being hard to learn. All powerful things are hard to learn but it's certainly not made easier when there are multiple ways to do the same thing. What I'm referring to is how to write components.

Partly as a way of me learning and summorizing what I've come to understand and partly to jot it down so others can be helped by the same summary. Others who are in a similar situation as I am with learning React.

The default Component Class

This is what I grew up learning. This is code you most likely start with and then realize, there is no need for state here.

class Button extends React.Component {

  static propTypes = {
    day: PropTypes.string.isRequired,
    increment: PropTypes.func.isRequired,
  }

  render() {
    return (
      <div>
        <button onClick={this.props.increment}>Today is {this.props.day}</button>
      </div>
    )
  }
}

The old style createClass component

I believe this is what you used before you had ES6 so readily available. And I heard a rumor from Facebook that this is going to be deprecated. Strange rumor considering that createClass is still used in the main documentation.

const Button = React.createClass({
  propTypes: {
    day: PropTypes.string.isRequired,
    increment: PropTypes.func.isRequired,
  },

  render: function() {
    return (
      <div>
        <button onClick={this.props.increment}>Today is {this.props.day}</button>
      </div>
    )
  }
})

The Stateless Function component

Makes it possible to do some JavaScript right there before the return

const Button = ({
  day,
  increment
}) => {
  return (
    <div>
      <button onClick={increment}>Today is {day}</button>
    </div>
  )
}

Button.propTypes = {
  day: PropTypes.string.isRequired,
  increment: PropTypes.func.isRequired,
}

The Presentational Component

An ES6 shortcut trick whereby you express a onliner lambda function as if it's got a body of its own.

const Button = ({
  day,
  increment
}) => (
  <div>
    <button onClick={increment}>Today is {day}</button>
  </div>
)

Button.propTypes = {
  day: PropTypes.string.isRequired,
  increment: PropTypes.func.isRequired,
}

Some thoughts and reactions

Please Please Share your thoughts and reactions and I'll try to collect it and incorporate it into this blog post.

Comments

Emiliano
"Is there not a way to put that Button.propTypes thing in the first React.Component style into the class??"

Yes, you can put the propTypes inside the class if you're using ES6 with Babel (but you need to enable stage-0 features)

Just add the following inside the class

static propTypes = {
  day: PropTypes.string.isRequired,
  increment: PropTypes.func.isRequired,
};
Peter Bengtsson
Thanks! I updated the blog.
Frank Marino
Thanks for the great write-up! I very much agree with your opinion on classes vs functions for presentational components. Presentational components often need view helpers that don't really have their place in a container (formatting a date, for example), but are too long to simply inline in the render method. When I need helpers, I resort to using classes. Any idea what we're supposed to do about this with functional components?
Ceps
When using Stateless Function component, how can we add defaultProps?
Thank you for posting a comment

Your email will never ever be published


Related posts

Previous:
Web performance optimization's dark side 16 March 2016
Next:
Don't that this or bind 12 April 2016
Related by Keyword:
React lifecycle hooks must-have 13 August 2017
Newfound love of @staticmethod in Python 02 July 2012
Private functions in Javascript? 29 April 2006
Related by Text:
Public Class Fields saves sooo many keystrokes in React code 14 April 2017
Some tips on learning React 04 August 2015
How to "onchange" in ReactJS 21 October 2015
AJAX accelerated web widgets 23 June 2005