{"id":19954317,"url":"https://github.com/kimmelsg/cj-js-styleguide","last_synced_at":"2026-03-05T15:34:10.172Z","repository":{"id":131307551,"uuid":"49298074","full_name":"kimmelsg/cj-js-styleguide","owner":"kimmelsg","description":"Quick reference styling react components / building JS projects","archived":false,"fork":false,"pushed_at":"2016-01-08T21:52:22.000Z","size":6,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-12T06:43:06.344Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kimmelsg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-08T21:35:48.000Z","updated_at":"2019-10-11T13:39:20.000Z","dependencies_parsed_at":"2023-03-17T10:50:47.014Z","dependency_job_id":null,"html_url":"https://github.com/kimmelsg/cj-js-styleguide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimmelsg%2Fcj-js-styleguide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimmelsg%2Fcj-js-styleguide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimmelsg%2Fcj-js-styleguide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimmelsg%2Fcj-js-styleguide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kimmelsg","download_url":"https://codeload.github.com/kimmelsg/cj-js-styleguide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241382929,"owners_count":19954029,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T01:19:44.799Z","updated_at":"2026-03-05T15:34:10.130Z","avatar_url":"https://github.com/kimmelsg.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# NavJobs JS Styleguide\n\n*Majorly inspired by [airbnb](https://github.com/airbnb/javascript/tree/master/react)*\n\n## Table of Contents\n\n  1. [React](#react)\n    1. [Basic Rules](#basic-rules)\n    1. [Class vs `React.createClass`](#class-vs-reactcreateclass)\n    1. [Naming](#naming)\n    1. [Declaration](#declaration)\n    1. [Alignment](#alignment)\n    1. [Quotes](#quotes)\n    1. [Spacing](#spacing)\n    1. [Props](#props)\n    1. [Parentheses](#parentheses)\n    1. [Tags](#tags)\n    1. [Methods](#methods)\n    1. [Ordering](#ordering)\n    1. [`isMounted`](#ismounted)\n\n## Basic Rules\n\n  - When using [Immutable](https://facebook.github.io/immutable-js/) never use `.toJS()`\n  - no semicolons\n  - use ternary operators sparingly unless inside of `React.render`\n  - one React component per file\n  - only use `props` if building a child component, unless absolutely neccesary.\n\n#React \n\n## Class vs `React.createClass`\n\n  - Use stateless components when you can, otherwise `class extends React.Component`.\n\n  eslint rules: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md).\n\n    ```javascript\n    class Listing extends React.Component {\n      handleClick() {\n      \n      }\n      render() {\n        return \u003cdiv onClick={handleClick} /\u003e\n      }\n    }\n    \n    //or\n    \n    const Test = ({ title }) =\u003e (\n      \u003cdiv\u003e\n        {title}\n      \u003c/div\u003e\n    )\n    ```\n\n## Naming\n\n  - **Extensions**: Use `.jsx` extension for React components.\n  - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`.\n  - **Reference Naming**: Use PascalCase for React components and camelCase for their instances.\n\n  eslint rules: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md).\n\n    ```javascript\n    // bad\n    import reservationCard from './ReservationCard'\n\n    // good\n    import ReservationCard from './ReservationCard'\n\n    // bad\n    const ReservationItem = \u003cReservationCard /\u003e\n\n    // good\n    const reservationItem = \u003cReservationCard /\u003e\n    ```\n\n  - **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:\n\n    ```javascript\n    // bad\n    import Footer from './Footer/Footer'\n\n    // bad\n    import Footer from './Footer/index'\n\n    // good\n    import Footer from './Footer'\n    ```\n\n## Declaration\n\n  - Do not use `displayName` for naming components. Instead, name the component by reference.\n\n    ```javascript\n    // bad\n    export default React.createClass({\n      displayName: 'ReservationCard',\n      // stuff goes here\n    })\n\n    // good\n    export default class ReservationCard extends React.Component {\n    }\n    ```\n\n## Alignment\n\n  - Follow these alignment styles for JSX syntax\n\n  eslint rules: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md).\n\n    ```javascript\n    // bad\n    \u003cFoo superLongParam=\"bar\"\n         anotherSuperLongParam=\"baz\" /\u003e\n\n    // good\n    \u003cFoo\n      superLongParam=\"bar\"\n      anotherSuperLongParam=\"baz\"\n    /\u003e\n\n    // if props fit in one line then keep it on the same line\n    \u003cFoo bar=\"bar\" /\u003e\n\n    // children get indented normally\n    \u003cFoo\n      superLongParam=\"bar\"\n      anotherSuperLongParam=\"baz\"\n    \u003e\n      \u003cSpazz /\u003e\n    \u003c/Foo\u003e\n    ```\n\n## Quotes\n\n  - Always use double quotes (`\"`) for JSX attributes, but single quotes for all other JS.\n\n  \u003e Why? JSX attributes [can't contain escaped quotes](http://eslint.org/docs/rules/jsx-quotes), so double quotes make conjunctions like `\"don't\"` easier to type.\n  \u003e Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention.\n\n  eslint rules: [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes).\n\n    ```javascript\n    // bad\n    \u003cFoo bar='bar' /\u003e\n\n    // good\n    \u003cFoo bar=\"bar\" /\u003e\n\n    // bad\n    \u003cFoo style={{ left: \"20px\" }} /\u003e\n\n    // good\n    \u003cFoo style={{ left: '20px' }} /\u003e\n    ```\n\n## Spacing\n\n  - Always include a single space in your self-closing tag.\n\n    ```javascript\n    // bad\n    \u003cFoo/\u003e\n\n    // very bad\n    \u003cFoo                 /\u003e\n\n    // bad\n    \u003cFoo\n     /\u003e\n\n    // good\n    \u003cFoo /\u003e\n    ```\n\n## Props\n\n  - Always use camelCase for prop names.\n\n    ```javascript\n    // bad\n    \u003cFoo\n      UserName=\"hello\"\n      phone_number={12345678}\n    /\u003e\n\n    // good\n    \u003cFoo\n      userName=\"hello\"\n      phoneNumber={12345678}\n    /\u003e\n    ```\n\n  - Omit the value of the prop when it is explicitly `true`.\n\n  eslint rules: [`react/jsx-boolean-value`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md).\n\n    ```javascript\n    // bad\n    \u003cFoo\n      hidden={true}\n    /\u003e\n\n    // good\n    \u003cFoo\n      hidden\n    /\u003e\n    ```\n\n## Parentheses\n\n  - Wrap JSX tags in parentheses when they span more than one line.\n\n  eslint rules: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md).\n\n    ```javascript\n    // bad\n    render() {\n      return \u003cMyComponent className=\"long body\" foo=\"bar\"\u003e\n               \u003cMyChild /\u003e\n             \u003c/MyComponent\u003e\n    }\n\n    // good\n    render() {\n      return (\n        \u003cMyComponent className=\"long body\" foo=\"bar\"\u003e\n          \u003cMyChild /\u003e\n        \u003c/MyComponent\u003e\n      )\n    }\n\n    // good, when single line\n    render() {\n      const body = \u003cdiv\u003ehello\u003c/div\u003e\n      return \u003cMyComponent\u003e{body}\u003c/MyComponent\u003e\n    }\n    ```\n\n## Tags\n\n  - Always self-close tags that have no children.\n\n  eslint rules: [`react/self-closing-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md).\n\n    ```javascript\n    // bad\n    \u003cFoo className=\"stuff\"\u003e\u003c/Foo\u003e\n\n    // good\n    \u003cFoo className=\"stuff\" /\u003e\n    ```\n\n  - If your component has multi-line properties, close its tag on a new line.\n\n  eslint rules: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md).\n\n    ```javascript\n    // bad\n    \u003cFoo\n      bar=\"bar\"\n      baz=\"baz\" /\u003e\n\n    // good\n    \u003cFoo\n      bar=\"bar\"\n      baz=\"baz\"\n    /\u003e\n    ```\n\n## Methods\n\n  - Bind event handlers for the render method in the constructor.\n\n  \u003e Why? A bind call in a the render path creates a brand new function on every single render.\n\n  eslint rules: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md).\n\n    ```javascript\n    // bad\n    class extends React.Component {\n      onClickDiv() {\n        // do stuff\n      }\n\n      render() {\n        return \u003cdiv onClick={this.onClickDiv.bind(this)} /\u003e\n      }\n    }\n\n    // good\n    class extends React.Component {\n      constructor(props) {\n        super(props)\n\n        this.onClickDiv = this.onClickDiv.bind(this)\n      }\n\n      onClickDiv() {\n        // do stuff\n      }\n\n      render() {\n        return \u003cdiv onClick={this.onClickDiv} /\u003e\n      }\n    }\n    ```\n\n  - Do not use underscore prefix for internal methods of a React component.\n\n    ```javascript\n    // bad\n    React.createClass({\n      _onClickSubmit() {\n        // do stuff\n      },\n\n      // other stuff\n    })\n\n    // good\n    class extends React.Component {\n      onClickSubmit() {\n        // do stuff\n      }\n\n      // other stuff\n    }\n    ```\n\n## Ordering\n\n  - Ordering for `class extends React.Component`:\n\n  1. `constructor`\n  1. optional `static` methods\n  1. `getChildContext`\n  1. `componentWillMount`\n  1. `componentDidMount`\n  1. `componentWillReceiveProps`\n  1. `shouldComponentUpdate`\n  1. `componentWillUpdate`\n  1. `componentDidUpdate`\n  1. `componentWillUnmount`\n  1. *clickHandlers or eventHandlers* like `onClickSubmit()` or `onChangeDescription()`\n  1. *getter methods for `render`* like `getSelectReason()` or `getFooterContent()`\n  1. *Optional render methods* like `renderNavigation()` or `renderProfilePicture()`\n  1. `render`\n\n  - How to define `propTypes`, `defaultProps`, `contextTypes`, etc...\n\n    ```javascript\n    import React, { PropTypes } from 'react'\n\n    const propTypes = {\n      id: PropTypes.number.isRequired,\n      url: PropTypes.string.isRequired,\n      text: PropTypes.string,\n    }\n\n    const defaultProps = {\n      text: 'Hello World',\n    }\n\n    class Link extends React.Component {\n      static methodsAreOk() {\n        return true\n      }\n\n      render() {\n        return \u003ca href={this.props.url} data-id={this.props.id}\u003e{this.props.text}\u003c/a\u003e\n      }\n    }\n\n    Link.propTypes = propTypes\n    Link.defaultProps = defaultProps\n\n    export default Link\n    ```\n\n  eslint rules: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md).\n\n## `isMounted`\n\n  - Do not use `isMounted`.\n\n  \u003e Why? [`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and is on its way to being officially deprecated.\n\n  [anti-pattern]: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html\n\n  eslint rules: [`react/no-is-mounted`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md).\n\n**[⬆ back to top](#table-of-contents)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimmelsg%2Fcj-js-styleguide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkimmelsg%2Fcj-js-styleguide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimmelsg%2Fcj-js-styleguide/lists"}