Adjusting React component, class, and file naming

[bzang]

While we mostly use kebab case for file names with no jsx extension. The proposed guidelines by AirBnb are very compelling. What are everyone else's thoughts? Below is the except from: https://github.com/airbnb/javascript/tree/master/react#naming

Naming

• Extensions: Use .jsx extension for React components.

• Filename: Use PascalCase for filenames. E.g., ReservationCard.jsx.

• Reference Naming: Use PascalCase for React components and camelCase for their instances. eslint: react/jsx-pascal-case

  // bad
  import reservationCard from './ReservationCard';
  
  // good
  import ReservationCard from './ReservationCard';
  
  // bad
  const ReservationItem = <ReservationCard />;
  
  // good
  const reservationItem = <ReservationCard />;

• Component Naming: Use the filename as the component name. For example, ReservationCard.jsx should have a reference name of ReservationCard. However, for root components of a directory, use index.jsx as the filename and use the directory name as the component name:

  // bad
  import Footer from './Footer/Footer';
  
  // bad
  import Footer from './Footer/index';
  
  // good
  import Footer from './Footer';

• Higher-order Component Naming: Use a composite of the higher-order component's name and the passed-in component's name as the displayName on the generated component. For example, the higher-order component withFoo(), when passed a component Bar should produce a component with a displayName of withFoo(Bar).

  Why? A component's displayName may be used by developer tools or in error messages, and having a value that clearly expresses this relationship helps people understand what is happening.

  // bad
  export default function withFoo(WrappedComponent) {
    return function WithFoo(props) {
      return <WrappedComponent {...props} foo />;
    }
  }
  
  // good
  export default function withFoo(WrappedComponent) {
    function WithFoo(props) {
      return <WrappedComponent {...props} foo />;
    }
  
    const wrappedComponentName = WrappedComponent.displayName
      || WrappedComponent.name
      || 'Component';
  
    WithFoo.displayName = `withFoo(${wrappedComponentName})`;
    return WithFoo;
  }

• Props Naming: Avoid using DOM component prop names for different purposes.

  Why? People expect props like style and className to mean one specific thing. Varying this API for a subset of your app makes the code less readable and less maintainable, and may cause bugs.

  // bad
  <MyComponent style="fancy" />
  
  // bad
  <MyComponent className="fancy" />
  
  // good
  <MyComponent variant="fancy" />

[adamweeks]

I like the file name matching the component name. Problem I have is how would we need to restructure the widget repo to match? Right now the folder names are the same as the npm module names, making them easy to find.

[bzang]

I would say the naming on the top level packages don’t need to change. Individual files and folders inside each package would. This would also take some tooling changes if we are to use the jsx extension. I feel like the file extension would encourage us to actually separate the presentation from the app logic a lot more.

[ianwremmel]

I'd say definitely keep the package names kebab case, since that's the defacto standard on npm.

Earlyish in the web client days, we used PascalCase filenames before switching to kebab and it was occasionally problematic. I spent a lot of time explaining the differences between case-sensitive and case-insensitive file systems.

[adamweeks]

So the filename would be: react-component-avatar/src/Avatar.jsx which would be used via import Avatar from '@ciscospark/react-component-avatar'? @bzang

[bzang]

Yup exactly. The Avatar.jsx file would be the actual component. We would still use an index.js file to coordinate the package exports. In cases where the component is super simple where it would wouldn’t make sense to have another file we could just stick with an index.jsx

[adamweeks]

Trying to process how that would work given this directive above:

However, for root components of a directory, use index.jsx as the filename and use the directory name as the component name:

It would just be react-component-avatar/src/index.jsx then?

[bzang]

Adding @aimeex3 and @andrewholsted to the thread.

[bzang]

@adamweeks, yes you're right.

The instructions above get a bit goofy for mono repos. I think we have to consider the root to be /packages/node_modules/@ciscospark/react-component-avatar So anything contained inside would have to follow the rules. So the root component for that package is src/index.jsx.

In cases where the component is more complicated and we have to create sub-components, they'd be in something like src/components/Badge.jsx or src/components/ActivityMenu.jsx.