Лучший способ структурировать реагировать проекты

Автор оригинала: FreeCodeCamp Community Member.

Привет всем! Многие из электронных чернил уже пролились на относительно более легкие сборы «делая x в реакции» или «с использованием реагирования с технологией X».

Таким образом, вместо этого я хочу поговорить о переживании, которые у меня были строительные фабрики с нуля на Delighthat И у моих предыдущих компаний.

Эти проекты требуют более глубокого понимания реагирования и расширенного использования в условиях производства.

Вступление

В двух словах сложный проект реагирования должен быть структурирован таким образом. Хотя я использую NextJS в производстве, эта структура файлов должна быть довольно полезна в любой настройке реагирования.

src
|---adapters
|---contexts
|---components
|---styles
|---pages

Примечание. В приведенной выше структуре файла активов или статические файлы должны быть помещены в любой вариант публично * Папка для вашей рамки есть. *

Для каждого из вышеуказанных папок давайте обсудим их в порядке приоритета.

1. адаптеры

Адаптеры Разъемы вашего приложения с внешним миром. Любая форма вызова API или взаимодействия Websocket, которое должно произойти, чтобы обмениваться данными с внешним обслуживанием или клиентом, должно произойти в самом адаптере.

Существуют случаи, когда некоторые данные всегда передаются между всеми адаптерами – например, совместным использованием файлов cookie, базового URL и заголовками на вашем адаптезе AJAX (XHR). Они могут быть инициализированы в папке XHR, а затем импортируются внутри других адаптеров, которые можно использовать дальше.

Эта структура выглядит так:

adapters
|---xhr
|---page1Adapter
|---page2Adapter

В случае Axios вы можете использовать Axios.Create Чтобы создать базовый адаптер и либо экспортируйте этот инициализированный экземпляр, либо создайте различные функции для Get, Post, Patch и Delete, чтобы аннотация его дальше. Это выглядит так:

// adapters/xhr/index.tsx

import Axios from "axios";

function returnAxiosInstance() {
  return Axios.create(initializers);
}

export function get(url){
  const axios = returnAxiosInstance();
  return axios.get(url);
}

export function post(url, requestData){
  const axios = returnAxiosInstance();
  return axios.post(url, requestData);
}

... and so on ...

После того, как вы будете готовы к базовому файлу (или файлам), создайте отдельный файл адаптера для каждой страницы или каждый набор функциональных возможностей, в зависимости от того, насколько сложна ваше приложение. Хорошо называемая функция делает очень легко понять, что делает каждый вызов API и что он должен выполнить.

// adapters/page1Adapter/index.tsx

import { get, post } from "adapters/xhr";
import socket from "socketio";

// well-named functions
export function getData(){
  return get(someUrl);
}

export function setData(requestData){
  return post(someUrl, requestData);
}

... and so on ...

Но как эти адаптеры будут любого использования? Давайте узнаем в следующем разделе.

2. Компоненты

Хотя в этом разделе мы должны говорить о контекстах, я хочу сначала поговорить о компонентах. Это необходимо понять, почему требуется контекст (и необходим) в сложных приложениях.

Компоненты Жизненные кровь вашей заявки. Они будут держать пользовательский интерфейс для вашего приложения, а иногда могут удерживать бизнес-логику, а также любое состояние, которое должно быть сохранено.

В случае, если компонент становится слишком сложным для экспрессии бизнес-логики с вашим интерфейсом UI, приятно иметь возможность разделить его в отдельный файл BL.TSX, причем ваш root index.tsx импортирует все функции и обработчики от нее.

Эта структура выглядела так:

components
|---page1Components
        |--Component1
        |--Component2
|---page2Component
        |--Component1
               |---index.tsx
               |---bl.tsx

В этой структуре каждая страница получает свою собственную папку внутри компонентов, так что легко выяснить, какой компонент влияет на то, что.

Также важно ограничить объем компонента. Следовательно, компонент должен использовать только адаптеры Для обработки данных есть отдельный файл для сложной бизнес-логики и сосредоточиться только на части пользовательской интерфейсы.

// components/page1Components/Component1/index.tsx

import businessLogic from "./bl.tsx";

export default function Component2() {
  
  const { state and functions } = businessLogic();

  return {
    // JSX
  }
}

Пока файл BL только импортирует данные и возвращает его:

// components/page1Components/Component1/bl.tsx

import React, {useState, useEffect} from "react";
import { adapters } from "adapters/path_to_adapter";

export default function Component1Bl(){
  const [state, setState] = useState(initialState);

  useEffect(() => {
    fetchDataFromAdapter().then(updateState);
  }, [])
}

Однако есть проблема, которая распространена во всех сложных приложениях. Государственное управление и как поделиться состоянием между далекими компонентами. Например, рассмотрим следующую структуру файла:

components
|---page1Components
        |--Component1
               |---ComponentA
|---page2Component
        |--ComponentB

Если некоторое состояние должно быть передано на компонент и B в приведенном выше примере, он должен быть передан через все промежуточные компоненты, а также любые другие компоненты, которые хотят взаимодействовать с государством.

Чтобы решить это, их являются несколько решений, которые можно использовать как Redux, Easy-Cory и React Context, каждый из которых имеет свои собственные плюсы и минусы. Как правило, контекст Ract должен быть «достаточно хорош», чтобы решить эту проблему. Мы храним все файлы, связанные с контекстом в контексты Отказ

3. Контексты

контексты Папка является голой минимальной папкой, содержащей только состояние, которое необходимо поделиться на этих компонентах. Каждая страница может иметь несколько вложенных контекстов, с каждым контекстом передавать только данные вперед в направлении вниз. Но избегать сложности, лучше всего иметь только один файл контекста. Эта структура выглядит так:

contexts
|---page1Context
        |---index.tsx (Exports consumers, providers, ...)
        |---Context1.tsx (Contains part of the state)
        |---Context2.tsx (Contains part of the state)
|---page2Context
        |---index.tsx (Simple enough to also have state)

В приведенном выше случае, поскольку Page1 Может быть немного сложнее, мы разрешаем некоторое вложенный контекст, передавая дочерний контекст как ребенок для родителя. Однако, как правило, один index.tsx Файл, содержащий состояние и экспортирующие соответствующие файлы должны быть достаточно.

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

Контекст разрешено импортировать из адаптеры Чтобы получить и реагировать на внешние эффекты. В случае контекста RACT, поставщики импортируются внутри страниц, чтобы поделиться состоянием во всех компонентах и что-то вроде упреждающий текст используется внутри этих Компоненты Чтобы иметь возможность использовать эти данные.

Переезд на конечную большую головоломку, Страницы Отказ

4. Страницы

Я хочу избежать смещения на рамки для этой части, но в целом, имея определенную папку для компонентов на уровне маршрута, является хорошей практикой.

GATSBY & NextJS обеспечивают все маршруты в папке с именем Страницы Отказ Это довольно читаемый способ определения компонентов уровня маршрута, и имитируя его в вашем приложении CRA, также приведет к лучшему читаемости кода.

Централизованное местоположение для маршрутов также помогает вам использовать функциональные возможности «Перейти к файлу» большинства IDES, переходя в файл с помощью (CMD или CTRL) + нажмите на импорт.

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

Однако можно импортировать поставщики контекста внутри вашей страницы, чтобы дочерние компоненты могли потреблять его. Или, в случае NextJS, напишите несколько серверов, который может передавать данные к вашим компонентам, используя getserversideprops или getstaticprops.

5. Стили

Наконец, мы приезжаем в стиль. Хотя мой путь – это просто встраивать стили внутри пользовательского интерфейса, используя решение CSS-js, как стилизованные компоненты, иногда полезно иметь глобальный набор стилей в файле CSS.

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

Итак, вы можете хранить все эти файлы CSS внутри Стили папка, и импортируйте или ссылку на них свободно от куда угодно.

Это были мои мысли. Не стесняйтесь по электронной почте, если вы хотите обсудить что-то или иметь больше входов на то, как это может быть улучшено!

Для дальнейших обновлений или обсуждений вы можете следовать за мной в Twitter здесь Отказ

Моя последняя статья о FreeCodeCamp была написана на том, как вы можете начать работу с DENO, создавая URL-норм, который вы можете прочитать здесь.