В последнее время я работал над приложением React-Redux под названием financial-widget. Мое приложение использует веб-токены JSON для аутентификации пользователей и позволяет пользователям запрашивать внешний API под названием Alpha Vantage для получения данных о запасах в реальном времени. Хотя я несколько раз читал документацию по React и Redux при создании этого приложения, мне потребовалось некоторое время, чтобы освоиться с разработкой React / Redux после работы в основном в рамках основанной на соглашениях (Ruby on Rails). Хотя я ни в коем случае не являюсь экспертом в разработке React / Redux, я хотел поделиться некоторыми вещами, которые я узнал во время работы над этим проектом, чтобы другие, кто плохо знаком с React / Redux dev, могли обойти некоторые из концептуальных проблем, с которыми я столкнулся в первый раз. начиная.

1. Используйте приложение create-react-app, чтобы сразу приступить к работе.

React написан на JSX. JSX - это смесь JavaScript и HTML. Поскольку браузеры не могут понимать чистый JSX, вам нужно будет преобразовать код JSX во что-то, что ваш браузер сможет понять. По этой причине вам необходимо включить инструкции о том, как браузер должен анализировать ваш JSX, и поэтому мы используем пакет под названием Webpack или Browserify, чтобы взять наш код JSX и подготовить его для браузера.

Понимание того, как настроить Webpack / Browserify, может сначала сбить с толку, и хотя в конечном итоге будет хорошей идеей научиться использовать эти инструменты, может быть неприятно увязнуть в этих сборщиках, когда вы взволнованы, чтобы сделать свой первый React приложение. Именно здесь на помощь приходит приложение create-response-app. Приложение create-response-app - это инструмент, разработанный Facebook, чтобы позволить разработчикам быстро и легко создавать приложения в экосистеме React. create-response-app использует Browserify и Webpack за кулисами, чтобы вы могли сгенерировать запасное, но функциональное приложение React из командной строки. Это потрясающий инструмент. Что еще лучше в create-react-app, так это то, что если вы в конечном итоге решите пойти своим путем с конфигурацией Webpack, вы можете извлечь свое приложение из create-react-app и настроить свою настройку по своему усмотрению. Я действительно ценю команду create-response-app, потому что она позволила мне очень быстро начать возиться с React. Чтобы начать работу с приложением create-response-app, просто откройте свой терминал и перейдите в локальный каталог разработки с помощью компакт-диска. Убедитесь, что у вас установлен диспетчер пакетов узлов (npm), и введите

npm -g install create-react-app

После того, как вы это сделаете, просто введите

create-react-app myApp

в свой терминал (где myApp - это то, что вы хотите, чтобы ваше приложение вызывалось), затем запустите

npm start

и дождитесь, пока ваше вновь созданное приложение React откроется в браузере. Теперь вы готовы приступить к созданию вещей с помощью React. Каждый раз, когда вы что-то меняете в своем коде, вы будете видеть, как браузер обновляет свои изменения. Это одна из моих любимых вещей в разработке React. Мне нравится, как React дает вам возможность быстро развернуть что-то, что хорошо выглядит и отлично работает. Я думаю, это здорово, что Facebook разработал инструмент create-react-app, чтобы способствовать более широкому и легкому внедрению экосистемы React для людей, которые в противном случае могли бы испугаться настройки Webpack и Browserify.

2. Рассмотрите возможность перехода на yarn с npm для вашего менеджера пакетов.

При разработке приложений React вы обнаружите, что иногда вам нужно установить определенные библиотеки кода, такие как redux или набор CSS, например react-uikit. Если вы, как и я, имеете опыт работы с RoR, вы заметите, что эти зависимости напоминают React-версию гемов, которые мы использовали для объединения в наш гем-файл во время разработки Rails. Вы можете найти список зависимостей, которые вы установили в файле package.json, в каталоге вашего приложения. Я знаю, что упоминал об использовании npm в предыдущем абзаце, но мне нравится использовать yarn для управления своими зависимостями React. Yarn - это оболочка для npm, которая имеет тенденцию устанавливать необходимые пакеты немного быстрее, чем npm, и с меньшим количеством складок. Чтобы получить пряжу, просто введите

npm -g install yarn

в свой терминал.

Теперь всякий раз, когда вы хотите установить зависимость кода, вы можете использовать большинство тех же команд, которые вы использовали раньше с npm, заменив npm на yarn следующим образом:

yarn install redux

или чтобы запустить сервер узла, вы можете ввести

yarn start

Чтобы создать производственную сборку вашего приложения, вы можете ввести

yarn build

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

3. Признайте разницу между состоянием ваших компонентов React и состоянием вашего хранилища Redux.

Этот пронумерованный элемент будет применяться только к вашей ситуации, если вы создаете приложение React-Redux. Определенно можно создать приложение React, используя другой инструмент для управления состоянием вашего приложения (например, Flux), но мне очень нравится Redux. Redux предоставляет контейнер JavaScript для управления состоянием ваших одностраничных приложений (SPA). Для тех, кто не знаком с интерфейсной разработкой, состояние вашего приложения описывает, как обстоят дела в любой момент выполнения вашей программы. Вы можете включить состояние в свою программу, используя шаблон проектирования на основе состояний. Это своего рода расплывчатое объяснение, поэтому я попытаюсь пояснить свою точку зрения на следующем примере:

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

Это начальное состояние вашего (упрощенного) приложения React.

const initialState = {
    isLoggedIn: false,
    isFetchingData: false
}

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

state = {
    isLoggedIn: true,
    isFetchingData: true
}

Хотя сами компоненты React имеют локальное состояние, оно отличается от общего состояния вашего приложения. Например, если у вас есть компонент кнопки с логическим значением для hasBeenClicked, ваша кнопка может не обязательно знать о состоянии вашего приложения в целом, которое имеет логические значения isLoggedIn и isFetchingData, о которых я говорил выше.

Redux предоставляет вам контейнер для управления состоянием, который называется хранилищем. Когда пользователь что-то делает, чтобы изменить состояние вашего приложения, это действие будет отправлено редуктором Redux. Если вы используете инструменты разработчика Redux, вы сможете увидеть действительно красивое дерево состояний, которое обновляется в реальном времени, когда вы взаимодействуете со страницей. Состояние и поток данных в React - это обширная тема, которую я здесь затронул лишь вкратце, но один вывод, который я сделал при создании своего первого приложения React, - это попытаться осознавать различия между локальным состоянием компонента и состоянием магазин Redux. Я настоятельно рекомендую прочитать документацию React и Redux несколько раз полностью, чтобы лучше понять, как React обрабатывает поток данных и как управлять состоянием в вашем SPA.

4. Возможно, вы захотите использовать промежуточное ПО для обработки асинхронных функций Javascript.

Документация React прекрасно описывает, как вы можете использовать методы жизненного цикла для отправки вызовов API в различные моменты выполнения вашей программы. Например, вы помещаете вызов API в ловушку жизненного цикла, такую ​​как componentDidMount, которая отправляет вызов API, а затем повторно визуализирует компонент после выполнения обещания. Однако, если вы хотите извлечь вызовы API из самих компонентов, чтобы сделать код DRYer, я рекомендую использовать промежуточное программное обеспечение, такое как redux-thunk в сочетании с Redux, для размещения вызовов API в файле actions.js. Это будет означать, что ваши вызовы API могут быть легко отправлены, когда пользователь взаимодействует с определенными элементами на странице, и вам не нужно полагаться на хуки жизненного цикла, такие как componentDidMount, для привязки вызовов API к компоненту. Redux-thunk - это один из вариантов, но есть много других промежуточных программ для обработки этой функции.

5. Обратитесь к другим разработчикам React, чтобы они продолжали расти как разработчик React.

Когда я впервые прочитал документацию по React, я нашел ее довольно плотной. Я никогда раньше не работал с такой структурой, как React, поэтому мне нужно было потратить немного времени, чтобы понять модульный подход, основанный на состоянии, который использует React. Мой путь изучения React был значительно улучшен, когда я обратился к другим разработчикам через онлайн-сообщество React. В сообществе Reactiflux на Discord есть много полезных людей, а также довольно сильное сообщество разработчиков, окружающих сообщество fullstackreact. Кроме того, на таких веб-сайтах, как stackoverflow, есть ответы на множество камней преткновения React. В целом, я считаю, что обучение доставляет больше удовольствия, если оно носит социальный характер, и, по моему опыту, сообщество React обычно является привлекательной и творческой группой людей.

Как всегда, если вы заметите какие-либо ошибки в этом сообщении блога или хотите, чтобы я расширил конкретную тему, сообщите мне об этом в комментариях.