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)

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

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

Вышло новое видео🔥

Ютуб почему-то решил поужинать качеством, но надеюсь это временно.

Что такое useContext?

Этот хук схож с useState, он также хранит в себе определённые данные.

✅ Сходства:

👉 Локальное хранилище.

👉 Управление. Возможность изменения и удаления данных из любого файла.

❌ Различия:

👉 Удобство и масштабирование. useContext подходит для более крупной задачи(хранение данных авторизации и прочей тематики)

👉 Реализация в коде. useContext в больших случаях работает в связке с useState(благодаря нему мы передаём в контекст пропсы функций и объектов).

👉 Возможностей у useContext гораздо больше чем у useState. Мы можем оборачивать в контекст наши компоненты и блокировать, если не хотим распространять данные повсюду.

5❤️ = делаю гайд по реализации.

Самый быстрый гайд по useContext.

👉 Маршрутизация. В "src" создаём папку "providers". В ней создаём файл "Auth.provide.jsx".

👉 Импортируем createContext и useState.

import { useState } from "react"
import { createContext } from "react"

👉 Создаём тело контекста.

export const AuthContext = createContext()

export const AuthProvider = ({ children }) => {

    const [auth, SetAuth] = useState({}) //Эта та самая связка про которую я говорил выше
    
    return (

        <AuthContext.Provider value={{auth, SetAuth}}>

            { children }

        </AuthContext.Provider>
    )
}

👉 Подключаем провайдер в файле main.jsx.

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Router } from './Routers'
import { AuthProvider } from './providers/Auth.provide'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>

    <AuthProvider>

      <Router />

    </AuthProvider>
    
  </React.StrictMode>,
)

👉 Получаем данные или меняем их.

import { useContext } from "react"
import { Form } from "../reg-form/Form"
import styles from './Home.module.css'
import { AuthContext } from '../../../providers/Auth.provide'

export const Home = () => {

  const { auth, SetAuth } = useContext(AuthContext) //Работаем теперь как с useState, но через фигурные скобки

  console.log(auth)


  return (

    <div className={styles.wrap}>
      <Form />
    </div>
  )
 
}

Всё легко и просто❤️

структура проекта

Что такое кастомные хуки?

Интернет закидывает очень большим и ненужным потоком заумных слов. Объясняю на понятном языке.

➡️ Вернёмся к первым темам про хуки. Что мы про них знаем? Хуки - это методы(подобие функции), которые выполняют определённые действия.

➡️ Кастомные хуки - это те же хуки, но повторяющие уже нашу логику, а не react.

➡️ Они используются для вынесения загромождающего кода. Работают также как и простые функции(возвращают определённое значение).

5⚡️ = продолжаю данную тему.

Данное творение выглядит пока что так, сейчас занимаюсь бэком✅