p42ai / js-assistant

120+ refactorings and code-assists for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=p42ai.refactor
MIT License
125 stars 8 forks source link

Refactor Idea: Convert React Class Component to/from Function Component #40

Open hediet opened 2 years ago

hediet commented 2 years ago
function EditorDemo() {
    return <div className="p-5 mb-4">
        <h2>Editor</h2>

        <div className="mt-4 row row-cols-4">
            <div className="col">
                <label className="control-label">Language</label>
                <select className="language-picker"></select>
            </div>
            <div className="col">
                <label className="control-label">Theme</label>
                <select className="theme-picker">
                    <option>Visual Studio</option>
                    <option>Visual Studio Dark</option>
                    <option>High Contrast Dark</option>
                </select>
            </div>
        </div>

        <div className="mt-2" style={{ height: 500, border: "1px solid gray" }}>
            <MonacoEditor
                model={undefined}
            />
        </div>
    </div>;
}

<->

class EditorDemo {
    render() {
        return (
            <div className="p-5 mb-4">
                <h2>Editor</h2>

                <div className="mt-4 row row-cols-4">
                    <div className="col">
                        <label className="control-label">Language</label>
                        <select className="language-picker"></select>
                    </div>
                    <div className="col">
                        <label className="control-label">Theme</label>
                        <select className="theme-picker">
                            <option>Visual Studio</option>
                            <option>Visual Studio Dark</option>
                            <option>High Contrast Dark</option>
                        </select>
                    </div>
                </div>

                <div className="mt-2" style={{ height: 500, border: "1px solid gray" }}>
                    <MonacoEditor
                        model={undefined}
                    />
                </div>
            </div>;
        );
    }
}
lgrammel commented 2 years ago

Thanks for the refactoring idea!