Наследует все правила из Общего стиля кода.
| Правило | Плохо | Хорошо |
| React компоненты должны состоять не более, чем из 100 строк. | | |
| Файлы должны состоять не более, чем из 250 строк. | | |
| Именованные экспорты предпочтительнее. | export default «Hello World»; | export const helloWorld = «Hello World»; |
| Явное преобразование типа предпочтительнее неявного. | +»1″ | Number(«1») |
| В случае, если тестовый файл находится в одной папке с самим компонентом, то использовать такое наименование для него <ComponentName>.spec.tsx; В случае, если тестовый файл находится в отдельной папке, то такое <ComponentName>.test.tsx. | | |
| Компонент должен иметь unit test файл. | | |
| Использовать `if` вместо `&&` за исключением JSX. | flag && doSmth(); | if (flag) { doSmth(); } |
| | function Component() { return <Wrapper> {flag && <OtherComponent />} <Content /> </Wrapper> } | |
| Избегать использования значений для отступов, состоящих из 4-х цифр. | padding: 0 0 0 5px; | padding: 0; padding-left: 5px; |
| БЭМ методология для именования CSS классов (https://en.bem.info/methodology/) | <div class=»container»> <p class=»description«>Lorem Ipsum</p> <p class=»additional-description«>Ipsum Lorem</p> </div> | <div class=»container»> <p class=»container__description«>Lorem Ipsum</p> <p class=»container__description container__description_additional«>Ipsum Lorem</p> </div> |
Сайт Александра Шпиндлера 