ES6 and beyond is very popular.

JS is also unlike any other language in that the experimentation occurs on massive scale thanks to transpilers. Never happened before. -- Dan Abramov

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

In the earlier days of React development, many programmes were written in ES5. Howerver, as ES6 and beyond is more widely accepted now and with the help of transpiler tools like Babel, we can gradually retire some ES5 code and adopt some new JavaScript features in React development.

Here is a check list to help you translate your ES5 code to ES next in React. You are welcome to contribute with more items provided below.

require => import

ES5

//ES5
var React = require("react");  
var PropTypes = React.PropTypes;

ES6

import React, { Component, PropTypes } from 'react';

⬆ back to top

createClass => extends React.Component

ES5

var Mycomponent = React.createClass({
  render: function() {
    return (
      <div>ES5</div>
    );
  },
});

ES6

class Mycomponent extends React.Component {
  render() {
    return (
      <div>ES6</div>
    );
  }
}

⬆ back to top

module.exports => export default

ES5

var Mycomponent = React.createClass({
  render: function() {
    return (
      <div>ES5</div>
    );
  },
});

module.exports = Mycomponent;

ES6

export default class Mycomponent extends React.Component {
  render() {
    return (
      <div>ES6</div>
    );
  }
}

⬆ back to top

name function() => name()

ES5

var Mycomponent = React.createClass({
  componentWillMount: function(){

  },
  render: function() {
    return (
      <div>ES5</div>
    );
  },
});

module.exports = Mycomponent;

ES6

export default class Mycomponent extends React.Component {
  componentWillMount() {

  }
  render() {
    return (
      <div>ES6</div>
    );
  }
}

⬆ back to top

getDefaultProps and propTypes

ES5

var Video = React.createClass({
    getDefaultProps: function() {
        return {
            autoPlay: false,
            maxLoops: 10,
        };
    },
    propTypes: {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    },
    render: function() {
        return (
            <View />
        );
    },
});

ES6

class Video extends React.Component {
  render() {
      return (
          <View />
      );
  }
}
Video.defaultProps = {
    autoPlay: false,
    maxLoops: 10,
};
Video.propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
};

ES future proposals:

class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }
  static propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}

⬆ back to top

getInitialState

ES5

var Header = React.createClass({
  getInitialState: function() {
    return {
      title: this.props.title
    };
  },
});

ES6

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: props.title
    };
  }
}

ES future proposals:

export default class Header extends Component {
  state = {
    title: this.props.title
  };
    
  // followed by constructor...
}

⬆ back to top

destructuring & spread attributes

class AutoloadingPostsGrid extends React.Component {
  render() {
    var {
      className,
      ...others,  // contains all properties of this.props except for className
    } = this.props;
    return (
      <div className={className}>
        <PostsGrid {...others} />
        <button onClick={this.handleLoadMoreClick}>Load more</button>
      </div>
    );
  }
}

⬆ back to top

use arrow functions

Stateless component:

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

Using Arrow function:

const App = () => (
  <div>
    <MyComponent />
  </div>
);

Using Arrow funtion with Destructuring function arguments:

const App = ({className, ...rest}) => (
  <div className={classnames(className)} {...rest}>
    <MyComponent />
  </div>
);

⬆ back to top

Reference

Roadmap

Include all ES5 to ES6+ instructions for React
We may Implement ESlint plugin like ESlint-Plugin-React-5-to-6
We may Include instructions for configuring Babel with different stages

License

MIT

cht8687/React-ES5-To-ES6-Checklist

cht8687

Reviews

Repository Details

Quick links

require => import

createClass => extends React.Component

module.exports => export default

name function() => name()

getDefaultProps and propTypes

getInitialState

destructuring & spread attributes

use arrow functions

Reference

Roadmap

License

More Repositories