{"id":13452175,"url":"https://github.com/slorber/react-reboot","last_synced_at":"2025-04-30T09:51:35.324Z","repository":{"id":66052567,"uuid":"109003252","full_name":"slorber/react-reboot","owner":"slorber","description":"The easiest way to refresh your React components with up-to-date syntax.","archived":false,"fork":false,"pushed_at":"2019-02-14T10:31:36.000Z","size":1169,"stargazers_count":62,"open_issues_count":1,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T15:05:22.948Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://sebastienlorber.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/slorber.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-31T13:56:34.000Z","updated_at":"2021-01-28T10:04:58.000Z","dependencies_parsed_at":"2023-04-20T12:00:34.327Z","dependency_job_id":null,"html_url":"https://github.com/slorber/react-reboot","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/slorber%2Freact-reboot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slorber%2Freact-reboot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slorber%2Freact-reboot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slorber%2Freact-reboot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slorber","download_url":"https://codeload.github.com/slorber/react-reboot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251679846,"owners_count":21626611,"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":[],"created_at":"2024-07-31T07:01:15.990Z","updated_at":"2025-04-30T09:51:35.291Z","avatar_url":"https://github.com/slorber.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-reboot\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)\n\n# Not maintained\n\nThe online playground is put offline due to low project traction and paid hosting. Many people have already migrated to modern ES6 syntax so this is not so useful anymore.\n\n# Intro\n\nThe easiest way to refresh your React components with up-to-date syntax.\n\nThe [Playground](https://react-reboot.now.sh/) is available to transform your react components online. \n\nThis is for now a very basic and unflexible MVP, so don't be angry if it does not work well and come back later :) \n\nComing soon: Node API and CLI\n\n\n#### Before\n\n```javascript\nvar React = require('react');\nvar PureRenderMixin = require(\"react-addons-pure-render-mixin\");\n\nvar HelloWorld = React.createClass({\n  mixins: [PureRenderMixin],\n  propTypes: {\n    input: React.PropTypes.string.isRequired,\n    bool: React.PropTypes.bool.isRequired\n  },\n  handleClick:    function(arg) {\n    console.debug(\"debug \" + arg,React.findDOMNode(this));\n  },\n  render() {\n    var x = 2, y = 3, z = (!!x ? true : false);\n    var {hey, ...rest} = {hey: \"hello\"}\n    let newVar = Object.assign({hey},{x,y},rest);\n    var myString = \"[\" + newVar.hey + newVar.x + \"]\" + \" ---- \" + someFn();\n    debugger;\n    return (\n      \u003cdiv\n        onClick={this.handleClick}\n        onMouseDown={function(e) {\n          console.debug(\"test\");\n        }.bind(this)}\n      \u003e\n        {myString}\n      \u003c/div\u003e\n    )\n  },\n});\n``` \n\n#### After\n```javascript\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nclass HelloWorld extends React.PureComponent {\n  static propTypes = {\n    input: PropTypes.string.isRequired,\n    bool: PropTypes.bool.isRequired,\n  };\n\n  handleClick = arg =\u003e {\n    console.debug(`debug ${arg}`, ReactDOM.findDOMNode(this));\n  };\n\n  render() {\n    const x = 2;\n    const y = 3;\n    const z = !!x;\n    const { hey, ...rest } = { hey: \"hello\" };\n    const newVar = {\n      hey,\n      x,\n      y,\n      ...rest,\n    };\n    const myString = `[${newVar.hey}${newVar.x}] ---- ${someFn()}`;\n\n    return (\n      \u003cdiv\n        onClick={this.handleClick}\n        onMouseDown={e =\u003e {\n          console.debug(\"test\");\n        }}\n      \u003e\n        {myString}\n      \u003c/div\u003e\n    );\n  }\n}\n``` \n\n\n# How it works\n\nIt simply runs in a row these 4 tools in a Node server, with an opiniated default configuration:\n\n- JSCodeshift codemods\n- ESLint rules with --fix\n- Babel transforms (coming soon!)\n- Prettier --write\n\n# Problems\n\n- Currently, no single tool solve every transform problem, and setting up and integrating all the available tools together is time consuming.\n\n- Not all transforms available are bugfree, and figuring out which to run in which order \n\n- Some teams might prefer to update components gradually to avoid git conflicts. This tool focus on transforming completely files one by one, while other tools like JSCodeShift runner are focusing on running transforms one by one efficiently against a very large codebase like Facebook.\n\n\n# TODO\n\n- Better error handling in case of unparsable input\n- Diplay transform log in playground\n- Support other parsers (Flow...)\n- Fine-tune transformation rules and order\n- Publish Node API and CLI (without embedding codemods? licensing problem)\n- Provide options (api + playground)\n- Tests\n- Help me :)\n\n# Dev\n\nWorks with these versions:\n\n```\n  \"engines\": {\n    \"node\": \"\u003e=6.9.0\",\n    \"npm\": \"\u003e=3.10.10\",\n    \"yarn\": \"\u003e=1.2.1\"\n  },\n```\n\n### Run local website / playground:\n\n```\nyarn install\nyarn dev\n```\n\n\n# Contributors\n\nThanks to all project contributors ([all-contributors](https://github.com/kentcdodds/all-contributors) specification)\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n| [\u003cimg src=\"https://avatars0.githubusercontent.com/u/749374?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSébastien Lorber\u003c/b\u003e\u003c/sub\u003e](https://github.com/slorber)\u003cbr /\u003e[💻](https://github.com/slorber/react-reboot/commits?author=slorber \"Code\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/709456?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSutterlity Laurent\u003c/b\u003e\u003c/sub\u003e](http://www.sutterlity.fr)\u003cbr /\u003e[💻](https://github.com/slorber/react-reboot/commits?author=sutter \"Code\") |\n| :---: | :---: |\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n\nContributions of any kind welcome!\n\nThanks to Babel, Jscodeshift, ESlint, Prettier, and [Carbon](https://github.com/dawnlabs/carbon) for some design/layout/code inspiration.\n\n# Hire a freelance expert\n\nLooking for a React/ReactNative freelance expert with more than 5 years production experience?\nContact me from my [website](https://sebastienlorber.com/) or with [Twitter](https://twitter.com/sebastienlorber).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslorber%2Freact-reboot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslorber%2Freact-reboot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslorber%2Freact-reboot/lists"}