Skip to content
This repository has been archived by the owner on Nov 8, 2019. It is now read-only.

Commit

Permalink
Update react/README
Browse files Browse the repository at this point in the history
  • Loading branch information
Nick Hwang committed Dec 16, 2015
1 parent c6f8670 commit 492cab8
Showing 1 changed file with 16 additions and 1 deletion.
17 changes: 16 additions & 1 deletion react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@

- Use class extends React.Component unless you have a very good reason to use mixins.

eslint rules: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md).

```javascript
// bad
const Listing = React.createClass({
Expand All @@ -54,7 +56,10 @@

- **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:
- **Reference Naming**: Use PascalCase for React components and camelCase for their instances.

eslint rules: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md).

```javascript
// bad
const reservationCard = require('./ReservationCard');
Expand Down Expand Up @@ -101,6 +106,8 @@
## Alignment
- Follow these alignment styles for JSX syntax

eslint rules: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md).

```javascript
// bad
<Foo superLongParam="bar"
Expand Down Expand Up @@ -130,6 +137,8 @@
> 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.
> Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention.
eslint rules: [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes).
```javascript
// bad
<Foo bar='bar' />
Expand Down Expand Up @@ -297,6 +306,9 @@
## Tags
- Always self-close tags that have no children.
eslint rules: [`react/self-closing-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md).
```javascript
// bad
<Foo className="stuff"></Foo>
Expand All @@ -306,6 +318,9 @@
```
- If your component has multi-line properties, close its tag on a new line.
eslint rules: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md).
```javascript
// bad
<Foo
Expand Down

0 comments on commit 492cab8

Please sign in to comment.