A beginner's guide to naming

Naming may sound trivial, but there are some standard practices in React that you should comply with. These practices may vary from project to project, but keep in mind that you should respect at least the ones that are mentioned here. In other cases, check your project's style guide and possibly your linter configuration.

A component name should start with an uppercase letter unless it's a HOC. Use the component name as the filename. The filename should be in UpperCamelCase (for more information on CamelCase, see https://en.wikipedia.org/wiki/Camel_case):

// bad
someSection.js
// good
SomeSection.js or SomeSection.jsx
// Current Airbnb style guide recommends .jsx extension though.

The following are rules on importing your component:

// bad
import App from './App/App';

// bad
import App from './App/index';

// good
import App from './App';

If it's HOC, start its name with a lowercase letter in lower CamelCase, for instance, makeExpandable.

Airbnb also suggests that you take care of the name of the inner component. We need to specify a displayName prop to do, as in the following:

// Excerpt from
// https://github.com/airbnb/javascript/tree/master/react#naming
// 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;
}

This is a valid point as in some tools you may benefit from seeing the proper component names. Following this pattern is optional and up to the team to decide upon.

When defining new props, please avoid the common props that used to mean something else. An example may be the style prop we used to pass styles to our components.
Please check out the following links to check what props you should avoid using:

• Props corresponding to your application layout:
  • https://facebook.github.io/react-native/docs/layout-props.html
• Props reserved for component styling, as it may create confusion:
  • https://facebook.github.io/react-native/docs/image-style-props.html
  • https://facebook.github.io/react-native/docs/text-style-props.html
  • https://facebook.github.io/react-native/docs/view-style-props.html

Don't get too scared. It will feel more natural sooner or later.