Как сделать регистрацию и вход на React.js

React.js форма регистрации и входа с RestAPI
Метки: / /

В этой статье мы разберём как делается на React.js форма регистрации, и немного поговорим как сделать вход, думаю всем кто разрабатывает на React, это будет интересно.

Также стоит сказать, что по сути это продолжение предыдущих двух статей по разработки на Express.js, и если вы на нём разрабатываете, то вам точно они будут интересны.

Вот эти статьи:

  1. Регистрация на Express.js;
  2. Авторизация на Express.js с JWT;

Создание формы регистрации на React.js:

Первым делом разберём как сделать регистрацию, но стоит сказать, мы тут будем использовать принцип RestAPI, то есть у нас отдельно работает клиент и сервер, поэтому для отправки запросов нам нужно использовать AJAX запросы, а для это мы будем использовать библиотеку Axios.js.

Для того чтобы скачать эту библиотеку, нужно использовать команду NPM, вот что мы прописываем в терминал:

Ещё нам пригодиться библиотека для валидации формы, для этого мы будем использовать библиотеку validator.js, для скачивание так же используем NPM, вот что пишем в терминал:

После того как вы всё скачали, заходим в папку где у вас хранятся все React.js шаблону, как правило это  «Корневая_папка_проекта -> src -> components», и там создаём файл «register.js».

В начале рассмотрим что мы в него подключили:

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

Следующие подключаем библиотеку Axios и Validator,  о которых мы говорили чуть выше, ну и последние, это две константы DOMEN_SERVER, для хранения домена сервера и DOMEN_SITE, для хранения домена клиентской части, их создавать не обязательно в отдельном файле конфигурации, но полезно для удобства.

Когда мы всё подключили, создаём наш функциональный компонент, который тут же экспортируем, вот что пишем:

Теперь напишем пару функций для работы с регистрацией:

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

Потом создаём функцию, которая нужна для изменения состояния формы, во первых мы там используем метод event.persist(), которая позволяет получить доступ к событие асинхронным способом.

Дальше используем функцию setRegister(), которая нужна для изменения состояние, и тут вы можете заметить, что мы в качестве названия свойства используем название поля ы форме, поэтому атрибут name поля должен равен быть его состоянию.

Вторая функция которая тут есть, это submitChackin(), она уже отправляет данные на сервер, но перед этим мы проверяем поля с помощью библиотеки validator, сначала проверяем Email, потом совпадает ли пароль который изначальный и повторный, ну и проверяем сам пароль.

Если хоть одна ошибка сработала, то выводим её, через alert(), иначе отправляем данные на сервер, если и там случилась ошибка, то выводим её так же или если нет, то отправляем пользователя в форму для входа на сайт.

Последние что осталось, это рендер самой формы, вот что, вот как строиться рендер:

Тут на самом деле всё очень просто, как с обычной HTML формой, единственное отличие в том, что в качестве value используется одно из свойств состояния, вот и всё.

Теперь вы можете регистрировать пользователя.

Создание формы входа на React.js:

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

Выглядит это примерно таким образом:

Вот и вся разница.

Вывод:

В этой статье мы разобрали как делается на React.js форма регистрации и немного рассказали как сделать вход, думаю вам было интересно и полезно.

Если вам тут что то не понятно было, и у вас затруднения с JavaScript, то советую перейти по ссылке, там вы всё нужное узнаете.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Также рекомендую:

Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии