React — это популярная библиотека JavaScript, используемая для создания пользовательских интерфейсов. При работе над проектом с React организация компонентов является важнейшим аспектом создания масштабируемого и поддерживаемого кода. В этой статье мы обсудим лучшие практики организации компонентов в React, включая объединение стилей и скриптов в одном компоненте, и приведем примеры того, как это эффективно сделать.

Принцип единой ответственности

Одним из основополагающих принципов разработки программного обеспечения является принцип единой ответственности (SRP). В нем говорится, что у каждого компонента должна быть только одна причина для изменения. Это означает, что каждый компонент должен отвечать за рендеринг определенной части пользовательского интерфейса, и он не должен отвечать ни за что другое. Например, компонент button должен только отображать кнопку и обрабатывать события нажатия; он также не должен извлекать данные или манипулировать состоянием приложения.

Соглашение об именовании компонентов

Соглашения об именовании важны, когда речь заходит об организации компонентов. Они должны быть описательными и следовать последовательному шаблону. Общепринятым соглашением является использование PascalCase для имен компонентов, начинающихся с заглавной буквы. Например, Button, Header, и Navigation.

Структура папок

Организация компонентов по папкам — отличный способ сохранить структуру кодовой базы и простоту навигации. Распространенный шаблон заключается в создании папки для каждой функции или страницы в приложении, а затем упорядочивании компонентов, связанных с этой функцией, в папке.

Объединение стилей и скриптов в одном компоненте

React позволяет вам комбинировать стили и скрипты в одном компоненте. Этого можно достичь с помощью встроенных стилей или CSS-модулей. Встроенные стили — это стили CSS, написанные непосредственно в коде JSX, в то время как модули CSS — это файлы CSS, которые импортируются в файл JavaScript компонента.

Преимущество встроенных стилей в том, что они просты в использовании и обслуживании. Однако они могут быстро стать загроможденными и трудночитаемыми, особенно для сложных стилей. Модули CSS обеспечивают более организованный подход к стилизации с дополнительным преимуществом в виде возможности использования препроцессоров CSS, таких как Sass или Less.

Вот пример того, как использовать CSS-модули в компоненте React:

import styles from './Button.module.css';

const Button = ({ text, onClick }) => {
  return (
    <button className={styles.button} onClick={onClick}>
      {text}
    </button>
  );
};

export default Button;

В этом примере стили CSS для кнопки определены в отдельном файле с именем Button.module.css. Затем объект styles импортируется в файл JavaScript компонента, а класс button применяется к элементу кнопки с использованием атрибута className.

Пример организации компонентов

Вот пример того, как организовать компоненты в проекте React:

src/
├── components/
│   ├── Button/
│   │   ├── Button.js
│   │   └── Button.module.css
│   ├── Header/
│   │   ├── Header.js
│   │   └── Header.module.css
│   └── Navigation/
│       ├── Navigation.js
│       └── Navigation.module.css
├── pages/
│   ├── Home/
│   │   ├── Home.js
│   │   └── Home.module.css
│   └── About/
│       ├── About.js
│       └── About.module.css
├── App.js
└── index.js

В этом примере компоненты организованы в две основные папки: components и pages. Папка components содержит повторно используемые компоненты, такие как кнопка, заголовок и навигация, в то время как папка pages содержит компоненты, специфичные для каждой страницы приложения, такие как Home и About.

Каждый компонент содержится в своей папке, причем файл JavaScript и файл модуля CSS имеют одно и то же имя. Это обеспечивает простую навигацию и помогает упорядочить кодовую базу.

Компонент Button, например, содержится в собственной папке со своим файлом JavaScript и файлом модуля CSS. Это упрощает поиск и обновление кода компонента и гарантирует, что стили применяются только к компоненту Button.

Компоненты заголовка и навигации также содержатся в своих собственных папках и имеют свои собственные файлы модулей CSS. Это позволяет создавать более модульный и ремонтопригодный код и гарантирует, что изменения стилей одного компонента не повлияют на стили других компонентов.

Страницы Home и About также содержатся в их собственных папках с их собственными файлами модулей JavaScript и CSS. Это обеспечивает более организованный код и помогает гарантировать, что компоненты, используемые на каждой странице, специфичны только для этой страницы.

Sass в React

SCSS (Sass CSS) — популярный CSS-препроцессор, который расширяет возможности обычного CSS с помощью таких функций, как переменные, вложенность и миксины. SCSS можно использовать в сочетании с CSS-модулями Reactos для создания более удобных в обслуживании и многократном использовании стилей.

Первым делом, нам необходимо установить Sass в наш модуль React. В терминале выполните следующую команду, чтобы установить пакет node-sass в качестве зависимости от разработки:

npm install node-sass --save-dev

Эта команда устанавливает пакет node-sass, который представляет собой библиотеку для компиляции файлов Sass в CSS. Опция —save-dev добавляет пакет в файл package.json вашего проекта в разделе devDependencies.

Как только установка будет завершена, вы можете начать использовать Sass в своих компонентах React. Для этого создайте новый scss-файл для стилей вашего компонента и импортируйте его в свой компонент с помощью инструкции import:

import React from 'react';
import './MyComponent.scss';

const MyComponent = () => {
  return (
    <div className="my-component">
      <h1 className="my-component__title">Hello World!</h1>
      <p className="my-component__description">This is my React component.</p>
    </div>
  );
};

export default MyComponent;

В этом примере компонент MyComponent импортирует свои стили из файла с именем MyComponent.scss. Атрибуты className в коде JSX ссылаются на имена классов, определенные в файле .scss.

Наконец, запустите свое приложение React с помощью сервера разработки (например, create-react-app или webpack-dev-server), и файлы Sass будут автоматически скомпилированы в CSS и применены к вашим компонентам.

Вот и все! Теперь вы можете использовать Sass для написания более удобных в обслуживании и многократном использовании стилей для ваших компонентов React.