You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- [7.1](#functions--declarations) Use named function expressions instead of function declarations. eslint: [`func-style`](https://eslint.org/docs/rules/func-style)
652
652
653
-
> Why? Function declarations are hoisted, which means that it’s easy - too easy - to reference the function before it is defined in the file. This harms readability and maintainability. If you find that a function’s definition is large or complex enough that it is interfering with understanding the rest of the file, then perhaps it’s time to extract it to its own module! Don’t forget to explicitly name the expression, regardless of whether or not the name is inferred from the containing variable (which is often the case in modern browsers or when using compilers such as Babel). This eliminates any assumptions made about the Error's call stack. ([Discussion](https://github.com/airbnb/javascript/issues/794))
653
+
> Why? Function declarations are hoisted, which means that it’s easy - too easy - to reference the function before it is defined in the file. This harms readability and maintainability. If you find that a function’s definition is large or complex enough that it is interfering with understanding the rest of the file, then perhaps it’s time to extract it to its own module! Don’t forget to explicitly name the expression, regardless of whether or not the name is inferred from the containing variable (which is often the case in modern browsers or when using compilers such as Babel). This eliminates any assumptions made about the Error’s call stack. ([Discussion](https://github.com/airbnb/javascript/issues/794))
- [16.2](#blocks--cuddled-elses) If you're using multi-line blocks with `if` and `else`, put `else` on the same line as your `if` block’s closing brace. eslint: [`brace-style`](https://eslint.org/docs/rules/brace-style.html)
2108
+
- [16.2](#blocks--cuddled-elses) If you’re using multi-line blocks with`if` and `else`, put `else` on the same line as your `if` block’s closing brace. eslint: [`brace-style`](https://eslint.org/docs/rules/brace-style.html)
- [18.4](#comments--actionitems) Prefixing your comments with`FIXME` or `TODO` helps other developers quickly understand if you're pointing out a problem that needs to be revisited, or if you're suggesting a solution to the problem that needs to be implemented. These are different than regular comments because they are actionable. The actions are `FIXME: -- need to figure this out` or `TODO: -- need to implement`.
2376
+
- [18.4](#comments--actionitems) Prefixing your comments with `FIXME` or `TODO` helps other developers quickly understand if you’re pointing out a problem that needs to be revisited, or if you’re suggesting a solution to the problem that needs to be implemented. These are different than regular comments because they are actionable. The actions are `FIXME: -- need to figure this out` or `TODO: -- need to implement`.
2377
2377
2378
2378
<a name="comments--fixme"></a><a name="17.4"></a>
2379
2379
- [18.5](#comments--fixme) Use `// FIXME:` to annotate problems.
- [22.4](#coercion--comment-deviations) If for whatever reason you are doing something wild and `parseInt` is your bottleneck and need to use Bitshift for [performance reasons](https://jsperf.com/coercion-vs-casting/3), leave a comment explaining why and what you're doing.
3068
+
- [22.4](#coercion--comment-deviations) If for whatever reason you are doing something wild and `parseInt` is your bottleneck and need to use Bitshift for [performance reasons](https://jsperf.com/coercion-vs-casting/3), leave a comment explaining why and what you’re doing.
Copy file name to clipboardExpand all lines: react/README.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -27,7 +27,7 @@ This style guide is mostly based on the standards that are currently prevalent i
27
27
- Only include one React component per file.
28
28
- However, multiple [Stateless, or Pure, Components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) are allowed per file. eslint: [`react/no-multi-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless).
29
29
- Always use JSX syntax.
30
-
- Do not use `React.createElement` unless you're initializing the app from a file that is not JSX.
30
+
- Do not use `React.createElement` unless you’re initializing the app from a file that is not JSX.
31
31
32
32
## Class vs `React.createClass` vs stateless
33
33
@@ -51,7 +51,7 @@ This style guide is mostly based on the standards that are currently prevalent i
51
51
}
52
52
```
53
53
54
-
And if you don't have state or refs, prefer normal functions (not arrow functions) over classes:
54
+
And if you don’t have state or refs, prefer normal functions (not arrow functions) over classes:
55
55
56
56
```jsx
57
57
// bad
@@ -110,9 +110,9 @@ This style guide is mostly based on the standards that are currently prevalent i
110
110
// good
111
111
import Footer from './Footer';
112
112
```
113
-
- **Higher-order Component Naming**: Use a composite of the higher-order component's name and the passed-in component's name as the `displayName` on the generated component. For example, the higher-order component `withFoo()`, when passed a component `Bar` should produce a component with a `displayName` of `withFoo(Bar)`.
113
+
-**Higher-order Component Naming**: Use a composite of the higher-order component’s name and the passed-in component’s name as the `displayName` on the generated component. For example, the higher-order component `withFoo()`, when passed a component `Bar` should produce a component with a `displayName`of`withFoo(Bar)`.
114
114
115
-
> Why? A component's `displayName` may be used by developer tools or in error messages, and having a value that clearly expresses this relationship helps people understand what is happening.
115
+
> Why?A component’s `displayName` may be used by developer tools or in error messages, and having a value that clearly expresses this relationship helps people understand what is happening.
116
116
117
117
```jsx
118
118
// bad
@@ -402,7 +402,7 @@ This style guide is mostly based on the standards that are currently prevalent i
402
402
```
403
403
404
404
- Use spread props sparingly.
405
-
> Why? Otherwise you're more likely to pass unnecessary props down to components. And for React v15.6.1 and older, you could [pass invalid HTML attributes to the DOM](https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html).
405
+
> Why? Otherwise you’re more likely to pass unnecessary props down to components. Andfor React v15.6.1 and older, you could [pass invalid HTML attributes to the DOM](https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html).
406
406
407
407
Exceptions:
408
408
@@ -423,7 +423,7 @@ This style guide is mostly based on the standards that are currently prevalent i
423
423
}
424
424
```
425
425
426
-
- Spreading objects with known, explicit props. This can be particularly useful when testing React components with Mocha's beforeEach construct.
426
+
- Spreading objects with known, explicit props. This can be particularly useful when testing React components with Mocha’s beforeEach construct.
0 commit comments