Задать вопрос

n1ksON

мидл
Ответы пользователя по тегу React

  • Где лучше хранить логику событий в React?

    @n1ksON
    мидл
    Для удобства и лучшей читаемости кода конечно нужно выносить в отдельные функции.
    Только если компонент небольшой и выполняется что-то по типу: setState((prev) => --prev) тогда можете не выносить.
    Ответ написан
    Комментировать
    Комментировать

  • Как удобно структурировать папки в проекте?

    @n1ksON
    мидл
    Такой подход используется чаще всего:
    1. components – большие компоненты, такие как карточки, фильтры и т.д., которые крайне редко переиспользуются
    2. elements – мелкие компоненты, такие как Button, Input или обертки бутстрапов/UI библиотек, чтобы в дальнейшем их переиспользовать
    3. pages – сами страницы
    4. store – место для редьюсеров, экшенов и саг
    5. utils – место для переиспользуемых фукнций, констант, своих эффектов и т.д
    Ответ написан
    Комментировать
    Комментировать

  • В чём разница этих способов изменения состояния на противоположное?

    @n1ksON
    мидл
    Правильнее будет использовать первый способ.
    Использование prev (предыдущего state), гарантирует корректную работу хука и отсутствие мутации.
    Для начала можете посмотреть пример здесь
    Подробнее почитайте документацию
    Ответ написан
    3 комментария
    3 комментария

  • Как сделать скачивание файла?

    @n1ksON
    мидл 
    const download = () => {
          const url = window.URL.createObjectURL(new Blob([buffer]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", "image.png");
          document.body.appendChild(link);
          link.click();
}

    <button onclick={download}>DOWNLOAD</button>
    Ответ написан
    2 комментария
    2 комментария

  • Сделать отдельную страницу товара на React?

    @n1ksON
    мидл
    В голову приходит пока только такое решение:
    1. Вешаем на карточку товара событие onClick и делаем redirect на новую страницу с id товара (example.com/catalog --> example.com/product/999)
    2. Используем react-router-dom и делаем Route c путём /product.
    3. В компоненте берём id из url и подгружаем данные по API.
    Ответ написан
    1 комментарий
    1 комментарий

  • Можно ли из сайта на React сделать приложение?

    @n1ksON
    мидл
    Посмотрите в сторону WebView.
    Ответ написан
    Комментировать
    Комментировать

  • Как в React отловить событие onClick на родительском елементе?

    @n1ksON
    мидл
    onClick срабатывает при нажатии на дочерний элемент. Чтобы получить target дочернего элемента, используйте event.currentTarget
    Ответ написан
    Комментировать
    Комментировать

  • Оцените логику проекта?

    @n1ksON
    мидл
    1. Зачем смешиваете классовые и функциональные компоненты?
    2. Вынесите эти участки кода в отдельные файлы
    const navbarLinkGenerator = (linksList, toggleMenuHandler) => {
  return linksList.map(({ to, label, exact }, index) => {
    return (
      <li key={`navlink-${index}`}>
        <NavLink to={to} exact={exact} onClick={toggleMenuHandler} activeClassName={cssClasses.active}>{ label }</NavLink>
      </li>
    );
  });
};

    const links = [
  { to: '/', label: 'Main', exact: true },
  { to: '/faq', label: 'Faq', exact: false },
  { to: '/contacts', label: 'Contacts', exact: false },
];

    3. Лучше переписать так:
    было:
    const navbarLinkGenerator = (linksList, toggleMenuHandler) => {
  return linksList.map(({ to, label, exact }, index) => {
    return (
      <li key={`navlink-${index}`}>
        <NavLink to={to} exact={exact} onClick={toggleMenuHandler} activeClassName={cssClasses.active}>{ label }</NavLink>
      </li>
    );
  });
};

    стало:
    const navbarLinkGenerator = (linksList, toggleMenuHandler) => {
  return (
    {linksList.map(({ to, label, exact }, index) => 
      <li key={`navlink-${index}`}>
        <NavLink to={to} exact={exact} onClick={toggleMenuHandler} activeClassName={cssClasses.active}>{ label }</NavLink>
      </li>
  )};
)};

    UPD:
    4. Лучше переписать с useEffect:
    useEffect(() => {
  if (isMenuOpen) {
    navbarLinksClasses.push(cssClasses.show);
  }
}, [isMenuOpen])
    Ответ написан
    4 комментария
    4 комментария

  • Как сделать асинхронное замена страницы в react js?

    @n1ksON
    мидл
    Почитайте про props, react-router и хуки, в частности useState и useEffect.
    Ответ написан
    1 комментарий
    1 комментарий

  • Где можно изучить Redux?

    @n1ksON
    мидл
    https://redux-ru.js.org/
    Ответ написан
    Комментировать
    Комментировать

  • ReactJS стоит ли в этой ситуаций использовать forEach вместо map?

    @n1ksON
    мидл
    Этот код работать не будет, так как он ничего не возвращает. 
    products.map((items) => {
     <GameProduct product={items} />
  });

    Либо сделайте так => ({}), либо так =>:
    products.map(items => 
     <GameProduct product={items} />
);

    Если у вас массив объектов, которые содержат в себе информацию о повторяющихся блоках, то правильно будет использовать метод map. Что вы и делаете, всё верно.

    Метод forEach обычно используют для выполнения сложной логики, связанной с изменением/преобразованием массива.
    Ответ написан
    Комментировать
    Комментировать

  • В чем смысл использовать хуки?

    @n1ksON
    мидл
    Скажу честно, опыт написания классовых компонентов никогда не имел. Всегда писал только на функциональных и хуками пользуюсь активно.
    Код функциональных компонент куда проще, меньше и понятнее, имхо. Хуки - очень полезные инструмент. Нужно иметь разделять state. Что-то идёт в redux, что-то хранится непосредственно в state самой компоненты. Также всё зависит от подхода к организации структуры в проекте.
    useState, useRef и useEffect - вообще юзаю в каждом проекте, не представляю как без этого трио можно обойтись. Использование остальных уже от задач зависит.

    Придется создавать для теста каждого компонента обертку из провайдера?

    Да, но давайте не будем о грустном)

    Раньше можно было взять компонент, передать props и быть довольным.

    А что сейчас мешает?

    На демонстрационных примерах все понятно и очевидно - компоненты проще и читабельнее на хуках, но реальные проекты это какое-тоо месиво и фарш

    Если грамотная структура проекта, отделена логика, то всё чётко и понятно. Да, обычно, самая большая боль - это структура. Триллион папок с файлами. Но не уже ли на классах в реальных проектах по-другому?
    Ответ написан
    Комментировать
    Комментировать

  • Как передавать аргументы для функции?

  • Почему не работает код на React?

    @n1ksON
    мидл
    Что вы за стиль пытаетесь задать? Если уж задаёте настолько максимально странный отступ, то пишите так: 
    <div id="submenuContainer" style={{marginLeft: {`${document.getElementById("modalMenu").scrollWidth}px`}}}></div>

    Если только начинаете осваивать React, переходите сразу к изучению функциональных компонент, а не классовых.

    React не рекомендует обращение к dom, то есть рекомендует не использовать вызовы document.
    Лучше найти более адекватный вариант, чтобы задать отступ.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как вывести данные JSON в React?

    @n1ksON
    мидл
    У вас в JSX написан один <div className="Item">. Вам нужно отрисовать столько Item'ов, сколько элементов в массиве Pizza.
    Правильнее в другом файле отрисовать Item, а в этом файле вызвать метод map и через props передать данные.
    В итоге, отрисуется столько Item'ов, сколько элементов в массиве.
    Ответ написан
    Комментировать
    Комментировать