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

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

Они также представили шаблонный шаблон на основе cli под названием create-react-app, и мы все очень благодарны ему за это. Если бы не они и этот святой Грааль, мне бы пришлось сидеть и вручную рыться в большинстве доступных библиотек, чтобы найти нужные, необходимые для настройки надежного и готового к использованию стандартного шаблона, который: по всей вероятности, не вернется в будущем, чтобы причинить мне большую боль. Вот где первоначальная конфигурация оказывается столь важной.

Create-react-app - достаточно хорошая среда, чтобы начать работу с React. Но что, если мы хотим большего? Думаю об этом. Что делать, если вам нужны уже добавленные возможности маршрутизации? Что, если вы хотите использовать современную библиотеку управления состоянием для управления всей бизнес-логикой, связанной с вашим приложением, в то время как ваш интерфейс отказывался ломаться? Ах. Принятие желаемого за действительное. Верно?

Неправильно. Это довольно просто, и я объединил вместе всего несколько часов тяжелой работы, чтобы представить вам всю легко работающую среду программирования реагирования, которая может помочь вам начать кодирование вашего, как я уже упоминал, дальновидного приложения. Прямо вверх. Тогда все в порядке. Давайте начнем.

Правильные ингредиенты, правильное блюдо

Каждое отличное блюдо зависит от используемых ингредиентов. Гордон Рэмси определенно согласился бы со мной в этом. Хотя я бы предпочел не слышать от него. Дело в том, что прежде чем я подам вам свой хорошо приготовленный шаблон реагирования (насколько мои предположения касаются), позвольте мне дать вам представление об ингредиентах, которые были использованы при создании этого шаблонного шаблона. Обещаю, что список относительно невелик. Вот оно:

  1. React: React - это библиотека JavaScript для создания пользовательских интерфейсов. Он был разработан Facebook и стал широко популярным фреймворком для интерфейсной разработки. Кстати, у него более 94 тыс. + звезд на Github. Недавно он получил лицензию MIT. (Мои приветствия здесь не могут быть выражены словами)
  2. Redux: Redux описывается как контейнер с предсказуемым состоянием для приложений JavaScript. Он может легко синхронизироваться практически с любой структурой JavaScript и даже с базовыми приложениями на основе ванильного JavaScript. Это помогает отделить бизнес-логику приложения от функциональных компонентов пользовательского интерфейса, чтобы обеспечить лучшую модульность и функции отладки.
  3. React-Router: это часть функции реагирования, которая позволяет пользователю перемещаться между компонентами и является сердцем и ядром реагирующей навигации в Интернете. Используемая версия - 4.2.2, одна из последних версий. С версии 3 до версии 4 было внесено много изменений, и мы добавили ее, чтобы использовать все новые и очень интересные функции.
  4. Create-react-app: Create-react-app - это внутренний шаблон конфигурации реакции, доступный всему сообществу разработчиков через Facebook. Как говорится в документации, он предоставляет среду разработки без конфигурации сборки. Не нужно возиться. Просто код.

Хватит разговоров. Пора показать вам код.

Правильная реакция - гласит кодекс

Здесь вы можете найти окончательно настроенный код шаблонного шаблона.



tarique93102 / react-redux-starter-template
react-redux-starter-template - Шаблон react-redux с регистрацией активности для любых глобальных изменений состояния и… github.com



Клонируйте или скачайте, установите необходимые модули и вуаля. Тебе хорошо идти. Но ждать. Престиж всегда является важнейшей частью выступления. Почему я раскрываю это раньше? Ответ прост. Я пытаюсь привлечь ваше внимание к месту назначения, прежде чем я начну рассказывать о путешествии. Ах. Иногда умные идеи приходят ко мне из ниоткуда. Верно?

Путешествие начинается с добавления в вашу систему приложения create-react-app. Вы создаете приложение для реагирования и следуете за ним, устанавливая следующие библиотеки через диспетчер пакетов узлов.

  1. Реактив-редукс
  2. Реактив-роутер-дом

Базовое приложение create-response-app предоставляет следующую структуру кода.

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

Самое приятное в нем то, что он поставляется вместе с настроенными рабочими службами и файлами манифеста. Итак, угадайте, что? У вас уже включены функции прогрессивного веб-приложения. Все, что вам нужно сделать, это добавить желаемые значки и опубликовать приложение. Оболочка приложения будет кэшироваться по умолчанию, и вы можете увидеть, как ваше веб-приложение сияет как PWA.

Интеграция Redux

Прежде всего, мы интегрируем redux в наше приложение. В каталоге src мы создаем две папки, называемые действиями и редукторами, каждая из которых содержит файл index.js с их собственный. Это определяет базовую структуру каркаса редукции.

Добавлен пример редуктора, чтобы отобразить процесс, в котором библиотека реакции взаимодействует со стороной редукции. Начнем с создания простой функции в файле actions index.js, которая выглядит следующим образом.

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

Создав простое действие, мы продолжаем и создаем простой редуктор с именем default-reducer.js в уже существующем каталоге редуктора. Этот редуктор вызывает действие, запускающее Hello, и это место, где выполняется любой бизнес, связанный с полученными данными.

Примечание. Рекомендуется возвращать состояние из редукторов в объектном формате, поскольку это помогает поддерживать неизменность состояний.

Все различные редукторы объединены в один корневой редуктор, который создает глобальное состояние, готовое к использованию компонентами в последующем формате props, как это предпочитает react. Для справки файл index.js выглядит примерно так.

Помните, что combReducers из пакета redux остается отличным соусом и является неотъемлемой частью объединения нескольких редукторов для создания общего глобального состояния. Итак, у нас есть все настроено и готово к работе. Пора называть это и использовать.

Призыв Redux к действию

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

Первоначальная конфигурация начинается со страницы index.js в исходном каталоге, где мы инициализируем хранилище, в котором хранятся все глобальные изменения состояния, которые могут быть извлечены по мере продолжения работы с приложением. Мы объявляем объект Provider, который в основном связывает наш магазин с нашим основным приложением в ветви маршрута. (Psst! Это также то место, где вы должны заключить все свое приложение в BrowserRouter, чтобы дать вашему приложению возможность маршрутизировать различные компоненты)

Код выглядит примерно так. Я прокомментировал важные части, чтобы облегчить понимание.

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

Интегрированный компонент, вызывающий функцию из раздела действий, выглядит следующим образом.

Вуаля. У вас есть готовая конфигурация response-redux. Вы можете создать отдельную папку для компонентов и начать кодирование. Реактив-роутер уже добавлен. Вы можете пойти дальше и использовать это.

Заключение

Здесь у вас есть краткое изложение того, как работает конфигурация. Фактически, частичная мелочь. Если я пропустил какой-то важный момент, не стесняйтесь оставлять меня в комментариях. Я хотел бы знать, что вы думаете об этом дубле и, прежде всего, о моем уже настроенном шаблоне.

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

Продолжайте реагировать, писки!

Используйте код, чтобы изменить ситуацию. Мир.

✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ Дорожная карта веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .