Предположим, вы создаете приложение, которое делает много запросов к серверной части по адресу http://localhost:3000. Теперь вы переходите к рабочей сборке, и URL-адрес изменяется на https://yasharyan.com после размещения на любом хостинге, который вы используете. Представьте себе боль перехода к каждой строке, в которой вы использовали URL-адрес локального хоста, и изменение его на новый URL-адрес. Было бы неплохо, если бы вы написали умный код и использовали глобальную переменную, чтобы просто набрать это:
${URL}/server-time-up/UTC/

Существует так много способов создания глобальных переменных в React JS, к которым можно получить доступ в каждом компоненте вашего веб-приложения. Расскажу о самых распространенных и простых.

Контекст предоставляет способ передачи данных через дерево компонентов без необходимости вручную передавать реквизиты на каждом уровне. Самое приятное в этом то, что нет необходимости устанавливать внешние зависимости. Контекст связан с React. У него простой подход. Допустим, у вас есть много компонентов, которые хотят использовать общую переменную. Вместо того, чтобы продолжать передавать его как свойство родительского компонента, его можно легко импортировать из контекста.

Как это сделать?

Для легко читаемого кода лучше создать каталог context в папке src вашего приложения для реагирования. Затем создайте файл CONTEXT_NAMEContext.js в этой папке.

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

import React, { createContext, useState } from 'react'
export const SampleContext = createContext()
const SampleContextProvider = (props) => {
    const [variableOne, setVariableOne] = useState('somethingRandom`)
    const Url = "http://localhost:3000"
    return (
         <SampleContext.Provider 
            value={{
                variableOne,
                Url
             }}>
               {props.children}
         </SampleContext.Provider>
    )
}
export default SampleContextProvider

Обратите внимание, что все переменные (и даже функции), которые необходимо сделать глобальными, передаются как values в операторе return. Теперь, когда контекст экспортирован, пришло время импортировать его в компоненты. Во-первых, перейдите в свой файл App.js и оберните все компоненты, которым вы хотите получить доступ к контексту. Все дочерние компоненты автоматически наследуют контекст.

import React, { Fragment } from 'react'
   import Component_One from './Component_One'
   import Component_Two from './Component_Two'
   import Component_Three from './Component_Three'
   import SampleContextProvider from '../contexts/SampleContext'
   const mainComponent = () => {
      return (
        <Fragment>
            <h1>This is a sample component</h1>
            <SampleContextProvider>
                <Component_One />
                <Component_Two />
                <Component_Three />
            </SampleContextProvider>
        </Fragment>
      )
   }

Обратите внимание, как все импортированные компоненты были заключены в <SampleContextProvider>? Все эти компоненты теперь имеют доступ ко всем значениям в контексте. Чтобы получить к ним доступ (использовать), вам нужно будет сделать следующее:

import React, { Fragment, useState, useContext } from 'react'
import SampleContext from '../contexts/SampleContext'
import axios from 'axios'
const Component_One = () => {
    const { variableOne, Url } = useContext(SampleContext)
    const [getServerTimeUp, setServerTimeUp ] = useState()
    axios.get(`${Url}/server-time-up/UTC/`)
    .then(res => {
       setServerTimeUp(res.data.time)
    }
    return (
        <Fragment>
             <h1>This is the value of variableOne: {variableOne}</h1>
             <p>{getServerTimeUp}</p>
        </Fragment>
    )
}

Таким образом, вы можете глобально устанавливать и получать переменные в любом нужном вам компоненте.

Использование файла .env

Если вы использовали NodeJS, вы, вероятно, использовали или слышали о файлах .env. Давайте добавим эту функцию в ваше приложение React.

Случай 1: Использование приложения create-реагировать

Если вы используете create-react-app для быстрой настройки приложения React, ваша работа по добавлению файла .env уже наполовину сделана.

  • Шаг 1: Создайте файл .env в корне вашего приложения React.

  • Шаг 2: Начните вводить переменные в файле .env. Помните, что вам нужно начинать каждую переменную с REACT_APP_, чтобы она работала; в противном случае ваши переменные не будут импортированы.
REACT_APP_DATABASE=redis
REACT_APP_FIRST_RELEASE=02Nov2019
REACT_APP_LAST_UPDATE=07Dec2020
  • Шаг 3: Импортируйте их в свой компонент, используя process.env.REACT_APP_
render() {
return (
  <div>
       <h1>
          We are using {process.env.REACT_APP_DATABASE}
       </h1>
  </div>
);
}

Случай 2: не использовать приложение create-реагировать

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

  • Шаг 1: Установите пакет dotenv в свой проект, используя npm install dotenv или yarn install dotenv
  • Шаг 2: Импортируйте файл в свой файл index.js, если вам нужна поддержка во всех компонентах, или только в определенном компоненте, если вы хотите, чтобы это было иначе. require('dotenv').config()
  • Шаг 3: Теперь вы можете выполнить тот же процесс, что и в случае 1, чтобы настроить переменные среды. Вам не нужно начинать каждую переменную с REACT_APP_, если вы не используете create-react-app.

Экспорт вручную из файла .js

Возможно, это самый простой способ иметь глобальные переменные.

  • Шаг 1: Перейдите в папку src и создайте новую папку с именем constants или с любым другим названием.

  • Шаг 2: Создайте несколько переменных в новом файле в указанной выше папке, например global.js, а затем экспортируйте их, чтобы их можно было импортировать в другие компоненты.
const Url = 'http://localhost:5000'
const themeDefault = 'dark'
const namesOfModes = ['dark', 'moonlight', 'eclipse', 'light']

export { Url, themeDefault, namesOfModes }
  • Шаг 3: Теперь пришло время импортировать эти константы в наши компоненты.
import React from 'react'
import { Url, themeDefault, namesOfModes } from '../constants/global'
const Component_Three = () => {
  return (
     <div>
       <h1>Current Theme: {themeDefault}</h1>
       <p>Homepage: {Url}</p>
     </div>
  )
}

Примечание. Вы будете возражать, что можно использовать такие пакеты, как Redux и RecoilJS, но позвольте напомнить вам, что это инструменты управления состоянием, и их не следует использовать только для хранения глобальных констант.

Спасибо

Надеюсь, вы нашли эту статью информативной и интригующей. Если это помогло вам, поставьте лайк 🧡 и поделитесь им с людьми, которым это может быть полезно. Также заходите на мои страницы Instagram и Facebook для получения дополнительной информации.

Подумайте о том, чтобы поддержать меня. https://buymeacoffee.com/yasharyan