Структурирование проектов React
Написание логики в CSS
25.02.2022
15 Полезных инструментов заполнителей для дизайнеров и разработчиков 🤩 🚀
01.03.2022
Поиск правильного пути для импорта компонента всегда является большой головной болью при разработке. Создание правильной структуры для вашего проекта React поможет вам и вашей команде во многих отношениях:
- Улучшение понимание того, как файлы связаны и работают вместе
- Обслуживание по мере масштабирования проекта, что позволяет избежать реструктуризации и изменения всех маршрутов и путей импорта.
- Более высокая производительность (лучше читабельность, поиск источника ошибок и т. д.)
- Четкая организация
Пример преобразования проекта React в чистую и практичную структуру.
Src
|
1 2 3 4 5 6 7 8 9 10 11 12 |
src ├── components ├── pages ├── slices ├── utils ├── App.js ├── index.js ├── routes.js └── store.js |
Как правило, App.js и index.js — это записи проекта React, route.js и store.js — записи React-router и Redux. Четыре папки выше — это основные кирпичики лего, в которых хранится код проекта.
Components
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
components ├── guards │ └── AuthGuard.js ├── layout │ └── NavBar │ ├── components │ │ ├── NavItem.js │ │ └── NavSection.js │ └── index.js ├── modules │ └── cards │ ├── ItemCard.js │ └── UserCard.js └── widgets └── buttons ├── PrimaryButton.js └── SecondaryButton.js |
/componentsсодержит глобальные и атомарные или модульные компоненты.
Глобальные компоненты похожи AuthGuard.jsи NavBarявляются родительскими компонентами всех страниц маршрутизатора. Например, AuthGuard.jsобходит компоненты, которым требуется аутентификация, проверяет, аутентифицирован ли пользователь, и переходит на страницу входа, если нет.
Элементарные компоненты, такие как PrimaryButton.js, — это самые маленькие компоненты пользовательского интерфейса, которые будут повторно использоваться в модулях и на страницах.
Модульные компоненты, такие UserCard.jsкак модули, которые содержат несколько виджетов в качестве компонента для выполнения определенной функции, которые повторно используются более чем на одной странице.
Pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
pages ├── Login.js └── account ├── index.js ├── profile │ ├── components │ │ ├── ProfileCover.js │ │ └── ProfileDetail.js │ └── index.js └── settings ├── components │ ├── AccountSettings.js │ └── NotificationSettings.js └── index.js |
/pagesсодержит страницы, показанные на веб-сайте. Он должен быть структурирован так же, как маршрутизатор, чтобы дать вам лучшее представление о том, как будет просматриваться реальный веб-сайт. Это также похоже на подход Next.js.
Например, внешняя папка /account— это вход на навигационную панель, которая включает в себя две страницы профиля и настроек. Каждая папка страницы имеет index.js(сама страница) и содержит модули, составляющие эту страницу в папке /components.
Очевидный способ организации кода заключается в том, что только повторно используемые компоненты находятся в /components, а компоненты, созданные для конкретной страницы, находятся в /pages/[page-name]/components.
Важно разделить компоненты на страницах, как только вы обнаружите, что их можно использовать повторно. Будет еще лучше, если вы воспользуетесь подходом «снизу вверх» и сначала создадите компоненты, если вы обнаружите, что они потенциально пригодны для повторного использования.
Slices
|
1 2 3 4 5 6 |
slices ├── itemSlice.js └── userSlice.js |
Теперь о логической стороне. Используем Redux Toolkit, который позволяет легко обрабатывать действия и редукторы Redux в одном месте, называемом «срез». Он также поставляется со многими полезными промежуточными программами, такими как createAsyncThunk.
Например, userSlice.jsобрабатывает аутентификацию пользователя следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'; import axios from 'axios'; import setAuthToken from '../utils/setAuthToken'; // login action export const login = createAsyncThunk('users/login', async (email, password) => { const config = { headers: { 'Content-Type': 'application/json' }, }; const body = JSON.stringify({ email, password }); try { const res = await axios.post('/api/user/login', body, config); await localStorage.setItem('token', res.data.token); return res.data; } catch (err) { console.log(err.response.data); } }); const userSlice = createSlice({ name: 'userSlice', initialState: { loading: false, user: null, }, reducers: {}, extraReducers: { // login reducers [login.pending]: (state) => { state.loading = true; }, [login.fulfilled]: (state, action) => { state.user = action.payload.user; setAuthToken(action.payload.token); state.loading = false; }, [login.rejected]: (state) => { state.loading = false; }, }, }); export default userSlice.reducer; |
/slicesв основном содержит все фрагменты Redux Toolkit. Вы можете думать о /slicesнем как о центральном месте, которое управляет глобальным состоянием и указанными функциями для его изменения. Каждый фрагмент, который обрабатывает аспект глобального состояния приложения, должен быть разделен на один файл.
Utils
|
1 2 3 4 5 6 |
utils ├── objDeepCopy.js └── setAuthToken.js |
Наконец, /utilsсодержит файлы, которые имеют дело с логикой для выполнения определенной функции. Это функциональные элементы, обычно используемые во многих местах проекта.
Например, setAuthToken.jsполучает токен и устанавливает или удаляет x-auth-tokenзаголовок axios. Он используется в userSlice.js выше.
Существуют и другие структуры, основанные на различных технологических стеках. Например, вы можете захотеть иметь /contextsи /hooksпапки, если вы используете useContext и useReducers вместо Redux.
Это лишь один из возможных стилей структуры среди множества вариантов. В конце концов, лучшая структура проекта React — это та, которая соответствует вашему стилю разработки. Поэтому пробуйте и у вас все получится.
Источник статьи: http://dev.to/
