Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cht8687/React-ES5-To-ES6-Checklist
:blue_book:The missing manual of upgrading ES5 React to ES6+ :sparkles:
https://github.com/cht8687/React-ES5-To-ES6-Checklist
es6 reactjs
Last synced: 3 months ago
JSON representation
:blue_book:The missing manual of upgrading ES5 React to ES6+ :sparkles:
- Host: GitHub
- URL: https://github.com/cht8687/React-ES5-To-ES6-Checklist
- Owner: cht8687
- Created: 2016-07-25T15:19:21.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-01-05T23:55:24.000Z (almost 8 years ago)
- Last Synced: 2024-07-13T09:10:34.706Z (4 months ago)
- Topics: es6, reactjs
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 106
- Watchers: 5
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-checklists - React ES5 to ES6 Checklist - The missing manual of upgrading ES5 React to ES6+ (Checklist-like / Software development)
README
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](https://github.com/facebook/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](https://github.com/babel/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.
## Quick links
1. [require => import](#require)
1. [createClass => extends React.Component](#createClass)
1. [module.exports => export default](#module)
1. [name function() => name()](#name)
1. [getDefaultProps and propTypes](#getDefaultProps)
1. [getInitialState](#getinitialstate)
1. [destructuring & spread attributes](#destructuring)
1. [use arrow functions](#use)
ES5
```js
//ES5
var React = require("react");
var PropTypes = React.PropTypes;
```
ES6
```js
import React, { Component, PropTypes } from 'react';
```
**[⬆ back to top](#quick-links)**
### createClass => extends React.Component
ES5
```js
var Mycomponent = React.createClass({
render: function() {
return (
ES5
);
},
});
```
ES6
```js
class Mycomponent extends React.Component {
render() {
return (
ES6
);
}
}
```
**[⬆ back to top](#quick-links)**
### module.exports => export default
ES5
```js
var Mycomponent = React.createClass({
render: function() {
return (
ES5
);
},
});
module.exports = Mycomponent;
```
ES6
```js
export default class Mycomponent extends React.Component {
render() {
return (
ES6
);
}
}
```
**[⬆ back to top](#quick-links)**
ES5
```js
var Mycomponent = React.createClass({
componentWillMount: function(){
},
render: function() {
return (
ES5
);
},
});
module.exports = Mycomponent;
```
ES6
```js
export default class Mycomponent extends React.Component {
componentWillMount() {
}
render() {
return (
ES6
);
}
}
```
**[⬆ back to top](#quick-links)**
### getDefaultProps and propTypes
ES5
```js
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 (
);
},
});
```
ES6
```js
class Video extends React.Component {
render() {
return (
);
}
}
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:
```js
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](#quick-links)**
ES5
```js
var Header = React.createClass({
getInitialState: function() {
return {
title: this.props.title
};
},
});
```
ES6
```js
export default class Header extends Component {
constructor(props) {
super(props);
this.state = {
title: props.title
};
}
}
```
ES future proposals:
```js
export default class Header extends Component {
state = {
title: this.props.title
};
// followed by constructor...
}
```
**[⬆ back to top](#quick-links)**
### destructuring & spread attributes
```js
class AutoloadingPostsGrid extends React.Component {
render() {
var {
className,
...others, // contains all properties of this.props except for className
} = this.props;
return (
Load more
);
}
}
```
**[⬆ back to top](#quick-links)**
Stateless component:
```js
function App() {
return (
);
}
```
Using Arrow function:
```js
const App = () => (
);
```
Using Arrow funtion with [Destructuring function arguments](https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&%20beyond/ch2.md#destructuring-parameters):
```js
const App = ({className, ...rest}) => (
);
```
**[⬆ back to top](#quick-links)**
## Reference
* [React](https://github.com/facebook/react)
* [Babel](https://github.com/babel/babel)
* [ECMAScript 6 support in Mozilla](https://developer.mozilla.org/en/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla)
* [React on ES6+](https://babeljs.io/blog/2015/06/07/react-on-es6-plus)
* [Converting React project from ES5 to ES6](http://cheng.logdown.com/posts/2015/09/29/converting-es5-react-to-es6)
* [React/React Native 的ES5 ES6写法对照表](http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8/2)
## 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