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

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

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

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

Этот хук схож с 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>
    )
}

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

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

import React, { useState } from 'react';

const useTheme = (initialTheme = 'light') => {
  const [theme, setTheme] = useState(initialTheme);

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return {
    theme,
    toggleTheme
  };
}

const App = () => {
  const { theme, toggleTheme } = useTheme('light');

  return (
    <div className={theme}>
      <button onClick={toggleTheme}>Переключить тему</button>
    </div>
  );
}

На нашу продуктивность также влияет рабочее пространство. Поэтому очень важно уделить этому время. Определившись с IDE давайте её настроим под себя.

Также в настройках есть settings.json, в нём прописан ваш конфиг VSC. Свой прикрепил ниже👇

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

Ваше погружение в мир React не было бы полным без понимания одной из его ключевых концепций - виртуального DOM. Давайте вместе разберемся, что это такое и почему это имеет значение для создания мощных и отзывчивых веб-приложений.

Понимание виртуального DOM поможет вам создавать более эффективные и производительные веб-приложения в React.

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

import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query'

// Создаем экземпляр QueryClient
const queryClient = new QueryClient()

const App = () => {
  // Используем хук useQuery для получения данных
  const { isLoading, error, data } = useQuery('todos', async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos')
    return response.json()
  });

  if (isLoading) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      <h1>Todos</h1>
      <ul>
        {data.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}

// Оборачиваем наше приложение в QueryClientProvider для предоставления доступа к QueryClient
const WrappedApp = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  )
}