Инструменты React для SPA

👇 Link отличается от тега "a" тем, что позволяет переключать роуты без обновления страниц.

import { Link } from 'react-router-dom';

const MyComponent = () => {

  return (

    <div>

      <Link to="/some-page">Перейти на страницу</Link>
    
    </div>
  );
};

👇 useNavigate такой же как и Link, но для кнопок.

import { useNavigate } from 'react-router-dom';

const MyComponent = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    // Программная навигация с использованием useNavigate
    navigate('/another-page');
  };

  return (
    <div>
      {/* Обработчик клика, использующий программную навигацию */}
      <button onClick={handleClick}>Перейти на другую страницу</button>
    </div>
  );
};

Давайте уже добьём оставшиеся 3❤️ в закреплённом посте, буду делать контент вам в ленту🔥

Процесс запущен🔥

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

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>
    
  )
}

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