How to declare React Components in 2017
One of the confusing aspects when learning React is understanding the seemingly infinite different ways that you can declare a component. In reality there are primarily 3, and I will argue that in 2017, only 2 are worth using.
1: ES5 React.CreateClass (Not Recommended)
The first approach for declaring components that you will likely encounter is the ES5 React.CreateClass approach, which looks like:
This is the syntax style that is used in some of the react documentation and many introductory or outdated tutorials. The reason for this is simple: it works out of the box using the javascript language features available today and precludes the need for additional dependencies like babel.
While there is nothing inherently wrong with using this syntax, in 2017 you will almost certainly be working in an environment that supports ECMAScript 6 (aka ES6 or ES2015). ES6 brings many nice additions to the JavaScript language (classes, destructuring, template literals, etc.). The only problem? Not all browsers support ES6 yet. Thankfully, this problem is solved with babel. Babel takes ES6 code and transpiles it to code that can run in all modern browsers. So let’s use it!
(Sidebar: The place ES6 really clicked for me was watching Dan Abramov’s Getting Started With Redux course, free on egghead.io.)
2: ES6 Class Components (Default Starting Point)
If you’re setup with ES6 (and if you’re not, I would recommend starting with create-react-app) you are ready to use ES6 Class Components:
In most cases, this is the syntax I use whenever I am starting a new component. With it, you can take full advantage of all the features react has to offer (internal state, lifecycle methods, etc.). That said, in many cases, especially if you are following best practices, you won’t need those features. If your component is stateless (i.e. you aren’t using setState anywhere) and does not use lifecycle methods (i.e. componentDidMount) it is a perfect candidate for a stateless functional component.
3. Stateless Functional Components (Preferred)
While the name might sound complicated, Stateless Functional Components are actually quiet simple. Stateless means they don’t have internal state, and Functional means they are written as a plain old JavaScript function. That’s it! Rewriting our example above as a stateless functional component looks like this:
This approach underscores the fact that React components can just be simple functions that take props as inputs and return JSX as outputs.
Since we are using ES6, there are a few things we can do to clean this up:
Use Implicit Returns
Because our function is a one-liner (of JSX) we can drop the return statement and drop the {} surrounding the body.
Destructure the incoming props
By taking advantage of destructuring in ES6, we can get at the name and bio params right in the argument definition, resulting in cleaner code in the body:
Conclusion
tl;dr When in doubt, use ES6 Class Components unless for some very good reason you are restricted to ES5. If you are, I would challenge that assumption! If the component you are building ends up not using internal state or react lifecycle methods, convert it to a Stateless Functional Component.
