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.

The easiest way to refresh your React components with up-to-date syntax.

The Playground 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

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 (
      <div
        onClick={this.handleClick}
        onMouseDown={function(e) {
          console.debug("test");
        }.bind(this)}
      >
        {myString}
      </div>
    )
  },
});

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 (
      <div
        onClick={this.handleClick}
        onMouseDown={e => {
          console.debug("test");
        }}
      >
        {myString}
      </div>
    );
  }
}

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

• 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.

• 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 :)

Works with these versions:

  "engines": {
    "node": ">=6.9.0",
    "npm": ">=3.10.10",
    "yarn": ">=1.2.1"
  },

yarn install
yarn dev

Thanks to all project contributors (all-contributors specification)

Sébastien Lorber 💻	Sutterlity Laurent 💻

Contributions of any kind welcome!

Thanks to Babel, Jscodeshift, ESlint, Prettier, and Carbon for some design/layout/code inspiration.

Looking for a React/ReactNative freelance expert with more than 5 years production experience? Contact me from my website or with Twitter.