Стартер аутентификации 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
- Преднастроенный магазин, базовые действия и редукторы для аутентификации с помощью 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, чтобы ускорить разработку.