Я работаю над React более двух лет, и всякий раз, когда я начинаю разрабатывать приложение React, самое первое, что приходит мне в голову, - «как структурировать это приложение». И мнений разных разработчиков по всему миру очень много. Если вы посмотрите официальную документацию или спросите кого-нибудь из основной команды React или посмотрите официальную документацию на этот вопрос:
«Есть ли рекомендуемый способ структурирования проектов React?»
Это то, что вы получите взамен.
React doesn’t have opinions on how you put files into folders. That said there are a few common approaches popular in the ecosystem you may want to consider.
Я сам, когда собирался начать работу над новым приложением с нуля, очень не понимал, какой структуре следовать. И нужно много времени, чтобы подумать, потому что для меня очень важно организовать свой проект, потому что в будущем, если кто-то еще присоединится к моей команде, им будет легче понять код.
После просмотра различных рекомендаций и изучения нескольких структур я наконец создал свою собственную структуру. И знаете, что такое хорошее? На самом деле он подходит для любых приложений. Независимо от того, работаете ли вы над очень большим приложением или просто над университетским проектом. Это поможет вам структурировать ваше приложение таким образом, чтобы вы могли повторно использовать многие свои компоненты и логику.
Прежде всего, я хочу показать вам свою структуру, а затем опишу, почему я ее создал и как должны выглядеть ваши файлы.
├── build ├── public ├── src │ ├── /configs │ ├── /actions │ ├── user.action.js │ ├── company.action.js │ ├── /assets │ ├── /images │ ├── /components │ ├── /Forms │ ├── LoginForm.js │ ├── SignupForm.js │ ├── /Shared │ ├── Button.js │ ├── Input.js │ ├── /NotFound │ ├── NotFound.js │ ├── /containers │ ├── Root.js │ ├── /Company │ ├── Company.index.js │ ├── Company.style.scss │ ├── /services │ ├── verb.services.js │ ├── user.services.js │ ├── company.services.js │ ├── /reducers │ ├── user.reducer.js │ ├── company.reducer.js │ ├── index.js │ ├── /store │ ├── configureStore.js │ ├── /styles │ ├── _fonts.scss │ ├── _colors.scss │ ├── styles.scss │ ├── /types │ ├── routes.js │ ├── index.js │ ├── utils.js
Итак, это файловая структура, которую я использовал, и она довольно ясна и позволяет мне писать многоразовые компоненты в довольно потрясающей манере.
Основная папка здесь - это src это папка, в которую вы помещаете все свои компоненты и конфигурации.
конфигурации
Это папка, в которую вы помещаете все свои конфигурации. Например, если вы используете какую-то стороннюю службу, и они требуют, чтобы вы добавляли какой-то API KEY в каждый запрос, так что это папка, в которую вы можете добавить эти переменные в файл с именем index.js
действия
Действия - это чистые объекты JavaScript, но я вижу, что многие люди используют их по-другому, а не рекомендованным способом. Ваши действия должны содержать только тип и полезную нагрузку (данные). Что я делаю, так это создаю другой файл для разных функций внутри папки действий. Таким образом, вы можете создавать файлы типа user.action.js для действий, связанных с пользователем, и так далее. И ваш файл действий должен содержать только действия и их типы. Как вы можете видеть в Gist ниже.
активы
Ресурсы должны содержать все активы ваших приложений, например images, icons и т. д.
components
Каталог Components должен содержать все компоненты. Если вы знакомы с redux, то, вероятно, имеете представление о контейнерах и компонентах. Контейнеры - это в основном те компоненты, которые имеют прямой доступ к состоянию приложения, а компоненты - нет.
В этот каталог можно поместить множество компонентов. Но то, что я делаю и рекомендую всем сделать, - это расположить ваши компоненты в соответствии с категорией, например, все ваши формы должны находиться в каталоге forms, и все те компоненты, которые являются общими для нескольких компонентов вашего приложения, таких как Input, Button, TextArea, и т.д. Они должны быть помещены в каталог shared.
контейнеры
Контейнеры - это те компоненты, которые имеют прямой доступ к состоянию приложения. Поэтому, если вы обращаетесь к каталогу состояния приложения в своем компоненте, этот компонент следует поместить в каталог контейнеров. Обычно я создаю контейнеры для функций. Например, если я создаю представление, в котором я собираюсь отобразить все компании, я создаю папку внутри каталога контейнеров с именем Company, который содержит два файла, сначала называется company.index.js, который содержит всю мою логику JSX и JS, а второй один называется company.style.scss, куда я помещаю все стили, относящиеся к этому представлению. Я использую SASS в большинстве своих проектов, но если вы используете CSS, вы можете просто назвать его company.style.css.
services
Этот каталог содержит все мои сетевые запросы. Обычно я создаю один файл с именем verbs.services.js, в котором создаю запросы типа getRequest, который принимает URL-адрес и возвращает обещание. Таким образом, вам не нужно устанавливать заголовки снова и снова, а также сокращается количество строк, которые нужно кодировать. Другие файлы зависят от ваших функций. Как и в случае с компанией, вы можете создать служебный файл с именем company.services.js, который будет содержать все службы для функции компании, как вы можете видеть в следующем Своде.
редукторы
Этот каталог должен содержать все ваши редукторы. Согласно официальным документам redux. «reducer - это чистая функция, которая принимает предыдущее состояние и действие и возвращает следующее состояние.», но я вижу много людей, которые выполняют много вычислений внутри эту функцию и напишите много кода вместо того, чтобы просто выполнить действие и вернуть новое состояние. Они выполняют много вычислений, которые мне не нравятся. Что я делаю, так это выполняю все вычисления внутри сервисов и делаю редукторы как можно более чистыми. Вы можете создавать редукторы в соответствии с такими функциями, как company.reducer.js. Этот каталог также содержит файл index.js, в котором вы в основном объединяете все редукторы. Следующие Gists проиллюстрируют это больше.
store
Этот каталог содержит конфигурации вашего магазина. Обычно я создаю файл с именем configureStore.js внутри этого каталога и создаю конфигурации внутри этого файла.
стили
Этот каталог содержит все стили, которые используются в различных файлах стилей. Если вы знакомы с SASS, вы можете создавать миксины, заполнители и переменные внутри этого каталога, и вы можете называть их как _mixins.scss, _colors.scss и т. Д.
типы
Этот каталог содержит ваши типы потоков. Вы можете создавать файлы типа base.types.js и redux.types.js внутри этого каталога, которые будут содержать типы для определенных частей ваших приложений.
routes.js
Этот файл содержит все маршруты вашего приложения. Как вы можете видеть в следующем Gist.
utils.js
Этот файл содержит все функции, которые используются разными функциями, службами и компонентами вашего приложения.
Заключение
Это файловая структура, которую я использовал для разработки различных приложений React, и она очень полезна для меня и позволяет писать более чистый код. Опять же, это только мое мнение, я не говорю, что это лучший способ, и нет другого способа сделать это. Это всего лишь мое мнение, и я разработал эту структуру после обзора различных структур, которые люди используют для React. Я потратил много времени на создание этой структуры, и она мне очень помогла во многих проектах.
Обработка Twitter:
