{"id":13718520,"url":"https://github.com/cht8687/React-ES5-To-ES6-Checklist","last_synced_at":"2025-05-07T10:33:02.539Z","repository":{"id":57171443,"uuid":"64145508","full_name":"cht8687/React-ES5-To-ES6-Checklist","owner":"cht8687","description":":blue_book:The missing manual of upgrading ES5 React to ES6+ :sparkles:","archived":false,"fork":false,"pushed_at":"2017-01-05T23:55:24.000Z","size":10,"stargazers_count":106,"open_issues_count":1,"forks_count":6,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-09T23:24:11.175Z","etag":null,"topics":["es6","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cht8687.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-25T15:19:21.000Z","updated_at":"2023-05-02T12:05:37.000Z","dependencies_parsed_at":"2022-08-27T13:11:47.323Z","dependency_job_id":null,"html_url":"https://github.com/cht8687/React-ES5-To-ES6-Checklist","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cht8687%2FReact-ES5-To-ES6-Checklist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cht8687%2FReact-ES5-To-ES6-Checklist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cht8687%2FReact-ES5-To-ES6-Checklist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cht8687%2FReact-ES5-To-ES6-Checklist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cht8687","download_url":"https://codeload.github.com/cht8687/React-ES5-To-ES6-Checklist/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224592048,"owners_count":17337029,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","reactjs"],"created_at":"2024-08-03T01:00:30.734Z","updated_at":"2024-11-14T08:30:33.061Z","avatar_url":"https://github.com/cht8687.png","language":"JavaScript","funding_links":[],"categories":["Checklist-like","\u003ca id=\"Web-Development\"\u003e\u003c/a\u003eWeb Development"],"sub_categories":["Software development","\u003ca id=\"Front-End-Development\"\u003e\u003c/a\u003eFront-End Development"],"readme":"ES6 and beyond is very popular.\n\n\u003e JS is also unlike any other language in that the experimentation occurs on massive scale thanks to transpilers. Never happened before. -- Dan Abramov\n\n[React](https://github.com/facebook/react) is a declarative, efficient, and flexible JavaScript library for building user interfaces.\n\nIn 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. \n\nHere is a check list to help you translate your ES5 code to ES next in React.\nYou are welcome to contribute with more items provided below.\n\n## Quick links\n\n1. [require =\u003e import](#require)\n1. [createClass =\u003e extends React.Component](#createClass)\n1. [module.exports =\u003e export default](#module)\n1. [name function()  =\u003e  name()](#name)\n1. [getDefaultProps and propTypes](#getDefaultProps)\n1. [getInitialState](#getinitialstate)\n1. [destructuring \u0026 spread attributes](#destructuring)\n1. [use arrow functions](#use)\n\n### \u003ca id=\"require\"\u003e\u003c/a\u003erequire =\u003e import\n\nES5\n\n  ```js\n  //ES5\n  var React = require(\"react\");  \n  var PropTypes = React.PropTypes;\n  ```\n\nES6\n\n  ```js\n  import React, { Component, PropTypes } from 'react';\n  ```\n\n**[⬆ back to top](#quick-links)**\n\n### \u003ca id=\"createClass\"\u003e\u003c/a\u003ecreateClass =\u003e extends React.Component\n\nES5\n\n  ```js\n  var Mycomponent = React.createClass({\n    render: function() {\n      return (\n        \u003cdiv\u003eES5\u003c/div\u003e\n      );\n    },\n  });\n  ```\n\nES6\n\n  ```js\n  class Mycomponent extends React.Component {\n    render() {\n      return (\n        \u003cdiv\u003eES6\u003c/div\u003e\n      );\n    }\n  }\n  ```\n**[⬆ back to top](#quick-links)**\n\n### \u003ca id=\"module\"\u003e\u003c/a\u003emodule.exports =\u003e export default\n\nES5\n\n  ```js\n  var Mycomponent = React.createClass({\n    render: function() {\n      return (\n        \u003cdiv\u003eES5\u003c/div\u003e\n      );\n    },\n  });\n\n  module.exports = Mycomponent;\n\n  ```\n\nES6\n\n  ```js\n  export default class Mycomponent extends React.Component {\n    render() {\n      return (\n        \u003cdiv\u003eES6\u003c/div\u003e\n      );\n    }\n  }\n  ```\n**[⬆ back to top](#quick-links)**\n\n### \u003ca id=\"name\"\u003e\u003c/a\u003ename function()  =\u003e  name()\n\nES5\n\n  ```js\n  var Mycomponent = React.createClass({\n    componentWillMount: function(){\n\n    },\n    render: function() {\n      return (\n        \u003cdiv\u003eES5\u003c/div\u003e\n      );\n    },\n  });\n\n  module.exports = Mycomponent;\n\n  ```\n\nES6\n\n  ```js\n  export default class Mycomponent extends React.Component {\n    componentWillMount() {\n\n    }\n    render() {\n      return (\n        \u003cdiv\u003eES6\u003c/div\u003e\n      );\n    }\n  }\n  ```\n\n**[⬆ back to top](#quick-links)**\n\n### \u003ca id=\"getDefaultProps\"\u003e\u003c/a\u003egetDefaultProps and propTypes\n\nES5\n\n  ```js\n  var Video = React.createClass({\n      getDefaultProps: function() {\n          return {\n              autoPlay: false,\n              maxLoops: 10,\n          };\n      },\n      propTypes: {\n          autoPlay: React.PropTypes.bool.isRequired,\n          maxLoops: React.PropTypes.number.isRequired,\n          posterFrameSrc: React.PropTypes.string.isRequired,\n          videoSrc: React.PropTypes.string.isRequired,\n      },\n      render: function() {\n          return (\n              \u003cView /\u003e\n          );\n      },\n  });\n  ```\n\nES6\n\n  ```js\n  class Video extends React.Component {\n    render() {\n        return (\n            \u003cView /\u003e\n        );\n    }\n  }\n  Video.defaultProps = {\n      autoPlay: false,\n      maxLoops: 10,\n  };\n  Video.propTypes = {\n      autoPlay: React.PropTypes.bool.isRequired,\n      maxLoops: React.PropTypes.number.isRequired,\n      posterFrameSrc: React.PropTypes.string.isRequired,\n      videoSrc: React.PropTypes.string.isRequired,\n  };\n  ```\n\nES future proposals:\n\n  ```js\n  class Video extends React.Component {\n    static defaultProps = {\n      autoPlay: false,\n      maxLoops: 10,\n    }\n    static propTypes = {\n      autoPlay: React.PropTypes.bool.isRequired,\n      maxLoops: React.PropTypes.number.isRequired,\n      posterFrameSrc: React.PropTypes.string.isRequired,\n      videoSrc: React.PropTypes.string.isRequired,\n    }\n    state = {\n      loopsRemaining: this.props.maxLoops,\n    }\n  }\n  ```\n\n**[⬆ back to top](#quick-links)**\n\n### \u003ca id=\"getInitialState\"\u003e\u003c/a\u003egetInitialState\n\nES5\n\n  ```js\n  var Header = React.createClass({\n    getInitialState: function() {\n      return {\n        title: this.props.title\n      };\n    },\n  });\n  ```\n\nES6\n\n  ```js\n  export default class Header extends Component {\n    constructor(props) {\n      super(props);\n      this.state = {\n        title: props.title\n      };\n    }\n  }\n  ```\n\nES future proposals:\n  \n  ```js\n  export default class Header extends Component {\n    state = {\n      title: this.props.title\n    };\n      \n    // followed by constructor...\n  }\n  ```\n\n**[⬆ back to top](#quick-links)**\n\n### \u003ca id=\"destructuring\"\u003e\u003c/a\u003edestructuring \u0026 spread attributes\n\n```js\nclass AutoloadingPostsGrid extends React.Component {\n  render() {\n    var {\n      className,\n      ...others,  // contains all properties of this.props except for className\n    } = this.props;\n    return (\n      \u003cdiv className={className}\u003e\n        \u003cPostsGrid {...others} /\u003e\n        \u003cbutton onClick={this.handleLoadMoreClick}\u003eLoad more\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n```\n\n**[⬆ back to top](#quick-links)**\n\n### \u003ca id=\"use\"\u003e\u003c/a\u003euse arrow functions\n\nStateless component:\n\n```js\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cMyComponent /\u003e\n    \u003c/div\u003e\n  );\n}\n\n```\n\nUsing Arrow function:\n\n```js\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cMyComponent /\u003e\n  \u003c/div\u003e\n);\n```\n\nUsing Arrow funtion with [Destructuring function arguments](https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20\u0026%20beyond/ch2.md#destructuring-parameters):\n\n```js\nconst App = ({className, ...rest}) =\u003e (\n  \u003cdiv className={classnames(className)} {...rest}\u003e\n    \u003cMyComponent /\u003e\n  \u003c/div\u003e\n);\n```\n\n**[⬆ back to top](#quick-links)**\n\n## Reference\n\n* [React](https://github.com/facebook/react)\n* [Babel](https://github.com/babel/babel)\n* [ECMAScript 6 support in Mozilla](https://developer.mozilla.org/en/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla)\n* [React on ES6+](https://babeljs.io/blog/2015/06/07/react-on-es6-plus)\n* [Converting React project from ES5 to ES6](http://cheng.logdown.com/posts/2015/09/29/converting-es5-react-to-es6)\n* [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)\n\n## Roadmap\n\n- [ ] Include all ES5 to ES6+ instructions for React\n- [ ] We may Implement ESlint plugin like ESlint-Plugin-React-5-to-6\n- [ ] We may Include instructions for configuring Babel with different stages\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcht8687%2FReact-ES5-To-ES6-Checklist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcht8687%2FReact-ES5-To-ES6-Checklist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcht8687%2FReact-ES5-To-ES6-Checklist/lists"}