https://github.com/shadowtime2000/react-class-functional

A Babel plugin to convert React class components to functional components
https://github.com/shadowtime2000/react-class-functional

Last synced: about 1 year ago
JSON representation

A Babel plugin to convert React class components to functional components

• Host: GitHub
• URL: https://github.com/shadowtime2000/react-class-functional
• Owner: shadowtime2000
• License: mit
• Created: 2020-08-25T02:09:48.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-10-01T22:12:30.000Z (over 5 years ago)
• Last Synced: 2025-03-18T13:05:02.034Z (about 1 year ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-class-functional
• Size: 8.79 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-class-functional

A Babel plugin to convert React class components to functional components

**WARNING** I wouldn't recommend using this as anyother Babel plugin in your workflow, because this does not convert everything and you will most likely need to do cleaning up and such especially if your component is very complex.

This Babel plugin can convert this:

```javascript

import React from "react";

const Hey = React.createClass({

  componentDidMount() {

    console.log("a");

    console.log("b");

  },

  render() {

    return React.createElement("div", null, "Hey!");

  },

});

export default Hey;

```

to this:

```javascript

import React from "react";

function Hey(props) {

  function componentDidMount() {

    console.log("a");

    console.log("b");

  }

  useEffect(componentDidMount);

  return React.createElement(

    "div",

    null,

    "Hey!"

  );

}

export default Hey;

```

# Installation

`npm i react-class-functional`

## Usage

It is highly recommended to write a script like `runOnComponent.js` to convert your components. Your components cannot use ES6 class statements so make sure you have something to convert it to `const componentNameHere = React.createClass({dataHere})`. You cannot use normal JSX expressions so you should probably use a tool like `babel-plugin-transform-react-jsx` to convert JSX to `React.createElement` statements.

# Contributing

If you want to add a new feature or integrate more hooks you can just open a pull request.