React Components - What is the proper way to create them?

Question

I'm learning React and I came across two different ways to create components. One is by Facebook and the other by AirBnB. I also saw them in the tutorials I've been watching.

This may be a stupid question, but which one is better?

Facebook:

var React = require("react");

var Component = React.createClass({
    render: function(){
        return (
            <div>{this.props.item}</div>
        );
    }
});

module.exports = Component;

AirBnB:

import React from "react";

export default class Component extends React.Component {
    render() {
        return (
            <div>{this.props.item}</div>
        );
    }
}

Disclaimer: I may have errors in the code, so please forgive me and just focus on the style.

Answer 1

As they say there is more than one way to skin a cat. As it happens, there is also more than one way to create a React component, which is much more animal friendly!

When React was initially released, there was no idiomatic way to create classes in JavaScript, so 'React.createClass' was provided.

Later, classes were added to the language as part of ES2015, where the ability to create React components using JavaScript classes was added. Along with functional components, JavaScript classes are now the preferred way to create components in React.

For existing 'createClass' components, it is recommended that you migrate them to JavaScript classes. However, if you have components that rely on mixins, converting to classes may not be immediately feasible. If so, create-react-class is available on npm as a drop-in replacement.

The simplest version of React component is a plain JavaScript function that returns a React element:

Functional components:

function Label() {
  return <div>Super Helpful Label</div>
}

Of course with the wonders of ES6 we can just write this as an arrow function.

const Label = () => <div>Super Helpful Label</div>

These are used like this:

const Label = () => <div>Super {props.title} Helpful Label</div>

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
         <Label title="Duper" />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

With functions you can also destructure the properties in the function signature. It saves you from having to write props over and over again.

Components can also be ES6 classes. If you want your component to have local state then you need to have a class component.There are also other advantages to classes such as being able to use lifecycle hooks and event handlers.

Class components:

class Label extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <div>Super {this.props.title} Helpful Label</div>
  }
}

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        <Label title="Duper" />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

There are pros and cons in both styles but functional components are taking over modern React in the foreseeable future.

A functional component is written shorter and simpler, which makes it easier to develop, understand, and test.
Class components can be confusing with so many uses of this. Using functional components can easily avoid this kind of mess and keep everything clean.

React team is supporting more React hooks for functional components that replace or even improve upon class components. React team mentioned in earlier days that they will make performance optimizations in functional components by avoiding unnecessary checks and memory allocations.
And as promising as it sounds, new hooks are recently introduced for functional components such as useState or useEffect while also promising that they are not going to obsolete class components. The team is seeking to gradually adopt functional components with hooks in newer cases, which means that there is no need to switch over the existing projects that utilize class components to the entire rewrite with functional components so that they can remain consistent.

Answer 2

React components:

You have 4 basic ways of creating a reusable React component:

• Function components using const MyComponent = () => {} or function MyComponent() + Hooks - The current standard of creating react components. The component is a function that returns the JSX to render. Hooks replace the life-cycle methods of the class components.

• class MyComponent extends React.Component {} - the ES6 way of creating a stateful component. Requires transpiling via babel, which also handles JSX. If you need state, and lifecycle methods - use this.

• class MyComponent extends React.PureComponent {} - new in React 15.3.0. Same as React.Component, but with a PureRenderMixin like functionality, since ES6 components don't support mixins.

• React.createClass({}) - the old way, doesn't require transpiling, but since you'll probably use JSX, you'll need transpiling anyway. Still appears in old React tutorials, but will be deprecated eventually.

JS modules:

Nodejs syntax (commonjs) uses require() and ES6 uses import. You can use whatever you like, and even mix the two, but the ES6 modules way of import/exporting is a bit more 'standard' for react components. For now import is actually transpiled by babel to require anyway. Both require and import need some sort of a bundling tool, such as webpack or browserify to work in a browser.

render() vs .render:

The render() is the ES6 way of defining a method in ES6 classes.

React.createClass({}) requires a JS object literal. In ES5, defining methods in object literals uses the prop: function() {} syntax, such as render: function() syntax. btw - In ES6 you can actually write the method in the literal as render() instead.

Answer 3

The one from AirBnB uses an ES6 way but would require a transpiler like Babel.

ES6 is the next revision of the Javascript language

Read more: https://toddmotto.com/react-create-class-versus-component/