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

Что такое Redux Auth Starter?

Redux auth starter — это шаблон Create React App (CRA), который предварительно настроен со всеми необходимыми зависимостями и настроен для создания масштабируемого приложения SaaS с помощью одной команды.

Почему бы не создать приложение React?

Если нам нужно разработать приложение для реагирования, большинство из нас начинают разрабатывать приложение для реагирования с Создать приложение для реагирования (CRA). CRA имеет множество функций, таких как перезагрузка, оптимизированный пакет, поставляется с одной зависимостью, ESlint, тестирование и простота обслуживания. Но достаточно ли этих функций для создания масштабируемого приложения SaaS? Посмотрим

Для базового приложения SaaS нам нужен доступ к API, будет несколько компонентов, локальное состояние и глобальное состояние, аутентификация, маршруты, хороший пользовательский интерфейс и UX.

При использовании CRA нам нужно настроить вышеперечисленные вещи вручную, и эта конфигурация также требует больше времени, поэтому нам нужно делать это каждый раз, когда мы разрабатываем новое приложение с нуля. Чтобы преодолеть эти недостатки, я разработал CRA-шаблон redux-auth-starter. Где вы можете преодолеть вышеперечисленные вещи, выполнив одну команду.

Преимущества Redux Auth Starter

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

Redux: контейнер с предсказуемым состоянием для приложений JS

2. Настройка общедоступных и частных маршрутов с базовой аутентификацией с использованием React-Router.

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

3. Предустановлен Ant Design для компонентов пользовательского интерфейса.

Ant Desing — это пользовательский интерфейс корпоративного класса, разработанный для веб-приложений инабор готовых высококачественных компонентов React.

4. Клиент Axios с помощью глаголов GET, POST, PATCH, DELETE API.

Предварительно настроенные помощники для доступа к API с помощью Axios.

5. Абсолютный импорт

No need use ../../../.. to import your components

6. Базовая структура папок с легкой настройкой.

├── README.md
├── jsconfig.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── Config
│   │   ├── axiosClient.js
│   │   └── constants.js
│   ├── components
│   │   ├── Dashboard.js
│   │   ├── LoginPage.js
│   │   └── Users.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── redux
│   │   ├── Authenticate
│   │   │   ├── actions.js
│   │   │   ├── reducer.js
│   │   │   └── saga.js
│   │   ├── rootReducers.js
│   │   ├── rootSaga.js
│   │   └── store.js
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock

7. Sass включен. Вы можете использовать все возможности sass.

Sass — самый зрелый, стабильный и мощный язык расширений CSS профессионального уровня в мире.

8. Имитация аутентификации с помощью reqres.

9. ESLint с пользовательским файлом конфигурации

ESLint статически анализирует ваш код, чтобы быстро находить проблемы.

10. Добавлен файл .env

Переменные среды внедряются во время сборки

11. Запустив одну команду

yarn create react-app your-project-name --template redux-auth-starter

Or

npx create-react-app your-project-name --template redux-auth-starter

Используйте redux auth starter, чтобы ускорить разработку.