Discussion on: I made a vscode plugin that can write each part of React component in multiple split editors on the same screen

[Joe_Sky]

Thanks for your reply~ I agree with you opinion that simplified and separated into smaller components is a very effective and popular practice, it's a great solution~ Let me explain a little, the ideas mentioned in this article do not conflict with splitting components:

1. Split editors can be regarded as a way to improve focus from the visual level, which maybe has no direct relationship with whether components should be simplified or separated into smaller components:

The left and right sub editors develop components and style code respectively, in my opinion, this is just a optional way to visually improve focus. For example, a small component is also applicable if it contains style code. This article is not intended to express that as long as we have split editors, we don't need to simplify and split components.

2. The jsx-sfc API can provide an optional new idea for simplifying and splitting components:

The normal way to split components is naturally the way you mentioned above, which is really great. But if you use the API of this article, you can split it like this:

import styled from 'styled-components';
import sfc from 'jsx-sfc.macro';
import logo from './logo.svg';

const Logo = sfc({
  Component({ styles: { Img } }) {
    return (
      <Img src={logo} className="App-logo" alt="logo" />
    );
  },

  styles: () => {
    return {
      Img: styled.img`
        &.App-logo {
          height: 40vmin;
          pointer-events: none;
        }

        @media (prefers-reduced-motion: no-preference) {
          .App-logo {
            animation: App-logo-spin infinite 20s linear;
          }
        }

        @keyframes App-logo-spin {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      `
    };
  }
});

const App = sfc({
  Component({ styles: { Wrapper }, ...props }) {
    return (
      <Wrapper>
        <header className="App-header">
          <Logo />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
            Learn React
          </a>
        </header>
      </Wrapper>
    );
  },

  styles: () => {
    return {
      Wrapper: styled.div`
        text-align: center;

        .App-header {
          background-color: #282c34;
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: calc(10px + 2vmin);
          color: white;
        }

        .App-link {
          color: #61dafb;
        }
      `
    };
  }
});

export default App;

Of course, this is just a way to manage a series of components in a single file. For a series of small components without reusability, if there are only a few, I prefer to manage them in a single file. The reason is that it can reduce some problems, such as repeated import or switching between many files (I often open more than 20+ tabs at the same time in vscode). However, even in this way, it still does not conflict with the idea of Split Editors, I also wrote the example in the article.

The above are some personal opinion, thank you for pointing this out~