Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/slorber/react-reboot
The easiest way to refresh your React components with up-to-date syntax.
https://github.com/slorber/react-reboot
Last synced: about 2 months ago
JSON representation
The easiest way to refresh your React components with up-to-date syntax.
- Host: GitHub
- URL: https://github.com/slorber/react-reboot
- Owner: slorber
- License: mit
- Created: 2017-10-31T13:56:34.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-14T10:31:36.000Z (almost 6 years ago)
- Last Synced: 2024-10-04T11:57:16.067Z (2 months ago)
- Language: JavaScript
- Homepage: https://sebastienlorber.com/
- Size: 1.11 MB
- Stars: 62
- Watchers: 4
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - react-reboot - The easiest way to refresh your React components with up-to-date syntax. (JavaScript)
README
# react-reboot
[](#contributors)
# Not maintained
The 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.
# Intro
The easiest way to refresh your React components with up-to-date syntax.
The [Playground](https://react-reboot.now.sh/) is available to transform your react components online.
This is for now a very basic and unflexible MVP, so don't be angry if it does not work well and come back later :)
Coming soon: Node API and CLI
#### Before
```javascript
var React = require('react');
var PureRenderMixin = require("react-addons-pure-render-mixin");
var HelloWorld = React.createClass({
mixins: [PureRenderMixin],
propTypes: {
input: React.PropTypes.string.isRequired,
bool: React.PropTypes.bool.isRequired
},
handleClick: function(arg) {
console.debug("debug " + arg,React.findDOMNode(this));
},
render() {
var x = 2, y = 3, z = (!!x ? true : false);
var {hey, ...rest} = {hey: "hello"}
let newVar = Object.assign({hey},{x,y},rest);
var myString = "[" + newVar.hey + newVar.x + "]" + " ---- " + someFn();
debugger;
return (
{myString}
)
},
});
```
#### After
```javascript
import PropTypes from "prop-types";
import React from "react";
import ReactDOM from "react-dom";
class HelloWorld extends React.PureComponent {
static propTypes = {
input: PropTypes.string.isRequired,
bool: PropTypes.bool.isRequired,
};
handleClick = arg => {
console.debug(`debug ${arg}`, ReactDOM.findDOMNode(this));
};
render() {
const x = 2;
const y = 3;
const z = !!x;
const { hey, ...rest } = { hey: "hello" };
const newVar = {
hey,
x,
y,
...rest,
};
const myString = `[${newVar.hey}${newVar.x}] ---- ${someFn()}`;
return (
{
console.debug("test");
}}
>
{myString}
);
}
}
```
# How it works
It simply runs in a row these 4 tools in a Node server, with an opiniated default configuration:
- JSCodeshift codemods
- ESLint rules with --fix
- Babel transforms (coming soon!)
- Prettier --write
# Problems
- Currently, no single tool solve every transform problem, and setting up and integrating all the available tools together is time consuming.
- Not all transforms available are bugfree, and figuring out which to run in which order
- 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.
# TODO
- Better error handling in case of unparsable input
- Diplay transform log in playground
- Support other parsers (Flow...)
- Fine-tune transformation rules and order
- Publish Node API and CLI (without embedding codemods? licensing problem)
- Provide options (api + playground)
- Tests
- Help me :)
# Dev
Works with these versions:
```
"engines": {
"node": ">=6.9.0",
"npm": ">=3.10.10",
"yarn": ">=1.2.1"
},
```
### Run local website / playground:
```
yarn install
yarn dev
```
# Contributors
Thanks to all project contributors ([all-contributors](https://github.com/kentcdodds/all-contributors) specification)
| [
Sébastien Lorber](https://github.com/slorber)
[💻](https://github.com/slorber/react-reboot/commits?author=slorber "Code") | [
Sutterlity Laurent](http://www.sutterlity.fr)
[💻](https://github.com/slorber/react-reboot/commits?author=sutter "Code") |
| :---: | :---: |
Contributions of any kind welcome!
Thanks to Babel, Jscodeshift, ESlint, Prettier, and [Carbon](https://github.com/dawnlabs/carbon) for some design/layout/code inspiration.
# Hire a freelance expert
Looking for a React/ReactNative freelance expert with more than 5 years production experience?
Contact me from my [website](https://sebastienlorber.com/) or with [Twitter](https://twitter.com/sebastienlorber).