Пример страницы Входа/Регистрации на React

LoginPage — это веб-приложение, которое предоставляет пример страницы входа и регистрации с использованием React и SCSS. Это простой и наглядный пример для тех, кто хочет понять, как работает аутентификация пользователей в React-приложениях, а также как организовать стилизацию с помощью SCSS.

Функционал

• Авторизация с проверкой логина и пароля.
• Регистрация пользователей с проверкой совпадения паролей.
• Адаптивный дизайн с использованием SCSS.
• Маршрутизация с использованием [ICODE]react-router-dom[/ICODE].
• Простое управление состоянием с использованием хуков [ICODE]useState[/ICODE].

Установка

Необходимые зависимости
Перед установкой убедитесь, что у вас установлены следующие инструменты:

• Node.js (версия 16.20.0 или выше)
• npm (версия 8.19.4 или выше)

Инструкция по установке

1. Клонирование репозитория

git clone https://github.com/yourusername/my-react-project.git

cd my-react-project

Код

git clone https://github.com/yourusername/my-react-project.git



cd my-react-project

2. Установка зависимостей
После клонирования репозитория установите все необходимые зависимости с помощью npm:

npm install

Код

npm install

Запуск

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

npm start

Код

npm start

Приложение будет запущено на http://localhost:3000/ , и любые изменения в исходном коде приведут к автоматической перезагрузке страницы.

Запуск в продакшн

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

npm run build

Код

npm run build

Эта команда создаст оптимизированную сборку приложения в папке build. Теперь вы можете развернуть это приложение на любом статическом хостинге, например, Netlify или Vercel .

Зависимости

Основные зависимости, используемые в проекте:

• react: 18.2.0
• react-dom: 18.2.0
• react-router-dom: 6.14.1
• sass: 1.64.2

Скрипты npm

• npm start

  Код

  npm start

  — Запускает приложение в режиме разработки.
• npm run build

  Код

  npm run build

  — Собирает приложение для продакшена в папку
  build

  Код

  build

  .
• npm test

  Код

  npm test

  — Запускает тесты (если добавлены).

Репозиторий: https://github.com/reques6e/LoginPageReactExample