Сегодня-завтра поищу дизайн для проекта

Routing в React: Часть 2

Всех с наступающим❤️

Данный видео-урок также опубликован в Дзен👇.

Зацените обновочку🔥

Друзья! Хочу поздравить всех вас с наступающим новым годом! Желаю счастья, любви, достатка, ну конечно же и деньжат побольше)) В новом году вас ждёт очень годный контент, помимо мессенджера планируются более крупные и масштабные проекты, без вашей поддержки которые мне не реализовать. Всех очень сильно люблю, с праздником родные❤️

Самые внимательные в конце могли заметить, что после заполнения формы placeholder возвращается обратно. Это неудобно и некрасиво. Даю вам время подумать.

Это одна из недавних тем, которую мы проходили.

Сегодня выложу решение проблемы🔥

Подписчик справился с данной проблемой, не использовав React!

Тестовый метод: input:not(:placeholder-shown) позволяет проверять наличие символов в input прямо в CSS.

❤️ - выкладываю исходник проекта.

Интересна рубрика, где я буду делать красивые элементы в вёрстке? - ❤️

Приступаю готовить контент для YouTube🔥 Ждёте?)

Работаем с формами

Выше я показал простейшую форму авторизации на сайте. Как же получить данные, которые находятся в ней?

Есть 2 способа решения данной задачи. Сегодня разберём один из них.

👉 useState. Вы не ослышались, это состояния. В первом уроке я рассказывал, что это локальное хранилище с временными данными. Кому непонятна данная тема вот ссылка на пост: https://t.me/reactim/113.

Реализация:

import { useEffect, useState } from 'react'
import styles from './Form.module.css'

export const Form = () => {


  const [form, SetForm] = useState({ email: '', password: '' })

  const change = (el, value) => {
    el.preventDefault()

    value === 'email' ? SetForm({ ...form, email: el.target.value }) : SetForm({ ...form, password: el.target.value })
  }

  useEffect(() => {

    console.log(form)

  }, [change])

  return (

    <div className={styles.wrap}>

      <span className={styles.title}>Авторизация</span>

      <form className={styles.form}>

        <div className={styles.email}>
          <input placeholder=''
            onChange={el => change(el, 'email')}
            value={form['email']}
          />
          <span>Email</span>
        </div>


        <div className={styles.password}>
          <input placeholder=''
            onChange={el => change(el, 'password')}
            value={form['password']}
          />
          <span>Password</span>
        </div>

        <button className={styles.submit} type='submit'>Вход</button>
      </form>
    </div>
    
  )
}

✅ В следующих уроках покажу второй способ, который уменьшит и упростит наш код!

Почему useForm лучше useState?

Сегодня выпущу гайд по работе с react-hook-form.

✅ Возможности. useForm обладает огромным доп. функционалом, которого нет у useState.

✅ Производительность. Используя useForm, код становится свободней и читабельней. А это значит, что серверу понадобится гораздо меньше времени для считывания файла.

✅ Комфорт. Хук позволяет производить настройку "под себя". Например: в useState отслеживать изменения input мы можем указав "onChange" в каждом теге. В useForm этого делать не нужно. Данный параметр можно указать один раз прямо в настройках хука, и всё будет работать также!

❤️ за старания :)

Самый быстрый гайд по react-hook-form.

1️⃣ Установка. В терминале пишем: yarn add react-hook-form.

2️⃣ Импортируем useForm.

import { useForm } from 'react-hook-form'

3️⃣ Настраиваем useForm.

reset - очищает все input.
handleSubmit - получает данные формы.
register - оборачивает каждое значение input в объект.

const { reset, handleSubmit, register } = useForm({ mode: 'onSubmit' })

4️⃣ Оборачиваем input.

import styles from './Form.module.css'
import { useForm } from 'react-hook-form'

export const Form = () => {

  const { reset, handleSubmit, register } = useForm({ mode: 'onSubmit' })

  const change = data => {
    console.log(data)
    reset()
  }

  return (

    <div className={styles.wrap}>

      <span className={styles.title}>Авторизация</span>

      <form className={styles.form} onSubmit={handleSubmit(change)}>

        <div className={styles.email}>
          <input placeholder=''
            {...register("email", { required: true })}
          />
          <span>Email</span>
        </div>


        <div className={styles.password}>
          <input placeholder=''
            {...register("password", { required: true })}
          />
          <span>Password</span>
        </div>

        <button className={styles.submit} type='submit'>Вход</button>
      </form>
    </div>
    
  )
}

Код стал гораздо меньше и красивее, не так ли?🔥

Нужен видео-урок по данной теме?

"❤️" - да.
"🔥" - в посте всё понятно.

План реализации мессенджера:

1. Меню
2. Регистрация
3. Добавления в друзья
4. Реализация чата
5. Прочий доп. функционал(Настройки, статистика в профиле, поиск по чатам, онлайн/оффлайн)

Stack: React, Express, Socket, JWT(может быть, тк регистрацию я могу сделать и на чистом реакте через Context)

Если есть идеи по дополнительным функциям пишите в комментариях👇

Канал создан, сегодня выпущу первое видео❤️