Что такое JSX в React

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

Новички в React, вероятно, путаются в том, почему мы пишем HTML внутри JavaScript.

React без JSX

Давайте напишем React код без использования JSX, чтобы мы могли лучше знать, почему мы используем JSX в React.
let h1 = React.createElement('h1',{style:{color:"green"}}," h1 element");
let p = React.createElement('p',{style:{color:"red"}},"p element");
let div = React.createElement('div',{className:"container"},h1,p);

ReactDOM.render(div,document.querySelector('#app'))
React.createElement(type,props,children) принимает три аргумента. type: Это означает тип HTML-элемента, который нам нужен. (Пример: h1, h2, p, div и т.д.) props: Любые пропсы, необходимые для этого элемента. children: Данные, которые нам нужно добавить внутрь элемента html (пример: обычный текст или дочерние элементы)

React с JSX

Теперь заменим приведенный выше код на код с JSX.
let  green = {color:"green"};
let red = {color:"red"};

let h1 = <h1 style ={green}>h1 element</h1>;
let p = <p style={red}>p element</p>;
let div = <div className="container">{h1}{p}</div>

ReactDOM.render(div,document.querySelector('#app'))
JSX, который мы пишем внутри React, часто преобразуется в JavaScript с помощью транспилятора babel.

Что такое JSX?

JSX позволяет нам писать HTML-синтаксис внутри JavaScript. Используя JSX, мы можем сделать наш код более читабельным. JSX используется не только в React, но и в некоторых других фреймворках.

Выражения в JSX

В JSX мы можем встраивать выражения JavaScript, обернув фигурными скобками { }.
let h1 = <h1> Odd number {2+3}</h1>
let users = ['user1', 'user2', 'user3']

let ul = (
  <ul>
    {users.map((user,i)=>(
      <li>{user}</li>
    ))}
  </ul>
)
В приведенном выше коде мы использовали метод map для перебора массива и создали три элемента li.

Атрибуты в JSX

Встроенные (инлайновые) стили

// объект
let greenColor = {color: "green"}

let h1 = <h1 style={greenColor}>This is heading</h1>
Для встроенного стиля нам нужно передать свойства стиля как объект внутри фигурных скобок, так как объект является выражением JavaScript. Мы также можем передать объект стиля непосредственно в фигурные скобки вместо использования дополнительной переменной.
let h1 = <h1 style={{color:"green"}}>This is heading</h1>

Внешние стили, использующие classNames

Нам нужно использовать className вместо обычного атрибута class, который мы используем в HTML, потому что внутри JavaScript уже присутствует ключевое слово class.
let h1 = <h1 className="header-h1">This is heading</h1>

Компоненты React

Компонент представляет собой многократно используемый фрагмент кода в React, который возвращает React элемент.
function Button(props){
    return <button>{props.name}</button>
}

Условные выражения в JSX

function ShowHide(props) {
  if(props.show) {
    return <button>Show</button>
  } else {
    return <button>Hide</button>
  }
}

ReactDOM.render(<ShowHide show="true" />,document.querySelector('#app'))
Мы можем упростить приведенный выше код, используя тернарный оператор.
function ShowHide(props){
  return <button>{props.show ? "Show" : "Hide"}</button>
}

Оператор spread в JSX

Предположим, нам нужно передать данные компоненту User с помощью пропсов.
function User(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <ul>
        <li>{props.email}</li>
        <li>{props.mobile }</li>
      </ul>
    </div>
  )
}

<User name="John" email="user@example.com" mobile={11233} />
Передадим те же пропсы с помощью оператора spread.
let user = {
  name: "John",
  email: "user@example.com",
  mobile: 11233
}

<User {...user} />

5 кастомных React хуков, которые улучшат ваш код

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

В этой статье рассмотрим несколько очень полезных React хуков.

1. Хук useWindowSize - хук для получения размера экрана

Я уверен, что в некоторых проектах, над которыми вы работали, вам нужно было получить ширину и высоту окна пользователя. Так вот, теперь у вас есть хук для этого, так что вы можете сделать это еще проще, чем раньше.
import { useState, useEffect } from "react";

interface WindowSize {
  width: number;
  height: number;
}

const useWindowSize = (): WindowSize => {
  const [windowSize, setWindowSize] = useState<WindowSize>({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return windowSize;
};
Этот хук может быть особенно полезен при реализации отзывчивого дизайна, когда по какой-то причине вам нужно запустить определенный код при определенных размерах. Более продвинутый вариант этого хука можно найти в статье “Хук useResize для отслеживания ширины экрана в ReactJS”.

2️. Хук useKeyPress - хук для определения нажатия клавиши

Следующий хук позволяет определить, когда нажата определенная клавиша. Это может вызвать события или действия, основанные на нажатой клавише. Например, для закрытия модального окна, отправки формы и т.д.
import { useState, useEffect } from "react";

const useKeyPress = (targetKey: string): boolean => {
  const [keyPressed, setKeyPressed] = useState(false);

  const downHandler = ({ key }: KeyboardEvent) => {
    if (key === targetKey) {
      setKeyPressed(true);
    }
  };

  const upHandler = ({ key }: KeyboardEvent) => {
    if (key === targetKey) {
      setKeyPressed(false);
    }
  };

  useEffect(() => {
    window.addEventListener("keydown", downHandler);
    window.addEventListener("keyup", upHandler);

    return () => {
      window.removeEventListener("keydown", downHandler);
      window.removeEventListener("keyup", upHandler);
    };
  }, []);

  return keyPressed;
};
Пример использования:
const closeModalKeyPress = useKeyPress("Escape");

3. Хук useInterval - хук для вызова функции setInterval

Этот хук позволяет вам использовать функцию setInterval в качестве хука. Как и функция setInterval, этот хук имеет множество применений, например, анимация, обновление данных через регулярные промежутки времени или даже установка таймера.
import { useState, useEffect, useRef } from "react";

const useInterval = (callback: () => void, delay: number | null) => {
  const savedCallback = useRef<() => void>();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    function tick() {
      savedCallback.current && savedCallback.current();
    }
    if (delay !== null && delay > 0) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    } else {
      tick();
    }
  }, [delay]);
};
Можно использовать этот хук следующим образом:
const [count, setCount] = useState(0);

useInterval(() => {
  setCount(count + 1);
}, 1000);

4. Хук useDebounce

Теперь мы поговорим о хуке, который выполняет функцию только после того, как пройдет определенное количество времени без ее вызова. Это полезно, например, для ограничения скорости вызовов API или обновления состояния при изменении ввода, например, когда вы набираете текст в поисковой строке.
import { useEffect, useRef } from 'react';

export function useDebounce(callback:Function, timeout: number = 200, deps: Array<any> = []) {
  const data = useRef({ firstTime: true });
  useEffect(() => {
    const { firstTime, clearFunc } = data.current;

    const handler = setTimeout(() => {
      if (clearFunc && typeof clearFunc === 'function') {
        clearFunc();
      }
      data.current.clearFunc = callback();
    }, timeout);

    return () => {
      clearTimeout(handler);
    };
  }, [timeout, ...deps]);
}

export default useDebounce;
Пример использования:
const [inputValue, setInputValue] = useState("");

useDebounce(() => {
  // вызов APIl
}, 500);

5️. Хук useThrottle

Throttle означает, что функция будет выполняться один раз за каждый заданный промежуток времени. Это может быть полезно для предотвращения быстрого запуска слишком большого количества вызовов API или событий.
import { useEffect, useRef } from 'react';

export const useThrottle = (callback:Function, delay: number = 200, deps: Array<any> = []) => {
  const lastRan = useRef(Date.now());

  useEffect(
    () => {
      const handler = setTimeout(function() {
        if (Date.now() - lastRan.current >= delay) {
          callback();
          lastRan.current = Date.now();
        }
      }, delay - (Date.now() - lastRan.current));

      return () => {
        clearTimeout(handler);
      };
    },
    [delay, ...deps],
  );
};

export default useThrottle;
Пример:
const [inputValue, setInputValue] = useState("");

useThrottle(() => {
  // вызов API
}, 500);
Еще больше крутых хуков вы можете найти в каталоге хуков.