diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js
index 758f4e65..7f693545 100644
--- a/packages/eslint-config-airbnb/rules/react.js
+++ b/packages/eslint-config-airbnb/rules/react.js
@@ -21,6 +21,9 @@ module.exports = {
// Validate props indentation in JSX
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md
'react/jsx-indent-props': [2, 2],
+ // Prevent usage of .bind() and arrow functions in JSX props
+ // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md
+ 'react/jsx-no-bind': 2,
// Prevent duplicate props in JSX
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-duplicate-props.md
'react/jsx-no-duplicate-props': 0,
diff --git a/react/README.md b/react/README.md
index 48a50b83..e6b4a331 100644
--- a/react/README.md
+++ b/react/README.md
@@ -56,10 +56,10 @@
```javascript
// bad
- const reservationCard = require('./ReservationCard');
+ import reservationCard from './ReservationCard';
// good
- const ReservationCard = require('./ReservationCard');
+ import ReservationCard from './ReservationCard';
// bad
const ReservationItem = ;
@@ -68,17 +68,17 @@
const reservationItem = ;
```
- **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:
+ - **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:
```javascript
// bad
- const Footer = require('./Footer/Footer.jsx')
+ import Footer from './Footer/Footer';
// bad
- const Footer = require('./Footer/index.jsx')
+ import Footer from './Footer/index';
// good
- const Footer = require('./Footer')
+ import Footer from './Footer';
```
## Declaration
@@ -186,6 +186,22 @@
/>
```
+ - Omit the value of the prop when it is explicitly `true`.
+
+ eslint rules: [`react/jsx-boolean-value`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md).
+
+ ```javascript
+ // bad
+
+
+ // good
+
+ ```
+
## Parentheses
- Wrap JSX tags in parentheses when they span more than one line.
@@ -193,7 +209,7 @@
eslint rules: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md).
```javascript
- /// bad
+ // bad
render() {
return
@@ -249,6 +265,42 @@
## Methods
+ - Bind event handlers for the render method in the constructor.
+
+ > Why? A bind call in a the render path create a brand new function on every single render.
+
+ eslint rules: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md).
+
+ ```javascript
+ // bad
+ class extends React.Component {
+ onClickDiv() {
+ // do stuff
+ }
+
+ render() {
+ return
+ }
+ }
+
+ // good
+ class extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.onClickDiv = this.onClickDiv.bind(this);
+ }
+
+ onClickDiv() {
+ // do stuff
+ }
+
+ render() {
+ return
+ }
+ }
+ ```
+
- Do not use underscore prefix for internal methods of a React component.
```javascript
@@ -256,7 +308,7 @@
React.createClass({
_onClickSubmit() {
// do stuff
- }
+ },
// other stuff
});
@@ -268,7 +320,7 @@
}
// other stuff
- });
+ }
```
## Ordering