Best practices

Components

• Postfix component class names with Component such as NavbarComponent and RestaurantTabsComponent.

• Before commits try to make your code abide by ESLint rules.

• Include propTypes and contextTypes declarations for all components that use props or context.

• Group import statements into relative and non-relative blocks.

• Use ES7 class properties to create automatically-bound methods for event handling. See this blog post for more information. Just define a constructor and add a this.foo = this.foo.bind(this); line. It'd be better in the long run, bring us closer to ES6 compliance.

• Avoid using @inject and @listeningTo for sub-components of a route component. Instead, have the parent/top-level component use them and pass them down through props.

• Avoid directly referencing a sub-component when the parent would then need extra dependencies only to pass them to the child. Instead, have the parent of the parent of the sub-component pass down the react element through a prop. For example:

  // instead of
  
  export class SomeEntryComponent extends Component {
      // ...
  
      render() {
          // ...
  
          return (
              <div>
                  {/* ... */}
                  <SomeParentComponent
                      aResource={...}
                      anotherResource={...}
                  />
              </div>
          );
      }
  }
  
  export class SomeParentComponent extends Component {
      // ...
  
      render() {
          const {aResource, anotherResource} = this.props;
  
          return (
              <div>
                  {/* ... */}
                  <SomeChildComponent
                      anotherResource={...}
                  />
              </div>
          );
      }
  }
  
  // it's much better to do this:
  
  export class SomeEntryComponent extends Component {
      // ...
  
      render() {
          // ...
  
          return (
              <div>
                  {/* ... */}
                  <SomeParentComponent
                      aResource={...}
                      child={<SomeChildComponent anotherResource={...}/>}
                  />
              </div>
          );
      }
  }
  
  export class SomeParentComponent extends Component {
      // ...
  
      render() {
          const {aResource, someChild} = this.props;
  
          return (
              <div>
                  {/* ... */}
                  {someChild}
              </div>
          );
      }
  }

Styling

Most of these are derived from SMACSS. Read it if you have the time. If you have any questions about them ask Tenor.

• Prefix all CSS classes with gb-{module} such as gb-navbar for all navbar classes.

• Only use divs when possible. (exceptions being special elements like input, img, etc.)

• Use one, case-specific, class for each element. For example instead of writing:

  <div className="gb-navbar-item gb-navbar-points">...</div>
  

  do:

  <div className="gb-navbar-points">...</div>
  // in css:
  .gb-navbar-points {
    .gb-navbar-item;
  
    // ...
  }
  

• Avoid hard-coding magic numbers, especially colors. Create an entry in base.less for colors, or include a variable declaration at the top of the module for things magic measurements.

• Avoid resorting to absolute positioning in order to align elements. Try to leverage padding/margin tricks or inline elements and floats.

• Avoid using flex boxes and other expiremental/unsupported features when possible.

package.json

Make sure to distinguish between devDependencies and normal dependencies when you add entries to the package. If the dependency is only needed for the build-step, be sure to include it as a "devDependency." (npm i -D ...). If the dependency is needed at runtime (included in the dev bundle) then include it as a hard dependency. (npm i -S ...)