{"action":"created","comment":{"url":"https://api.github.com/repos/airbnb/javascript/pulls/comments/29396599","id":29396599,"diff_hunk":"@@ -0,0 +1,218 @@\n+# Airbnb React/JSX Style Guide\n+\n+*A mostly reasonable approach to React and JSX*\n+\n+## Table of Contents\n+\n+  1. [Basic Rules](#basic-rules)\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. [Ordering](#ordering)\n+\n+## Basic Rules\n+\n+  - Only include one React component per file.\n+  - Always use JSX syntax.\n+  - Do not use `React.createElement` unless you're initializing the app from a `.js` file.\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+    ```javascript\n+    // bad\n+    const reservationCard = require('./ReservationCard');\n+\n+    // good\n+    const ReservationCard = require('./ReservationCard');\n+\n+    // bad\n+    const ReservationItem = <ReservationCard />;\n+\n+    // good\n+    const reservationItem = <ReservationCard />;\n+    ```\n+\n+    **Component Naming**: Use the filename as the component name. So `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+    ```javascript\n+    // bad\n+    const Footer = require('./Footer/Footer.jsx')\n+\n+    // bad\n+    const Footer = require('./Footer/index.jsx')\n+\n+    // good\n+    const Footer = require('./Footer')\n+    ```\n+\n+\n+## Declaration\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+    const ReservationCard = React.createClass({\n+      // stuff goes here\n+    });\n+    export default ReservationCard;\n+    ```\n+\n+## Alignment\n+  - Follow these alignment styles for JSX syntax\n+\n+    ```javascript\n+    // bad\n+    <Foo bar=\"bar\"\n+         baz=\"baz\" />\n+\n+    // good\n+    <Foo\n+      bar=\"bar\"\n+      baz=\"baz\"\n+    />\n+\n+    // if props fit in one line then keep it on the same line\n+    <Foo bar=\"bar\" />\n+\n+    // children get indented normally\n+    <Foo\n+      bar=\"bar\"\n+      baz=\"baz\"\n+    >\n+      <Spazz />\n+    </Foo>\n+    ```\n+\n+## Quotes\n+  - Always use double quotes (`\"`) for JSX attributes, but single quotes for all other JavaScript.\n+    ```javascript\n+    // bad\n+    <Foo bar='bar' />\n+\n+    // good\n+    <Foo bar=\"bar\" />\n+\n+    // bad\n+    <Foo style={{ left: \"20px\" }} />\n+\n+    // good\n+    <Foo style={{ left: '20px' }} />","path":"react/README.md","position":112,"original_position":112,"commit_id":"3764337df248e5068684f00bd2153dfd31fa243f","original_commit_id":"3764337df248e5068684f00bd2153dfd31fa243f","user":{"login":"nkbt","id":175264,"avatar_url":"https://avatars.githubusercontent.com/u/175264?v=3","gravatar_id":"","url":"https://api.github.com/users/nkbt","html_url":"https://github.com/nkbt","followers_url":"https://api.github.com/users/nkbt/followers","following_url":"https://api.github.com/users/nkbt/following{/other_user}","gists_url":"https://api.github.com/users/nkbt/gists{/gist_id}","starred_url":"https://api.github.com/users/nkbt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nkbt/subscriptions","organizations_url":"https://api.github.com/users/nkbt/orgs","repos_url":"https://api.github.com/users/nkbt/repos","events_url":"https://api.github.com/users/nkbt/events{/privacy}","received_events_url":"https://api.github.com/users/nkbt/received_events","type":"User","site_admin":false},"body":"Extra spaces `<Foo style={{left: '20px'}} />`","created_at":"2015-04-30T00:58:28Z","updated_at":"2015-04-30T00:58:28Z","html_url":"https://github.com/airbnb/javascript/pull/331#discussion_r29396599","pull_request_url":"https://api.github.com/repos/airbnb/javascript/pulls/331","_links":{"self":{"href":"https://api.github.com/repos/airbnb/javascript/pulls/comments/29396599"},"html":{"href":"https://github.com/airbnb/javascript/pull/331#discussion_r29396599"},"pull_request":{"href":"https://api.github.com/repos/airbnb/javascript/pulls/331"}}},"pull_request":{"url":"https://api.github.com/repos/airbnb/javascript/pulls/331","id":34414887,"html_url":"https://github.com/airbnb/javascript/pull/331","diff_url":"https://github.com/airbnb/javascript/pull/331.diff","patch_url":"https://github.com/airbnb/javascript/pull/331.patch","issue_url":"https://api.github.com/repos/airbnb/javascript/issues/331","number":331,"state":"open","locked":false,"title":"React/JSX Style Guide","user":{"login":"alvinsng","id":1707753,"avatar_url":"https://avatars.githubusercontent.com/u/1707753?v=3","gravatar_id":"","url":"https://api.github.com/users/alvinsng","html_url":"https://github.com/alvinsng","followers_url":"https://api.github.com/users/alvinsng/followers","following_url":"https://api.github.com/users/alvinsng/following{/other_user}","gists_url":"https://api.github.com/users/alvinsng/gists{/gist_id}","starred_url":"https://api.github.com/users/alvinsng/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alvinsng/subscriptions","organizations_url":"https://api.github.com/users/alvinsng/orgs","repos_url":"https://api.github.com/users/alvinsng/repos","events_url":"https://api.github.com/users/alvinsng/events{/privacy}","received_events_url":"https://api.github.com/users/alvinsng/received_events","type":"User","site_admin":false},"body":"Lets share our internal React/JSX style guide!\r\n\r\n@hshoff @goatslacker @spikebrehm","created_at":"2015-04-29T23:05:41Z","updated_at":"2015-04-30T00:58:28Z","closed_at":null,"merged_at":null,"merge_commit_sha":"f161a08f6f99607d0e993d401b6761f8e0bd3452","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/airbnb/javascript/pulls/331/commits","review_comments_url":"https://api.github.com/repos/airbnb/javascript/pulls/331/comments","review_comment_url":"https://api.github.com/repos/airbnb/javascript/pulls/comments{/number}","comments_url":"https://api.github.com/repos/airbnb/javascript/issues/331/comments","statuses_url":"https://api.github.com/repos/airbnb/javascript/statuses/3764337df248e5068684f00bd2153dfd31fa243f","head":{"label":"airbnb:react_style","ref":"react_style","sha":"3764337df248e5068684f00bd2153dfd31fa243f","user":{"login":"airbnb","id":698437,"avatar_url":"https://avatars.githubusercontent.com/u/698437?v=3","gravatar_id":"","url":"https://api.github.com/users/airbnb","html_url":"https://github.com/airbnb","followers_url":"https://api.github.com/users/airbnb/followers","following_url":"https://api.github.com/users/airbnb/following{/other_user}","gists_url":"https://api.github.com/users/airbnb/gists{/gist_id}","starred_url":"https://api.github.com/users/airbnb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/airbnb/subscriptions","organizations_url":"https://api.github.com/users/airbnb/orgs","repos_url":"https://api.github.com/users/airbnb/repos","events_url":"https://api.github.com/users/airbnb/events{/privacy}","received_events_url":"https://api.github.com/users/airbnb/received_events","type":"Organization","site_admin":false},"repo":{"id":6498492,"name":"javascript","full_name":"airbnb/javascript","owner":{"login":"airbnb","id":698437,"avatar_url":"https://avatars.githubusercontent.com/u/698437?v=3","gravatar_id":"","url":"https://api.github.com/users/airbnb","html_url":"https://github.com/airbnb","followers_url":"https://api.github.com/users/airbnb/followers","following_url":"https://api.github.com/users/airbnb/following{/other_user}","gists_url":"https://api.github.com/users/airbnb/gists{/gist_id}","starred_url":"https://api.github.com/users/airbnb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/airbnb/subscriptions","organizations_url":"https://api.github.com/users/airbnb/orgs","repos_url":"https://api.github.com/users/airbnb/repos","events_url":"https://api.github.com/users/airbnb/events{/privacy}","received_events_url":"https://api.github.com/users/airbnb/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/airbnb/javascript","description":"JavaScript Style Guide","fork":false,"url":"https://api.github.com/repos/airbnb/javascript","forks_url":"https://api.github.com/repos/airbnb/javascript/forks","keys_url":"https://api.github.com/repos/airbnb/javascript/keys{/key_id}","collaborators_url":"https://api.github.com/repos/airbnb/javascript/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/airbnb/javascript/teams","hooks_url":"https://api.github.com/repos/airbnb/javascript/hooks","issue_events_url":"https://api.github.com/repos/airbnb/javascript/issues/events{/number}","events_url":"https://api.github.com/repos/airbnb/javascript/events","assignees_url":"https://api.github.com/repos/airbnb/javascript/assignees{/user}","branches_url":"https://api.github.com/repos/airbnb/javascript/branches{/branch}","tags_url":"https://api.github.com/repos/airbnb/javascript/tags","blobs_url":"https://api.github.com/repos/airbnb/javascript/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/airbnb/javascript/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/airbnb/javascript/git/refs{/sha}","trees_url":"https://api.github.com/repos/airbnb/javascript/git/trees{/sha}","statuses_url":"https://api.github.com/repos/airbnb/javascript/statuses/{sha}","languages_url":"https://api.github.com/repos/airbnb/javascript/languages","stargazers_url":"https://api.github.com/repos/airbnb/javascript/stargazers","contributors_url":"https://api.github.com/repos/airbnb/javascript/contributors","subscribers_url":"https://api.github.com/repos/airbnb/javascript/subscribers","subscription_url":"https://api.github.com/repos/airbnb/javascript/subscription","commits_url":"https://api.github.com/repos/airbnb/javascript/commits{/sha}","git_commits_url":"https://api.github.com/repos/airbnb/javascript/git/commits{/sha}","comments_url":"https://api.github.com/repos/airbnb/javascript/comments{/number}","issue_comment_url":"https://api.github.com/repos/airbnb/javascript/issues/comments{/number}","contents_url":"https://api.github.com/repos/airbnb/javascript/contents/{+path}","compare_url":"https://api.github.com/repos/airbnb/javascript/compare/{base}...{head}","merges_url":"https://api.github.com/repos/airbnb/javascript/merges","archive_url":"https://api.github.com/repos/airbnb/javascript/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/airbnb/javascript/downloads","issues_url":"https://api.github.com/repos/airbnb/javascript/issues{/number}","pulls_url":"https://api.github.com/repos/airbnb/javascript/pulls{/number}","milestones_url":"https://api.github.com/repos/airbnb/javascript/milestones{/number}","notifications_url":"https://api.github.com/repos/airbnb/javascript/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/airbnb/javascript/labels{/name}","releases_url":"https://api.github.com/repos/airbnb/javascript/releases{/id}","created_at":"2012-11-01T23:13:50Z","updated_at":"2015-04-30T00:57:29Z","pushed_at":"2015-04-29T23:22:12Z","git_url":"git://github.com/airbnb/javascript.git","ssh_url":"git@github.com:airbnb/javascript.git","clone_url":"https://github.com/airbnb/javascript.git","svn_url":"https://github.com/airbnb/javascript","homepage":null,"size":3222,"stargazers_count":17727,"watchers_count":17727,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":3303,"mirror_url":null,"open_issues_count":34,"forks":3303,"open_issues":34,"watchers":17727,"default_branch":"master"}},"base":{"label":"airbnb:master","ref":"master","sha":"716e8c5b9df7aba74645a4331d6ac58e15357f99","user":{"login":"airbnb","id":698437,"avatar_url":"https://avatars.githubusercontent.com/u/698437?v=3","gravatar_id":"","url":"https://api.github.com/users/airbnb","html_url":"https://github.com/airbnb","followers_url":"https://api.github.com/users/airbnb/followers","following_url":"https://api.github.com/users/airbnb/following{/other_user}","gists_url":"https://api.github.com/users/airbnb/gists{/gist_id}","starred_url":"https://api.github.com/users/airbnb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/airbnb/subscriptions","organizations_url":"https://api.github.com/users/airbnb/orgs","repos_url":"https://api.github.com/users/airbnb/repos","events_url":"https://api.github.com/users/airbnb/events{/privacy}","received_events_url":"https://api.github.com/users/airbnb/received_events","type":"Organization","site_admin":false},"repo":{"id":6498492,"name":"javascript","full_name":"airbnb/javascript","owner":{"login":"airbnb","id":698437,"avatar_url":"https://avatars.githubusercontent.com/u/698437?v=3","gravatar_id":"","url":"https://api.github.com/users/airbnb","html_url":"https://github.com/airbnb","followers_url":"https://api.github.com/users/airbnb/followers","following_url":"https://api.github.com/users/airbnb/following{/other_user}","gists_url":"https://api.github.com/users/airbnb/gists{/gist_id}","starred_url":"https://api.github.com/users/airbnb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/airbnb/subscriptions","organizations_url":"https://api.github.com/users/airbnb/orgs","repos_url":"https://api.github.com/users/airbnb/repos","events_url":"https://api.github.com/users/airbnb/events{/privacy}","received_events_url":"https://api.github.com/users/airbnb/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/airbnb/javascript","description":"JavaScript Style Guide","fork":false,"url":"https://api.github.com/repos/airbnb/javascript","forks_url":"https://api.github.com/repos/airbnb/javascript/forks","keys_url":"https://api.github.com/repos/airbnb/javascript/keys{/key_id}","collaborators_url":"https://api.github.com/repos/airbnb/javascript/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/airbnb/javascript/teams","hooks_url":"https://api.github.com/repos/airbnb/javascript/hooks","issue_events_url":"https://api.github.com/repos/airbnb/javascript/issues/events{/number}","events_url":"https://api.github.com/repos/airbnb/javascript/events","assignees_url":"https://api.github.com/repos/airbnb/javascript/assignees{/user}","branches_url":"https://api.github.com/repos/airbnb/javascript/branches{/branch}","tags_url":"https://api.github.com/repos/airbnb/javascript/tags","blobs_url":"https://api.github.com/repos/airbnb/javascript/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/airbnb/javascript/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/airbnb/javascript/git/refs{/sha}","trees_url":"https://api.github.com/repos/airbnb/javascript/git/trees{/sha}","statuses_url":"https://api.github.com/repos/airbnb/javascript/statuses/{sha}","languages_url":"https://api.github.com/repos/airbnb/javascript/languages","stargazers_url":"https://api.github.com/repos/airbnb/javascript/stargazers","contributors_url":"https://api.github.com/repos/airbnb/javascript/contributors","subscribers_url":"https://api.github.com/repos/airbnb/javascript/subscribers","subscription_url":"https://api.github.com/repos/airbnb/javascript/subscription","commits_url":"https://api.github.com/repos/airbnb/javascript/commits{/sha}","git_commits_url":"https://api.github.com/repos/airbnb/javascript/git/commits{/sha}","comments_url":"https://api.github.com/repos/airbnb/javascript/comments{/number}","issue_comment_url":"https://api.github.com/repos/airbnb/javascript/issues/comments{/number}","contents_url":"https://api.github.com/repos/airbnb/javascript/contents/{+path}","compare_url":"https://api.github.com/repos/airbnb/javascript/compare/{base}...{head}","merges_url":"https://api.github.com/repos/airbnb/javascript/merges","archive_url":"https://api.github.com/repos/airbnb/javascript/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/airbnb/javascript/downloads","issues_url":"https://api.github.com/repos/airbnb/javascript/issues{/number}","pulls_url":"https://api.github.com/repos/airbnb/javascript/pulls{/number}","milestones_url":"https://api.github.com/repos/airbnb/javascript/milestones{/number}","notifications_url":"https://api.github.com/repos/airbnb/javascript/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/airbnb/javascript/labels{/name}","releases_url":"https://api.github.com/repos/airbnb/javascript/releases{/id}","created_at":"2012-11-01T23:13:50Z","updated_at":"2015-04-30T00:57:29Z","pushed_at":"2015-04-29T23:22:12Z","git_url":"git://github.com/airbnb/javascript.git","ssh_url":"git@github.com:airbnb/javascript.git","clone_url":"https://github.com/airbnb/javascript.git","svn_url":"https://github.com/airbnb/javascript","homepage":null,"size":3222,"stargazers_count":17727,"watchers_count":17727,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":3303,"mirror_url":null,"open_issues_count":34,"forks":3303,"open_issues":34,"watchers":17727,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/airbnb/javascript/pulls/331"},"html":{"href":"https://github.com/airbnb/javascript/pull/331"},"issue":{"href":"https://api.github.com/repos/airbnb/javascript/issues/331"},"comments":{"href":"https://api.github.com/repos/airbnb/javascript/issues/331/comments"},"review_comments":{"href":"https://api.github.com/repos/airbnb/javascript/pulls/331/comments"},"review_comment":{"href":"https://api.github.com/repos/airbnb/javascript/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/airbnb/javascript/pulls/331/commits"},"statuses":{"href":"https://api.github.com/repos/airbnb/javascript/statuses/3764337df248e5068684f00bd2153dfd31fa243f"}}}}