Применение стилей в React,Custom hooks, API

 import React, { useState, useEffect } from 'react'; 
 
// Компонент формы регистрации 
const RegistrationForm = () => { 
  const [name, setName] = useState(''); 
  const [email, setEmail] = useState(''); 
  const [password, setPassword] = useState(''); 
 
  const handleNameChange = (e) => { 
    setName(e.target.value); 
  }; 
 
  const handleEmailChange = (e) => { 
    setEmail(e.target.value); 
  }; 
 
  const handlePasswordChange = (e) => { 
    setPassword(e.target.value); 
  }; 
 
  const handleSubmit = (e) => { 
    e.preventDefault(); 
    // Отправка данных на сервер при помощи fetch 
    fetch('https://api.example.com/register', { 
      method: 'POST', 
      body: JSON.stringify({ name, email, password }), 
      headers: { 
        'Content-Type': 'application/json' 
      } 
    }) 
      .then((response) => response.json()) 
      .then((data) => { 
        // Обработка ответа от сервера 
        console.log(data); 
      }) 
      .catch((error) => { 
        // Обработка ошибок 
        console.error(error); 
      }); 
  }; 
 
  return ( 
    <form onSubmit={handleSubmit}> 
      <div> 
        <label htmlFor="name">Name:</label> 
        <input type="text" id="name" value={name} onChange={handleNameChange} /> 
      </div> 
      <div> 
        <label htmlFor="email">Email:</label> 
        <input type="email" id="email" value={email} onChange={handleEmailChange} /> 
      </div> 
      <div> 
        <label htmlFor="password">Password:</label> 
        <input type="password" id="password" value={password} onChange={handlePasswordChange} /> 
      </div> 
      <button type="submit">Register</button> 
    </form> 
  ); 
}; 
 
// Пользовательский хук, объединяющий useEffect и useState 
const useEffectWithState = (initialValue) => { 
  const [state, setState] = useState(initialValue); 
 
  useEffect(() => { 
    // Логика, выполняемая при изменении состояния 
    console.log('State updated:', state); 
  }, [state]); 
 
  return [state, setState]; 
}; 
 
// Компонент, использующий пользовательский хук 
const ExampleComponent = () => { 
  const [count, setCount] = useEffectWithState(0); 
 
  const handleIncrement = () => { 
    setCount(count + 1); 
  }; 
 
  return ( 
    <div> 
      <p>Count: {count}</p> 
      <button onClick={handleIncrement}>Increment</button> 
    </div> 
  ); 
}; 
 
// Компонент-контейнер, объединяющий форму регистрации и пример пользовательского хука 
const App = () => { 
  return ( 
    <div> 
      <h2>Registration Form</h2> 
      <RegistrationForm /> 
      <h2>Custom Hook Example</h2> 
      <ExampleComponent /> 
    </div> 
  ); 
}; 
 
export default App;