Как использовать переменные среды в React
2 года назад·5 мин. на чтение
О различных способах доступа к переменным среды в React приложении
Если у вас нет опыта server side программирования, переменные среды могут показаться чем-то магическим. Этот недостаток знаний может поставить вас в тупик, когда вы закончите создавать приложения todo на localhost и попытаетесь создать продакшн сборку в первый раз.
Если вы хотите узнать, как использовать переменные среды в ваших собственных инструментах, или глубоко погрузиться в то, как переменные среды работают в React, вы можете продолжить чтение этой статьи. Но если вы ищете быстрое решение и используете Create React App, ознакомьтесь с документацией здесь. Пользователи NextJS, ознакомьтесь с документацией здесь.
Сломается он потому, что когда мы используем переменные окружения в клиентском коде, они на самом деле просто служат заполнителями, которые будут заменены при компиляции нашего кода. Проблема в том, что мы не сказали webpack скомпилировать эти переменные в реальные значения. Давайте сделаем это в нашем конфигурационном файле webpack с плагином
Способ 2: Использование файла
Вся идея здесь состоит в том, чтобы создать файл (называемый просто Создадим файл
Этот файл должен находиться в корневом каталоге проекта и называться
Обработка файла
Теперь нам нужен какой-то способ обработки файлов и их содержимого. Для этого мы собираемся использовать популярный npm пакет под названием dotenv. Dotenv широко используется (create-react-app использует его). Он будет получать переменные из нашего файла
Настройка активной среды с помощью
Мы собираемся использовать
Так как мы определили нашу среду в нашем
Проблема, которую мы решаем
Как объявить различные URL-адресов API для локальной разработки и для продакшн сборки.Как решить эту проблему
Использовать переменные среды. При работе с React переменные среды — это переменные, доступные через глобальный объектprocess.env
. Этот глобальный объект предоставляется вашей средой через NodeJS. И поскольку у нас нет NodeJS в браузере, нам понадобится webpack.
В этой статье рассмотрим два способа установки и использования переменных среды для ваших React проектов с помощью webpack: с помощью скриптов npm и с помощью файла .env
.
Способ 1: Использование скриптов npm для установки переменных среды
Во-первых, установите webpack и webpack-cli из npm:Перейдите в файлnpm install --save-dev webpack webpack-cli
package.json
, проверьте поле scripts
и найдите команды, которые запускают webpack. Вероятно, это будет выглядеть примерно так:
Давайте добавим некоторые переменные окружения с флагом{ // ... scripts: { "dev": "webpack --config webpack.config.dev.js", "build": "webpack --config webpack.config.build.js" } }
--env
в scripts
:
Мы добавили{ // ... scripts: { "dev": "webpack --env.API_URL=http://localhost:8000 --config webpack.config.dev.js", "build": "webpack --env.API_URL=https://www.myapi.com --config webpack.config.build.js" } }
--env.API_URL=
часть в обоих скриптах. Теперь запустите команду npm run dev
, перейдите к React компоненту и используйте process.env.API_URL
:
И тут проект должен сломаться.const App = () => <h1>{process.env.API_URL}</h1>;
DefinePlugin
:
const webpack = require('webpack'); // DefinePlugin это часть webpack, поэтому это require обязателен // возвращаем функцию из config файла // переменная `env` будет просто объектом { API_URL: 'http://localhost:8000' } // в ней будут содержаться все переменные среды, которые мы указали в package.json module.exports = (env) => { // этот объект это сама конфигурация webpack return { plugins: [ // добавим плагин в список плагинов new webpack.DefinePlugin({ `process.env.API_URL`: JSON.stringify(${env.API_URL}) }) ] }; };
DefinePlugin
требует, чтобы вы буквально определили свои «переменные среды».
Вы также можете применить .reduce
к переменным среды, чтобы получить объект:
Если вы запустите команду сейчас, все скомпилируется, и вашmodule.exports = (env) => { // создаем объект из переменных среды const envKeys = Object.keys(env).reduce((prev, next) => { prev[`process.env.${next}`] = JSON.stringify(env[next]); return prev; }, {}); return { plugins: [ new webpack.DefinePlugin(envKeys) ] }; };
process.env.API_URL
будет скомпилирован в правильный URL-адрес на основе переменной среды.
Способ 2: Использование файла .env
для установки переменных среды
Вся идея здесь состоит в том, чтобы создать файл (называемый просто .env
), заполненный переменными среды.
Чтобы защитить пароли и другие значения переменных среды, добавьте файл .env
в .gitignore
.
Фронтенд код будет ссылаться на одну и ту же переменную среды (process.env.API_URL
) в обеих средах (при локальной разработке и на продакшене), но поскольку вы определили разные значения в своих .env
, скомпилированные значения будут отличаться.
Создадим файл .env
Этот файл должен находиться в корневом каталоге проекта и называться .env
. Добавим переменную:
API_URL=http://localhost:8000
Обработка файла .env
Теперь нам нужен какой-то способ обработки файлов и их содержимого. Для этого мы собираемся использовать популярный npm пакет под названием dotenv. Dotenv широко используется (create-react-app использует его). Он будет получать переменные из нашего файла .env
и добавлять их в глобальный process.env
.
$ npm install --save-dev dotenv
Добавление переменных в проект React
Есть одна проблема. Dotenv работает только на стороне сервера. А мы хотим использовать переменные среды на стороне клиента, на фронтенде. В данном случае мы разрабатываем клиентскую часть. И dotenv нужна какая-то среда для фактического хранения переменных. Здесь поможет Webpack. Воспользуемся плагиномDefinePlugin
в нашей webpack конфигурации:
При необходимости проверьте параметры конфигурации dotenv в документации на github. Вызовconst webpack = require('webpack'); const dotenv = require('dotenv'); module.exports = () => { // dotenv вернет объект с полем parsed const env = dotenv.config().parsed; // сделаем reduce, чтобы сделать объект const envKeys = Object.keys(env).reduce((prev, next) => { prev[`process.env.${next}`] = JSON.stringify(env[next]); return prev; }, {}); return { plugins: [ new webpack.DefinePlugin(envKeys) ] }; };
.config()
в dotenv вернет объект со всеми переменными среды, установленными в вашем файле .env
через поле parsed
. Теперь давайте проверим наш React код:
И это работает! Он показывает значение переменной средыconst App = () => <h1>{process.env.API_URL}</h1>;
API_URL
, определенной в .env
.
Осталась только одна проблема: нам все еще нужно определить различные API_URL
для локальной разработки и продакшена.
Различные переменные среды для разных сред
Вся идея состоит в том, чтобы создать разные файлы.env
для разных сред и позволить webpack выбрать правильный файл .env
в зависимости от активной среды. Поэтому создайте два файла в корневом каталоге проекта:
.env
(содержит все переменные среды для продакшн).env.development
(содержит все переменные среды для локальной разработки)
.env
сопоставление имени среды. Общепринятой практикой является использование исходного файла .env
для продакшн сборки, поэтому мы не будем добавлять постфикс для продакшн .env
.
Настройка активной среды с помощью scripts
в package.json
Мы собираемся использовать scripts
(как мы это делали в методе 1), чтобы установить текущую среду в нашем package.json
:
{ "scripts": { "dev": "webpack --env.ENVIRONMENT=development --config webpack.config.dev.js", "build": "webpack --env.ENVIRONMENT=production --config webpack.config.build.js" } }
package.json
, теперь она доступна в нашей конфигурации webpack.
Следующим шагом будет переход к webpack конфигурации и дать ему использовать файл .env
, принадлежащий активной среде. Как и раньше, мы используем dotenv, но теперь мы указываем пользовательский path
в параметрах.
Эта вся необходимая настройка, но вы можете создать большеconst webpack = require('webpack'); const dotenv = require('dotenv'); const fs = require('fs'); // для проверки существования файла const path = require('path'); // для получения текущего пути module.exports = (env) => { // получаем корневой путь (предполагаем, что webpack config лежит в корне проекта) const currentPath = path.join(__dirname); // путь по умолчанию (будет использован для продакшена - `.env`) const basePath = currentPath + '/.env'; // склеиваем имя среды с именем файла для получения имени env файла const envPath = basePath + '.' + env.ENVIRONMENT; // проверяем существует ли env файл, если нет используем имя по умолчанию const finalPath = fs.existsSync(envPath) ? envPath : basePath; // устанавливаем параметр path в dotenv const fileEnv = dotenv.config({ path: finalPath }).parsed; // сделаем reduce, чтобы получить объект const envKeys = Object.keys(fileEnv).reduce((prev, next) => { prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]); return prev; }, {}); return { plugins: [ new webpack.DefinePlugin(envKeys) ] };
.env
файлов для большего количества сред (например, .env.staging
) по аналогии.Быстрый старт с React
год назад·7 мин. на чтение
React приложения состоят из компонентов. Компонент — это часть UI (пользовательского интерфейса), которая имеет собственную логику и внешний вид. Компонент может быть маленьким, как кнопка, или большим, как целая страница.
Содержание туториала по React
Эта страница познакомит вас с 80% концепций React, которые вы будете использовать ежедневно.
Во-первых, переместите состояние из
Когда вы нажимаете кнопку, срабатывает обработчик
Создание компонентов
React приложения состоят из компонентов. Компонент — это часть UI (пользовательского интерфейса), которая имеет собственную логику и внешний вид. Компонент может быть маленьким, как кнопка, или большим, как целая страница. React компоненты — это функции JavaScript, которые возвращают разметку:Теперь, когда вы объявилиfunction MyButton() { return <button>I'm a button</button>; }
MyButton
, вы можете вложить его в другой компонент:
Обратите внимание, чтоexport default function MyApp() { return ( <div> <h1>Welcome to my app</h1> <MyButton /> </div> ); }
<MyButton />
начинается с заглавной буквы. Так мы узнаем, что это React компонент. Имена React компонентов всегда должны начинаться с заглавной буквы, а теги HTML должны быть строчными.
Ключевые слова export default
определяют главный компонент в файле.
Написание разметки с помощью JSX
Синтаксис разметки, который вы видели выше, называется JSX. Это необязательно, но большинство проектов React используют JSX для удобства. Все рекомендуемые для локальной разработки инструменты, поддерживают JSX «из коробки». JSX строже, чем HTML. Вы должны закрыть теги типа<br />
. Ваш компонент также не может возвращать несколько тегов JSX. Вы должны обернуть их в общий родитель, например <div>...</div>
или пустую оболочку <>...</>
:
Если у вас есть много HTML для переноса в JSX, вы можете использовать онлайн-конвертер.function AboutPage() { return ( <> <h1>About</h1> <p> Hello there. <br /> How do you do? </p> </> ); }
Добавление стилей
В React вы указываете CSS класс с помощьюclassName
. Он работает так же, как атрибут class
в HTML:
Затем вы пишете правила CSS для него в отдельном файле CSS:<img className="avatar" />
React не предписывает, как добавлять файлы CSS. В самом простом случае вы добавите тег/* In your CSS */ .avatar { border-radius: 50%; }
<link>
в свой HTML. Если вы используете инструмент сборки или фреймворк, обратитесь к его документации, чтобы узнать, как добавить файл CSS в свой проект.
Отображение данных
JSX позволяет размещать разметку в JavaScript. Фигурные скобки позволяют вам «уйти обратно» в JavaScript, чтобы вы могли внедрить некоторую переменную из своего кода и отобразить ее пользователю. Например, это отобразитuser.name
:
Вы также можете «убежать в JavaScript» из атрибутов JSX, но вам нужно использовать фигурные скобки вместо кавычек. Например,return <h1>{user.name}</h1>;
className="avatar"
передает строку "avatar"
как CSS класс, но src={user.imageUrl}
считывает значение JavaScript переменной user.imageUrl
, а затем передает это значение как атрибут src
:
Вы также можете поместить более сложные выражения в фигурные скобки JSX, например, конкатенацию строк:return <img className="avatar" src={user.imageUrl} />;
В приведенном выше примереconst user = { name: 'Hedy Lamarr', imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg', imageSize: 90, }; export default function Profile() { return ( <> <h1>{user.name}</h1> <img className="avatar" src={user.imageUrl} alt={'Photo of ' + user.name} style={{ width: user.imageSize, height: user.imageSize, }} /> </> ); }
style={{}}
не является специальным синтаксисом, а является обычным объектом {}
внутри фигурных скобок style={ }
JSX. Вы можете использовать атрибут style
, когда ваши стили зависят от переменных JavaScript.
Рендеринг по условию
В React нет специального синтаксиса для написания условий. Вместо этого можно использовать те же приемы, что и при написании обычного JavaScript кода. Например, вы можете использовать операторif
для условного включения JSX:
Если вы предпочитаете более компактный код, вы можете использовать условный ? оператор. В отличие отlet content; if (isLoggedIn) { content = <AdminPanel />; } else { content = <LoginForm />; } return <div>{content}</div>;
if
, он работает внутри JSX:
Если вам не нужна ветвь<div>{isLoggedIn ? <AdminPanel /> : <LoginForm />}</div>
else
, вы также можете использовать более короткий синтаксис логического &&:
Все эти подходы также работают для указанных по условию атрибутов. Если вы не знакомы с некоторыми элементами этого синтаксиса JavaScript, вы можете начать с постоянного использования<div>{isLoggedIn && <AdminPanel />}</div>
if...else
.
Рендеринг списков
Вы будете полагаться на возможности JavaScript, такие как цикл for и метод массива map() для отображения списков компонентов. Например, допустим, у вас есть набор продуктов:Внутри вашего компонента используйте методconst products = [ { title: 'Cabbage', id: 1 }, { title: 'Garlic', id: 2 }, { title: 'Apple', id: 3 }, ];
map()
для преобразования массива продуктов в массив элементов <li>
:
Обратите внимание, чтоconst listItems = products.map((product) => ( <li key={product.id}>{product.title}</li> )); return <ul>{listItems}</ul>;
<li>
имеет атрибут key
. Для каждого элемента в списке вы должны передать строку или число, которое однозначно идентифицирует этот элемент среди его соседних элементов. Обычно ключ должен исходить из ваших данных, таких как идентификатор базы данных. React будет полагаться на ваши ключи, чтобы понять, что произошло, если вы позже вставите, удалите или измените порядок элементов.
const products = [ { title: 'Cabbage', isFruit: false, id: 1 }, { title: 'Garlic', isFruit: false, id: 2 }, { title: 'Apple', isFruit: true, id: 3 }, ]; export default function ShoppingList() { const listItems = products.map((product) => ( <li key={product.id} style={{ color: product.isFruit ? 'magenta' : 'darkgreen', }} > {product.title} </li> )); return <ul>{listItems}</ul>; }
Реакция на события
Вы можете реагировать на события, объявляя функции обработчиков событий внутри ваших компонентов:Обратите внимание, чтоfunction MyButton() { function handleClick() { alert('You clicked me!'); } return <button onClick={handleClick}>Click me</button>; }
onClick={handleClick}
не имеет круглых скобок в конце. Не вызывайте функцию обработчика событий: вам нужно только передать ее вниз. React вызовет ваш обработчик событий, когда пользователь нажмет кнопку.
Обновление компонентов
Часто необходимо, чтобы компонент «запоминал» некоторую информацию и отображал ее. Например, может быть, вы хотите подсчитать, сколько раз была нажата кнопка. Для этого нужно добавить состояние к компоненту. Во-первых, импортируйтеuseState
из React:
Теперь вы можете объявить переменную состояния внутри вашего компонента:
Отfunction MyButton() { const [count, setCount] = useState(0);
useState
вы получите две вещи: текущее состояние (count
) и функцию, которая позволяет вам его обновить (setCount
). Вы можете давать им любые имена, но принято называть их как [something, setSomething]
.
При первом отображении кнопки count
будет равен 0
, потому что вы передали 0
в useState()
. Если вы хотите изменить состояние, вызовите setCount()
и передайте ему новое значение. Нажатие на эту кнопку увеличит счетчик:
React снова вызовет функцию вашего компонента. На этот раз счет будетfunction MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return <button onClick={handleClick}>Clicked {count} times</button>; }
1
. Затем будет 2
. И так далее.
Если вы визуализируете один и тот же компонент несколько раз, каждый из них получит свое собственное состояние.
Обратите внимание, как каждая кнопка «запоминает» свое собственное состояние счетчика и не влияет на другие кнопки.import { useState } from 'react'; export default function MyApp() { return ( <div> <h1>Counters that update separately</h1> <MyButton /> <MyButton /> </div> ); } function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return <button onClick={handleClick}>Clicked {count} times</button>; }
Использование хуков
Функции, начинающиеся сuse
, называются хуками. useState
— это встроенный хук, предоставляемый React. Вы можете найти другие встроенные хуки в справочнике React API. Вы также можете написать свои собственные хуки, комбинируя существующие.
Хуки накладывают больше ограничений, чем обычные функции. Вы можете вызывать хуки только на верхнем уровне ваших компонентов (или других хуков). Если вы хотите использовать useState
в условии или цикле, создайте новый компонент и поместите его туда.
Обмен данными между компонентами
В предыдущем примере у каждойMyButton
был собственный независимый счетчик, и при нажатии каждой кнопки менялся только счетчик нажатой кнопки.
Однако часто вам потребуются компоненты для обмена данными и постоянного обновления вместе.
Чтобы оба компонента MyButton
отображали одно и то же число и обновлялись вместе, вам нужно переместить состояние от отдельных кнопок «вверх» к ближайшему родительскому компоненту, содержащему их все.
Теперь, когда вы нажмете любую кнопку, счетчик в MyApp
изменится, что изменит оба счетчика в MyButton
. Вот как это можно выразить в коде.
MyButton
в MyApp
:
Затем передайте состояние изexport default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <div> <h1>Counters that update separately</h1> <MyButton /> <MyButton /> </div> ); } function MyButton() { // }
MyApp
в каждый MyButton
вместе с общим обработчиком кликов. Вы можете передавать информацию в MyButton
с помощью фигурных скобок JSX, точно так же, как вы делали это раньше со встроенными тегами, такими как <img>
:
Информация, которую вы передаете таким образом, называется пропсами. Теперь компонентexport default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <div> <h1>Счетчики, изменяющиеся вместе</h1> <MyButton count={count} onClick={handleClick} /> <MyButton count={count} onClick={handleClick} /> </div> ); }
MyApp
содержит состояние счетчика и обработчик события handleClick
и передает их оба в качестве пропсов каждой из кнопок.
Наконец, измените MyButton
, чтобы он считывал пропсы, которые вы передали из его родительского компонента:
function MyButton({ count, onClick }) { return <button onClick={onClick}>Clicked {count} times</button>; }
onClick
. Проп onClick
каждой кнопки было установлено на функцию handleClick
внутри MyApp
, поэтому код внутри него выполняется. Этот код вызывает setCount(count + 1)
, увеличивая переменную состояния count
. Новое значение счетчика передается в качестве пропса каждой кнопке, поэтому все они показывают новое значение.
Это называется «подъем состояния вверх». Переместив состояние вверх, мы разделили его между компонентами.
Подробнее о всех случаях передачи данных между компонентами можно прочитать здесь.import { useState } from 'react'; export default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <div> <h1>Счетчики, изменяющиеся вместе</h1> <MyButton count={count} onClick={handleClick} /> <MyButton count={count} onClick={handleClick} /> </div> ); } function MyButton({ count, onClick }) { return <button onClick={onClick}>Clicked {count} times</button>; }