Паттерны ReactJS видео-курс

Компоненты высшего порядка ReactJS (Higher-order components)

Паттерн Компонент высшего порядка назван по аналогии с функциями высшего порядка. Функция высшего порядка - это функция, которая либо принимает функцию как аргумент, либо возвращает функцию как результат. И то же самое можно сделать с компонентами. Функция (Higher Order component, HOC) может принимать компонент в качестве аргумента, что-то с ним делать и возвращать модифицированный (каким-то образом улучшенный) компонент. Смотреть на Rutube

Как использовать Компоненты высшего порядка ReactJS

Смотреть на Rutube

Паттерн Render Props в ReactJS

В этом видео поговорим о паттерне Render props в ReactJS, напишем примеры с разными кейсами, где render props полезны, посмотрим на проп children и передадим в него аргументы. Render prop - это функция, которая возвращает JSX, и эта функция используется как проп в компоненте. К пропсам с таким поведением принято добавлять префикс render (например, renderContent), чтобы отличать обычные пропсы от тех что возвращают JSX. Смотреть на Rutube

Паттерн Compound Components в React - Составные компоненты

Составные компоненты (Compound Components) в ReactJS - это такой паттерн, в котором взаимосвязанные компоненты используются вместе. Эти компоненты используют общее состояние для общения друг с другом. Сам Compound Component состоит из нескольких компонентов поменьше, которые обычно объединяют в единый namespace. В этом видео напишем компонент с использованием паттерна Compound Components. Смотреть на Rutube

Управляемые и неуправляемые компоненты React

Смотреть на Rutube

Формы

Формы позволяют нам принимать данные от пользователей и отправлять их на сервер для обработки. Это различные типы форм, такие как «Вход», «Регистрация» и т.д. В HTML5 есть элементы формы, такие как input, textarea, select, они поддерживают собственное внутреннее состояние в DOM, но в React мы поддерживаем состояние элементов формы внутри компонента, чтобы мы могли иметь полный контроль над элементами формы.

Что такое обработка форм

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

import React,{useState} from 'react';

function Form() {
  const [name,setName] = useState('');

  function handleNameChange(e){
    setName(e.target.value)
  }

  function handleSubmit(e) {
    e.preventDefault() // останавливаем перезагрузку страницы по умолчанию
    console.log(name);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input placeholder="Name" value={name}
        onChange={handleNameChange}/>
      <button>Submit</button>
    </form>
  )
}

В приведенном выше коде мы установили для атрибута value элемента input свойство name, а метод обработчика событий onChange - handleNameChange - запускается каждый раз, когда мы вводим некоторые данные в элемент input, и он обновляет свойство name с помощью метода setName, так что мы продолжаем синхронизировать значение с состоянием react. handleSubmit используется для отправки формы.

Элемент select

<select> помогает нам создать выпадающий список. Давайте посмотрим на пример того, как создать выпадающий список и обрабатывать данные.

import React,{useState} from 'react';

function FormSelect() {
  // начальное значение состояния - строка 'react'
  const [framework, setFramework] = useState('react');

  function handleChange(e){
    setFramework(e.target.value);
  };

  function handleSubmit(e){
    e.preventDefault();
    console.log(framework);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Choose your framework</h2>
      <select onChange={handleChange} value={framework}>
        <option value="react">React</option>
        <option value="angular">Angular</option>
        <option value="vue">Vue</option>
      </select>
      <button type="submit">Submit</button>
    </form>
  );
}

Здесь мы создали выпадающий список фреймворков в элементе <select> мы установили атрибут value для свойства framework и добавили обработчик событий onChange. Вложенные элементы <option> содержат атрибут value, который содержит данные, так что всякий раз, когда мы выбираем конкретный параметр, вызывается метод handleChange и изменяет значение свойства framework значением атрибута <option>. Вы видели, что элемент select также следует аналогичному шаблону, как и элемент input, так почему бы нам не создать пользовательский хук и повторно использовать его в каждом элементе формы?

Создание пользовательских хуков для обработки формы

import React, {useState} from 'react';

function useInput(initialValue) {
  const [value,setValue] = useState(initialValue);

  function handleChange(e) {
    setValue(e.target.value);
  }

  return [value,handleChange];
}

Здесь мы создали пользовательский хук под названием useInput, давайте его применим.

Использование пользовательского хука useInput()

function LoginForm(){

  const [email, setEmail] = useInput('');
  const [password, setPassword] = useInput('');

  function handleSubmit(e){
    e.preventDefault();
    console.log(email,password)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input placeholder="Email" type="email"
        value={email} onChange={setEmail}/>
      <input placeholder="password" type="password"
        value={password} onChange={setPassword}/>
      <button>Submit</button>
    </form>
  )
}

Теперь наш компонент LoginForm выглядит намного чище с помощью пользовательского хука useInput(). Точно так же мы можем использовать наш хук useInput с другими элементами формы.

Пример с Radio button

function RadioButtons() {
  const [data] = useState({male:"male",female:"female",other:"other"})
  const [gender, setGender] = useInput("");
  function handleSubmit(e) {
    e.preventDefault();
    console.log(gender);
  }

  return (
    <form onSubmit={handleSubmit}>
      <h1>Select Your Gender</h1>
      <div>
        <input type="radio" id={data.male} value={data.male}
          checked={data.male === gender} onChange={setGender}/>
        <label htmlFor={data.male}>Male</label>
      </div>
      <div>
        <input type="radio" id={data.female} value={data.female}
          checked={data.female === gender} onChange={setGender}/>
        <label htmlFor={data.female}>Female</label>
       </div>
       <div>
         <input type="radio" id={data.other}  value={data.other}
           checked={data.other === gender} onChange={setGender}/>
         <label htmlFor={data.other}>Other</label>
       </div>
     <button>submit</button>
    </form>
  )
}

Пример элемента Textarea

function Comments() {
  const [comment, setComment] = useInput("");
  function handleSubmit(e) {
    e.preventDefault();
    console.log(comment);
  }

  return(
    <form onSubmit={handleSubmit}>
      <textarea value={comment} onChange={setComment}/>
      <button>submit</button>
    </form>
  )
}