Полезные видео о фронтенде. Подпишись на Rutube

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

2 года назад·2 мин. на чтение

О паттернах в React проектах

Компоненты высшего порядка 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

Frontend React Видео-курс

Динамический рендеринг компонентов в React

год назад·1 мин. на чтение

В этой статье рассмотрим, как динамически добавлять или удалять компоненты в react.

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

// userA.js

import React from "react";

function UserA() {
  return (
    <div>
      <h1>This is user A</h1>
    </div>
  );
}

export default UserA;

// userB.js

import React from "react";

function UserA() {
  return (
    <div>
      <h1>This is user B</h1>
    </div>
  );
}

export default UserB;

Создание динамического компонента

Теперь нам нужно создать динамический компонент, который поможет нам динамически визуализировать другие компоненты на основе пропсов.

// Dynamic.js

import React from "react";
import UserA from "./userA";
import UserB from "./userB";

const components = {
  usera: UserA,
  userb: UserB
};

function DynamicComponent(props) {
  const SelectUser = components[props.user];
  return <SelectUser />;
}

export default DynamicComponent;

В приведенном выше коде мы сначала импортировали два компонента (UserA, UserB), а затем добавили их в объект components. Внутри DynamicComponent мы создали переменную SelectUser и вернули ее. Таким образом, если мы передадим usera в качестве пропса, то отрендерится компонент UserA. Если мы передадим userb в качестве пропса, отрендерится компонент UserB.

Использование динамического компонента

Давайте теперь воспользуемся нашим динамическим компонентом, импортировав его.

// App.js

import React, { useState } from "react";
import DynamicComponent from "./Dynamic";

function App() {
  const [user, changeUser] = useState("usera");
  return (
    <div>
      {/* изначально отрендерится компонент UserA */}
      <DynamicComponent user={user} />
      <button onClick={() => changeUser("usera")}>Switch user-a</button>
      <button onClick={() => changeUser("userb")}>Switch user-b</button>
    </div>
  );
}

export default App;

Frontend React