Форум программистов, компьютерный форум, киберфорум

Форум программистов и сисадминов Киберфорум


КиберФорум - форум программистов и системных администраторов. Бесплатная помощь в решении задач по программированию, математике, физике и другим наукам, решение проблем с компьютером, операционными системами.
Войти
Регистрация
Восстановить пароль

Темы раздела JavaScript: ReactJS

Не работают Route
Всем привет, изучаю React и не могу понять почему не работают пути, localhost3000/user открывается но на ней только navbar index js ReactDOM.render( <React.StrictMode> <BrowserRouter> ...

Mobx не загружается в проект
Доброго времени суток. Начал  изучение mobx, пытаюсь установить п проект npm i mobx-react-lite выдает ошибку! Может кто то сталкивался, помогите плиз! Ошибка выглядет так npm ERR! code ERESOLVE...

Компонент обертка
Можно ли в реакте создавать компоненты обертки? Есть вот у меня компонент: class HomeHeader extends Component { render() { return ( <header className="bg-gray-900 h-20 w-full...

Асинхронный useState
Здравствуйте!!! У меня вопрос в связи с тем что useState асинхронный. Например я хочу задизаблить кнопку дождаться выполнения запросов и раздизеблить кнопку сделав редирект. Хочу узнать можно ли...

Есть список книг (массив), при нажатии на конкретное значение получаешь описание той книги, на которую нажал
import React, { Component } from "react"; import "./App.css"; import booksData from "./api/booksData.json"; class WeatherDisplay extends Component { constructor() { super(); ...

добавить к ссылке при onClick сообщение alert
Решаю учебную задачу и почему-то никак не выходит прикрутить к onClick сообщение. Подскажите пожалуйста, кто знает хоть как примерно это сделать. Чего-то я совсем запуталась... import...

Данные в массив сохраняются два раза вместо одного
import { StatusBar } from "expo-status-bar"; import { useEffect, useRef, useState } from "react"; import { StyleSheet, Text, SafeAreaView, Image, Button, TextInput, } from...

Как подписаться на изменение store в redux?
Как правильно подписаться на изменение данных в определённом месте store, в другом месте сайта если произошло изменение будет отправляться запрос при заходе на страницу.... subscribe наверное не...

Как сделать такой всплывающий React компонент?
Как правильно сделать такой простой React компонент? Без библиотек. При нажатии на кнопку, выводится информация к примеру "зарегистрирован"...... Нужен максимально простой компонент, который...

Вывод компонент в зависимости от props
Доброго времени суток. задумка такова - есть компонент, содержащий в себе другие, скажем такого плана: <Period /> <Group /> ... в родительский передается прос components={} в зависимости от...

Пишу первый раз на реакте, в чем проблема?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,...

React как переписать классы на хуки?
Может кто-то сможет объяснить, как переписать классы через хуки? В любом случае спасибо за мнение) import React, { Component } from "react"; import ReactDOM from "react-dom"; import...

Как переделать функциональный компонент в классовый?
import React from "react"; import { useState } from "react"; const Cart=({name,img,price,addProduct})=>{ const =useState(false) const onClickPlus=()=>{ setIsAdd(isAdd) ...

Множественный импорт SVG файлов
Всем доброго времени суток! Вводная по задаче: Есть около 100 SVG файлов. Требуется расположить в виде таблички эти SVG-изображения. При клике на карточку с изображением, нужно поменять цвет...

Как правильно сделать валидацию через react hook form?
Есть два input <input type="number" name="first" /> <input type="number" name="second" /> Как сделать валидацию что бы во втором input число должно быть 100% больше чем в первом, с выводом...

UseEffect. Не сразу обновляются данные в таблице
Здравствуйте, у меня есть некоторый дроплист от значения которого должен выполнятся определенный GET-запрос к серверу. Проблема: Url меняется, но изначально данные таблицы пустые, вместе с полученным...

Как в JSON добавить теги html или svg?
Подскажие как можно в JSON файл указать html элемент или svg? Я указал так: { "id": "1YQ159", "buttons": { "add": "<div>➕</div>", "favorites": "<div>❤</div>"...

Не получается запустить приложение реакт на сервере Ubuntu
Доброго времени суток друзья. Впервые столкнулся с такой проблемой, на локалке приложение хорошо работает компелируется, Но как переношу на vps выдает ошибку Failed to compile. ...

Почему не работает удаление из массива?
При удалении элемента из массива, почему-то всегда удаляется последний элемент. Пробовал разными способами: фильтром и через slice. Никак не могу понять почему так происходит. Parent component ...

Запрос axios
Здравствуйте, при запросе на сервер к базе данных, показать строку где id = userId сервер падает и выдает следующую ошибку throw new Error(`WHERE parameter "${key}" has invalid "undefined" value`);...

Перерисовка одного элемента списка, а не целиком
У меня такой вопрос: Есть список в стейте. Через map вывожу каждый элемент. Меняю значение одного элемента (копирую стейт, меняю одно значение и возвращаю объект через setState) и получаю ререндер...

Яндекс карта в реакт приложении
Всем привет. Помогите пожалуйста решить следующий вопрос ломаю голову ни как не могу найти в чем проблема! Вообщем пытаюсь сделать на сайте прямоугольник с картой создаю 350 на 350рх и в него...

Загрузка приложения на React в iframe
Всем привет. Есть приложение React на typescript и я хочу его запустить в iframe со стороны другого React приложения. Я беру бандл подгружаемого приложения указываю на него путь. Но там есть функция...

Не подгружается сайт на реакте в iframe
Добрый день! Пишу js обвязку для сайта, который должен крутится в iframe, но почему-то сайт в теге iframe не подгружается полностью. Сайт, который нужно крутить в фрейме - написан с использованием...

Проблема с выводом массива через карточку
Здравствуйте, у меня возникла проблема с выводом массива через индексацию. Суть проблемы в том, что при использовании mavies.map карточки выводятся в виде одной колонки, а в этом методе страница...

Конвертер из JSX в HTML+JS+CSS
Есть проект на reactJS, нужно просто конвертировать его в статичный сайт HTML+JS+CSS. Как это сделать?

Отправка в браузер React файла с сервера Node js
Возможно ли отправить большой React файл в браузер через node js? я нашёл примеры отправки простых файлов реакт через babel html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

Mobx strict mode
Добрый день, объясните, пожалуйста, почему выходит предупреждение Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify:...

Как обновить компонент из другого компонента?
На странице есть хедер, контентная часть и футер - это всё компоненты. В хедере находится input type="text" и кнопка. Контентная часть выводит данные с сервера, используя axios. Сам скрипт запроса...

Как сделать, чтобы текущая дата в DatePicker (material-ui) автоматически обновлялась?
То есть если страница открыта в браузере в момент смены суток.

Как отключить запоминание браузером значений, введённых в InputMask?!
Уже всё перепробовала. Код всё равно запоминается.

Как правильно обновлять state на основе предыдущего значения state? Какие могут при этом возникнуть проблемы?
Как правильно обновлять state на основе предыдущего значения state? Какие могут при этом возникнуть проблемы? Обновить state на основе предыдущего значения - я разобрался. Не пойму какие могут...

Изменить значение объекта в массиве
Добрый вечер. Есть массив со значениями. Вопрос в том как поменять значение по индексу. Условно нужно изменить title: "new task" для элемента с id = 2. const = useState(); Пробовал как-то так,...

React-router-dom
Доброго времени суток, у меня есть <Route /> который отрабатывает по пути "path="/product"". Мне надо что бы Route отрабатывал по части пути, тоесть <Route path="/{любое выражение}-product" /> и...

Как сделать правильную постраничную пагинацию?
Всем доброго времени суток. Есть сайт, на нём много страниц с карточками На каждой странице есть вот такая пагинация (см скрин 1) Есть вот такие входные данные: const countPage = 17 // общее...

Хороший пет-проект на Реакт для резюме
Всем привет. Ищу свою первую работу в IT, фронтендером, основа моего стека - JS+React. Т.к. никогда раньше в IT не работал, в резюме есть только пет-проекты. И в связи с этим встал вопрос - какой...

Как сгенерировать файл .d.ts из файла .scss?
Пробовала yarn tsc src. Выдаёт ошибку: Could not resolve the path 'src' with the extensions: '.ts', '.tsx', '.d.ts', '.cts', '.d.cts', '.mts', '.d.mts'.

Не получается передать пропсы между компонентами
в AllProduct компоненте есть компоненты Header и CartOverlay.Функции передаю непосредственно к этим компонентам с помощью пропсов.Вопрос в том что есть еще один компонент Technology в котором...

Module parse failed: Unexpected token
При запуске скрипта "build": "webpack --config webpack.config.js" Выдает такую ошибку: ERROR in ./src/index.js 12:2 Module parse failed: Unexpected token (12:2) You may need an appropriate...

В функцию не передается параметр
Всем добрый день, столкнулся со следующей проблемой: У меня есть собственный хук useFetching, в него передается какой-то код (в данном случае идет получение данных с сервака). Сам хук выполняет этот...

Как сделать такую галерею на React JS?
Можете подсказать как сделать компонент такой галереи (фото ниже), или может уже есть такой-же пример... Что-то я найти не смог...

LocalStorage очищается после обновления страницы
Работаю с LocalStorage впервые и если использовать обычный метод localStorage.setItem, то все работает. Однако нужно подключить функию с другого файла. И вроде оно создается, однако после обновления...

Компонент ItemNews на хуках
Как создать компонент ItemNews со свойствами length (количество символов, показываемых по умолчанию), content (текстом новости) и img (адрес картинки новости). Изначально новость должна показывать...

ReactRouter не корректно работает
Здравствуйте. Только знакомлюсь с React и столкнулся с такой проблемой: React Router меняет содержимое страницы только при перезагрузке(Я должен сначала выбрать раздел меню, а потом перезагрузить...

Всегда проблемы с роутерами. Ни один роутер не принимает детей
И роутеры из react, и из react native. Выдаёт ошибку: TS2559: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes > & Readonly '. ...

Не сохраняются данные в массив
import { StatusBar } from "expo-status-bar"; import { useEffect, useRef, useState } from "react"; import { StyleSheet, Text, SafeAreaView, Image, Button, TextInput, } from...

redux запрос на сервер - разъясните основы
Добрый день. Помогите разобраться начинающему. Начал изучать Redux. При изучении начальное состояние state в редьюсере мы пишем сами (например initialState). И в зависимости от type меняем его...

Будут ли "пойманы" в catch блоке ошибки?
Изучаю вопросы по React, в частности Error Boundaries. И вот собственно вопрос: Будут ли "пойманы" в catch блоке ошибки, возникающие при рендере InnerComponent? Почему? function...

Не устанавливается значение переменной в стейт
Знатоки реакта, здравствуйте, прошу, помогите найти ошибку. Я пытаюсь реализовать всплывающее уведомление, результат запроса на сервер возвращает ошибку. здесь я отправляю запрос, и в блоке catch...

Синхронный скролл
Доброго времени суток! Подскажите как решить задачу. На странице через map формируются к примеру 4 блок, у каждого из них есть свой горизонтальный скролл. Как сделать так что бы когда скролишь один...

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

Не получается записать и вывести свойство.
function ListItem(props) { // Правильно! Здесь не нужно указывать ключ: return <li>{props.value}</li>; } function NumberList(props) { const numbers = props.numbers; const listItems =...

react-yandex-maps проблема с balloonContent
добрый день. не получается вывести описание для точек на карте, перерыл весь интернет, все найденное не отрабатывает. вот фрагмент кода: <div style={{ width: "80%", height: "100vh", marginLeft:...

Подскажите советом
Такой вопрос, для богов реакта. Как вы учили его , по каким методичкам, урокам, книгам и т.д . Смотрю курсы что-то везде не особо нормальные, один шлак, много воды=)

Как сделать такое выпадающее меню на React?
Подскажите как сделать такое выпадающее меню, с вложенным уровнем на React. Что-то нечего не могу найти в интернете похожего...

Как лучше сверстать этот блок?
Доброе время суток. Подскажите пожалуйста. Необходимо сверстать рейтинг и затем его заставить работать на js. Есть каартинка, но ее сюда нельзя загружать как я понял. Рейтинг в виде спидометра от 0...

Как воспользоваться тегом <picture> в react
Всем привет, хочу в компоненте что бы была картинка, которая при изменении браузера (если браузер не поддерживает webp ) показывала картинку jpeg. Соответственно все оборачиваю в тег picture, но...

Как переиспользовать компоненты в react native
Я уже и не надеюсь, но вдруг именно здесь смогут помочь. Разрабатывая приложение столкнулся с проблемой, в процессе работы приложение обращается к серверу и получает некоторый массив, далее...

Как из json файла вывести изображение в react приложение
Начал изучение react столкнулся с проблемой: у меня есть файл json с данными о картинах: { "painting" : и файл paintings.js в котором происходит следущее: import React, {Component}...

Валидация формы
Как сделать так чтобы когда checkbox активный,то текст был красный,а когда не активный,то синий?

Вызвать внутри массива в рендере функцию
Добрый день господа программисты Дело в том, что мне поступила задача создать новый компонент, что бы он рендерил данные которые пришли мне с бэка Характеристики компа пользователя Я...

Ошибка при запуске React на Windows
Добрый вечер программисты, возможно пишу не туда, мне нужна была помощь. Я установил на Windows8 ReactNative , скачал Node.js и установил. Сейчас хочу запустить npm start, npm install не работают...

Работа с массивом DOM элементов
Всем привет. Как осуществляется работа с массивом dom элементво в react? Простой пример. Есть много карточек, которые формируются из бэка. При нажатии на карточку на неё добавляется класс, например...

react-chartjs-2 chartjs-plugin-datalabels не отрабатывает backgroundColor
Доброго времени суток. пытаюсь задать подложку для меток на графике (barchart). по всем источникам в plugin-datalabels должно передаваться свойство бэкграунда, но оно ни в какую не отрабатывает. с...

Стили компонентов
Здравствуйте. С недавних пор начал изучать React, и столкнулся с такой проблемой... У меня есть 2 компонента: Компонент Навигации и компонент главной страницы. Почему-то, стили навигации применяются...

Как убрать warning React.forwardRef?
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Эта ошибка появляется там где есть мой компонент Input с такими...

Проблема с Redux DevTools
Не знаю если в правильной месте задаю вопрос, но проблема с расширением для браузера Redux Devtools, пару недель назад пользуясь этим расширением я на что то нажал, и теперь все что я вижу это...

Почему не работает путь к изображению в React приложении?
Как указать относительный путь к изоражению в react приложении? Архитектура такая Мне сказали что нужно указывать относительный путь import image from "./img/sweater-1.webp" import React...

В каких случаях стоит хранить значения в стейте компоненты, а в каких случаях в инстансе?
Вопрос по собеседованию React. В каких случаях стоит хранить значения в стейте компоненты, а в каких случаях в инстансе?

Redux DevTools крякает при попытке записать дом элемент
Здравствуйте!!! Не могу понять можно ли это решить в редакс или надо на контекст переходить? Решил для практики сделать мини рисовалку с помощью canvas, заодно поизучать canvas. Выбрал...

Я не понимаю почему хук useDragger не обновляет свои props
import {SlideBlock} from "./../Block/Block"; import styles from './BlockHelp.module.css' import {Block} from "../../../types"; import React, { useState } from 'react' import {selectBlock} from...

Почему на сервер беспрерывно поступают get запросы?
Я еще новичок в JS да и вовсе в программировании, так что не кидайтесь камнями пожалуйста и объясните почему при таком коде на мой сервер беспрерывно поступают гет запросы? Это клиентская часть....

React router dom v6
root.render( <BrowserRouter> <div className="bg-gray-800 absolute h-full w-full"> <Routes> <Route path="/" element={<Home />} /> <Route path="room/:id" element={<Room...

Скролл для нескольких таблиц
всем привет. есть интерфейс, в котором 6 таблиц. нужно реализовать общий скролл для них. думал над вариантом отслеживания позиции скролла таблицы, которая в фокусе, с последующей передачей координат...

Как передать event из компоненты в хук
export const useKeyPress = () => { // implement key press logic // return pressed key codes return { // keysPressed }; }; логику нажатия кнопки необходимо написать в...

Запись значения из select в input
Привет всем! Есть форма <form action="#"> <div class="submit-field-location"> <select class="chosen-select" name='options'> <option value='option-1'>Option 1</option> <option...

Паттерн композиция
Добрый день. Есть такой код: import React, { FC, useEffect, useState } from 'react'; import './Button.scss'; export interface ButtonProps { children: any; }

React, недопонимани­я
1. React основан на работе с рендерами? 2. Как проще всего настроить связь между компонентами React? 3. Все используют Store в качестве основы в React, или это специфика какая-то? 4. В чем...

Как сделать,чтобы при выполнении любого действия на странице дата обновлялась?
Давно сижу над этим заданием, уже всё перепробовала. Помогите, прошу!

План обучения ReactJS для новичка
Приветствую. Сейчас активно изучаю js и в дальнейшем планирую изучение реакта. Хотел задать опытным несколько вопросов, чтобы правильно организовать учебный процесс. 1) Какие разделы ванильного js...

Не срабатывают Routes, Route, Navigate с пакета react-router-dom
Работаю с нодой не так давно и не знаю всех тонкостей. Методом пробы и вывода понял что не выводит данные написанные в тегах Routes, Route, Navigate которые импортирую с пакета react-router-dom....

Игра с башнями
Постановка задачи Программа должна имитировать игру, в которой цель состоит в том, чтобы убивать врагов с помощью башни. Нужно убивать врагов как можно быстрее. На каждом ходу сначала башня стреляет...

Как правильно сделать заглушку для сайта на React JS?
У меня на сайте есть заглушка по типу "перейдите в play market \ app store" и скачайте приложение... Она должна появляться при ширине экрана меньше 1000px. Я просто создал этот компонент, повешал...

Сохранение предыдущего контента react
Здравствуйте! Подскажите как сохранить все изменения, внесенные пользователем, на странице? т.е. Есть меню и в зависимости от выбранного пункта меню открывается разные компоненты на странице. Но...

Таймер обратного отсчёта
React-компонент - таймер обратного отсчёта. Компонент должен работать по следующему алгоритму: На экране представлено специальное текстовое поле и кнопка «Начать!»; Пользователь вводит...

Проблема с UseEffect. Выполняется несколько раз при рендеринги странице
Здравствуйте, недавно начал разбираться с React и столкнулся с такой проблемой, что при использовании useEffect страница отрендеривается 2 раза. Возьмем к примеру одну из страниц. import React,...

Установка React
Хочу настроить React , выполняю в терминале команду npx create-react-app react-demo Имею такой результат Creating a new React app in C:\Users\admin\react-demo. Installing packages. This...

Почему не прокидываются пропсы в компоненту?
При рендере компоненты должны приходить пропсы, но компонента рендерится без них, а в стейте они в итоге есть. import React from "react"; import Machine from './machine' import {compose} from...

Неправильный фокус при загрузке страницы
Добрый вечер. Такой вопрос. При открытии страницы она прокручивается на компонент со "слайдером", значения для которого берутся из бека и устанавливаются так. useEffect(() => { ...

TextField теряет фокус после первого введенного символа
Добрый вечер. Практически всегда при вводе текста в TextField теряется фокус на поле после первого введенного символа. Если нажать на поле второй раз и продолжить писать - все ок. Подскажите с чем...

Как сделать дополнительный запрос в middleware
Здравствуйте Мне нужно в мидлвэре найти нужный мне запрос, где есть параметр page. У этого запроса посмотреть ответ, если в ответе activePage > totalPages, то сделать этот же запрос, но только...

Почему не отображаются данные в компоненте при получении их из API?
Подскажите почему у меня не отображаются данные, в компоненте select, как это исправить? Код: https://codesandbox.io/s/wavesurfer-player-forked-ctulgr?file=/src/App.js

Где можно найти шаблоны простеньких сайтов аля сайт визитка
Подскажите где можно найти шаблоны простеньких сайтов аля сайт визитка

Как правильно загрузить данные для select что бы сразу же отображались когда они пришли с сервера?
Подскажите пожалуйста как решить эту проблему, у меня есть select данные для которого приходят из API и записываются в redux state, от туда уже идут в сам компонент, при загрузке страницы вызываю...

Модальное окно
Пишу небольшое веб приложение, реализовал в нём регистрацию и авторизацию, но при этом использовал дополнительный компонент(при нажатии на кнопку авторизации, отображаю другою страницу с формой)...

Подскажите, пожалуйста, как правильно импортировать стили?
Доброго времени суток! Подскажите, пожалуйста, как правильно импортировать стили. делаю так import 'smart-webcomponents-react/source/styles/smart.default.css'; При отладке все работает, но если...

Почему не работает создание файла из blob?
Подскажите пожалуйста где проблема, уже понятия не имею почему не работает. Должно работать так что обрезается фото, и отправляется на сервер как файл. Для этого я создавал canvas, из него blob и уже...

React Native: авто обновление JSON в фоновом режиме
Добрейшее.Собственно есть страница с курсами валют,нужно чтобы она обновлялась в фоновом режиме через N время. import React, { useState, useEffect } from 'react' import { View, FlatList,...

Как исправить ошибку typescript в ConnectedRouter?
Очень долго вожусь. Не могу понять: в чём ошибка? Проект написан на typescript с использованием redux. Вот код: export default function App() { return ( <Provider store={store}> ...

Валидация форм, Formik, как сообщение с ошибкой отобразить в инпуте? как подсветить рамку инпута REACT
<p className={s.sizeBig}> <label htmlFor={`street`}>Улица *</label><br /> <input className={cn(s.input)} type={`text`} ...

Отображение картинок на странице
Вопрос избитый, неоднократно обсуждаем, с кучей решений и тд.. Но! Проблема. Не отображаются картинки в проекте. Реакт, компонент jsx. путь компонента: /src/components/post/post.jsx Пробовал...

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

Cannot read properties of undefined (reading 'map')
Нужна ваша помощь. Пробую собирать данные API с помощью redux. Когда хочу отрисовывать данные то получаю эту ошибку: Cannot read properties of undefined (reading 'map') Что я делаю не так? Спасибо...

React.js подключение внешнего js файла
Здравствуйте. Только что начал изучать React и дошло до того, что мой js файл не подгружает компоненты на страницу. Если этот же код поместить в <script> в html-е, то все работает. Библиотеки...

Получение значение PromiseResult для объекта Promise
Здравствуйте, уважаемые форумчане! Выполняю запрос к PHP-скипту внутри конструктора классовой компоненты с помощью axios: class UniverseScrollTest extends Component { //Описываем компоненту...

Вызов метода при загрузке страницы
Добрый вечер, пытаюсь прикрутить API и выводить данные. Хочу получать данные при загрузке страницы, ну пока удалось только сделать при клике на кнопку. Как можно реализовать? class App extends...

react/ react hook с Rxjs
Здравствуйте. Столкнулся с проблемой изучения библиотеки RxJs. У меня есть ТЗ, создать секундомер. Но проблема в том, что не могу разобраться как правильно использовать эту библиотеку с react hook....

JS React вывод массива списком
В чем косяк? <script type="text/babel"> const name = ; class Test extends React.Component { constructor(props) { super(props); const name = this.props.name; const list =...

Маска для введения номера телефона (react-input-mask)
Проблема такая, существует большой компонент (InputMask из react-input-mask), у которого нежелательно менять onChange в него улетает маска вида phone: '+7 (999) 999-99-99', нужно сделать просто...

Повесить событие на кнопку
Привет всем. помогите решить задачу, App одностраничный . На странице должны отображаться данные из базы, возможность добавлять новые данные, удалять, редактировать. Данные вытягиваю с помощью...

Как сделать редактирование данных в самой таблице React
Привет народ, очень нужна ваша помощь, сделал небольшое приложение Crud работающее с базой данных, вот есть проблемка, нужно сделать так чтобы редактировать данные можно было в самой таблице. На...

Проверка аутентификации на react
Здраствуйте! помогите пожалуйста, как сделать проверку аутентификации, и если пользователь залогинился то перейти на страницу home, у меня что то нчего не получается, не пойму как это делать(((( вот...

TypeError: state is not iterable
Доброго времени суток! Подскажите, почему появляется такая ошибка? Это редьюсер: export let initialCostsState = { costs: , isActive: 200 } export const costsReducer = (state =...

Изменить значение в state массива
https://cdn1.savepice.ru/uploads/2018/11/16/32853a356a2a033bd8e914fe060f8157-full.png По нажанию на лайк, должен измениться цвет и увеличится кол-во на +1. Повторное нажание -1. Компанент для...

Как подключить картинку?
Пытаюсь подключить картинку в свой проект. Он её выводит, но пишет что не может найти такой модуль в самом vs code. Как я понял это проблема самого редактора, он неправильно видит рутовскую...

Почему такая ошибка "TypeError: Cannot read property 'bind' of undefined"?
import React from 'react'; import ReactDOM from 'react-dom'; class Todo extends React.Component{ constructor(props){ super(props) this.state = { name: ' TODO ', ...

React (Balel) Какая разница в .js и .jsx
Вопрос в заголовке. Я раньше почему-то думал что .jsx файлы это спецификация файлов для компилятора babel, но тут на меня нашло озарение - бабелю же всё равно какие файлы компилировать и то есть...

Не запускается локальный сервер
Прохожу книгу React in Action, скачал репозиторий автора з 4 главы? вставил в корне диска C "https://github.com/react-in-action/letters-social/tree/chapter-4" пробую запустить его с консоли в...

Обработчик события на клавишу Enter
Доброго всем времени суток! Нужно было повесить обработчик события на нажатие клавиши Enter. Походу дела я столкнулся с проблемой: элемент на который я вешал обработчик события на момент создания ещё...

Cannot add property currentTime, object is not extensible
Здравствуйте! Проблемка в следующем ..... В компоненте есть элемент <audio> обращение к нему сделано через ref let audioRef = React.createRef(); return( <div> <audio ref={audioRef} ...

Недостатки React
Здравствуйте. Расскажите пожалуйста о недостатках, архитектурный просчетах, неудобствах и т.д. с которыми вы сталкивались при написании приложений с использованием React. В рунете (да и не только)...

Отменить обновление страницы при выполнении метода
У меня есть кнопка <form onSubmit={this.props.weatherMethod}> <input type="text" name="city" placeholder="Город"/> <button>Отобразить данные</button> ...

Почему не работают ссылки React на хостинге?
Написал заметочник на React. Заметочник состоит из нескольких страниц. Для навигации использовал react-router. Локально работает все замечательно. Но после того как сделал react build и выложил на...

React js - рендеринг тормозит
У меня есть 2 компонента Первый это таблица на основе fixed-data-table-2,(около 100 строк, будет больше) при клике на ячейку таблицы хочу показать модальное окно. В браузере вижу предупреждение **...

Инструмент для парсинга сайта (nodejs + reactjs)
Нужен совет. Начал недавно изучать js + reactjs. Делаю первый сайт в целях обучения. Использую: nodejs, react(material ui, DevExtreme grid), npm. Идея следующая: 1. Парсить данные с...

ReactJS. Обновить данные при добавлении в localStorage
Всем привет, есть данные в localStorage, я их вывел на страницу, потом сделал функции добавления новых значений. Ввожу в инпуты, после нажимаю добавить и в алерт выводит это данные, потом в...

Does not contain a default export
Получаю вот такую ошибку ./src/components/Profile/MyPosts/MyPostContainer.jsx Attempted import error: '../../../StoreContext' does not contain a default export (imported as 'StoreContext'). при...

Многостраничный ReactJS
Всем привет) изучаю реакт и вот вопрос. С компонентами разобрался, как работает пропс тоже. Вот теперь вопрос: Есть какое - то меню например: Работники и Отчет. В работники мы вносим наши...

Настройка proxy в package.json
Здравствуйте. Создал две папки с проектами creat-react-app и laravel. Для тестирования использую Open Server. Для полной картины распишу: /OSPanel/domains/laravel /OSPanel/domains/react ...

Uncaught SyntaxError: Unexpected token '<'. Что делать ?
Была проблема с импортом, решил обойти через константы ибо даже с "type:module" не видел модуля. Тут появилась другая проблема, начал ругаться в сторону рендера, а конкретно в строке: contents=...

React на хостинге
Пытаюсь установить react на хостинг beget, как тест и получаю, ошибку с import, webpack и babel установлены, настройки по node на beget выдержаны, облазил весь stackoverflow за решением, поддержка...

Можно ли учить react не зная JS?
Можно ли учить react не зная JS?

i18next способы смены языка
Я сделал два хелпера для создания компонента с переводом слова, всё работает. import moment from "moment"; import i18next from 'i18next'; import {Translation} from 'react-i18next'; import...

Ошибка [nodemon] app crashed - waiting for file changes before starting
Не подгружаются посты, а также почти сразу выбивает ошибку TypeError: Failed to fetch в браузере репозиторий проекта https://github.com/react-in-action/letters-social/tree/chapter-4 ничего в...

React форма авторизации
Предпринемаю очередную попытку глубже войти в фонтент задача такая сделать форму авторизации(логин). Создал проект create-react-app создал компонентю нарисовать формачку не сложно(можно любой...

Ошибка "Failed to compile"
При попытке перебросить const gameSettings в компонент < Game /> вылазит ошибка "Failed to compile ./src/app.js Line 38:27: 'gameSettings' is not defined no-undef Search for the keywords to...

Удаление элментов из DOM модели
Добрый день, как удаляют элементы из DOM модели на React? На Jquery мы находили элемент по селекторам и удаляли. А здесь как это работает?

Как задать плавный toggle в ReactJS?
Здраствуйте! помогите кто знает как в react задается скорость открытия блока? Сейчас у меня блок открывается слишкрм быстро constructor() { super(); this.state = { ...

Как извлечь html из react?
Всем привет! :) Я хочу сделать так, чтобы реакт компилировал html, чтобы полученный html можно было использовать в проекте. Конечно можно найти содержимое контейнера root в браузере, но не хочется...

Удаление элемента по его id
Добрый день! У меня есть небольшой список, состоящий из отдельных компонент. Мне нужно сделать так, чтобы элемент по которому кликнут сначала выделялся(можно и без этого), а потом и удалялся кнопкой...

После установки ReactJS появляется белый экран, вместо заставки
Здравствуйте, уважаемые форумчане! Пытаемся переносить проект на ReactJS, но пока, к сожалению, ничего не получается. Вместо заставки в <div id="root"></div> ничего не загружается. Да еще, ошибки...

Как обратиться к массиву, который в массиве? React
Всем привет, подскажите как можно обратиться к массиву, который в массиве? Вот мой код: import React, { Component } from 'react'; import './App.css'; class App extends Component { constructor()...

Нужна критика кода переключателя темы на React
Здравствуйте, нужна критика кода переключателя темы. Что сделано не так, что улучшить? Принимаю любую критику. gitHub:...

Как вывести запрашиваемые данные из JSON (Reactjs api call)?
Доброго времени суток. Начал изучение API call на ReactJs. Данные из JSON вывел , без каких либо проблем, но вот теперь хочу сделать вывод данных по запросу который вводят в Input. И не совсем...

ReactJS: render таблицы
Скажите, плз, как отрендерить пустую таблицу (напрмиер 4 колонки и 4 столбца) в ReactJS через массив?

Почему не удаётся запустить проект?
Помогите мне пожалуйста. Пытаюсь запустить проект, разобраться с реактом. Читаю в файле package.json "build": "webpack -p --config webpack.production.config.js --progress --profile --colors",...

Render массива объектов
Доброго времени суток! :) Подскажите, пожалуйста, чего бы React мог ругаться на подобную форму отображения массива с объектами? getBlockMarkup = (blocks) => { const Block = ({data}) => ( ...

Изменение цвета параграфа
Добрый день! вот задача: Параграфу реализовать выбор цвета. Можно выбирать из всего спектра (<input type="color" />) или использовать только 5-7 ваших любимых цветов (как в Google Keep). class App...

Не собирается приложение - ошибка в файле index.tsx
Всем привет. Пытаюсь собрать приложение React webpack-ом, но выдает ошибку: ERROR in ./src/index.tsx Module build failed (from ./node_modules/ts-loader/index.js): Error: TypeScript emitted no...

При хранении объекта в Redux, как хранить состояние полей редактирования (input)?
Есть некоторый список, который хранится в redux, например такой: { 1: { name: 'Саша', }, 2: { name: 'Маша', }, 3: { name: 'Наташа',

Вывод данных полученных в axios
Всем привет! Я изучаю reaсt и решил сделать попробовать получить данные с сервера. Я написал такой код: export default class PersonList extends React.Component { state = { post: ...

Преобразование JSON в массив объектов JS
Всем привет. Помогите, пожалуйста, разобраться с проблемой, так как в голове полная каша и я уже не знаю как мне с этим справиться. Есть локальный сервер, который я создал, чтобы протестить запросы...

Динамическое меню
Здравтсвуйте! Использую React + redux и не могу понять, как правильно организовать динамическое меню. В хедере навигация и при нажатии на одну из ссылок, загружается 2 столбца - контент и меню....

Рендер списка объектов карточками
Я новичок и некоторые задачи ставят меня пока в тупик. Есть API с массивом карточек товаров Нужно написать App, который будет рендерить список объектов карточками.

Нет подключения к firebase
Создаю react приложение. Нужна бд firebase. Настроила, но при запуске ошибка: высвечивается сообщение, что подключение не доступно('Error loading the Firebase SDK, check the console.'), затем...

Как выполнить AJAX-запрос в React?
Я хочу получить данный с сервера и сохранить их в state. class NavBar extends React.Component { constructor(props) { super(props); this.state = { navs: {}, ...

Не могу понять почему "Unresolved function or method map()"?
Здравствуйте, не могу понять почему "Unresolved function or method map()"? Всё четко компилируется, но у WebStorm пишет предупреждение(ст 31) "Unresolved function or method map()". Подскажите...

Можно ли сделать соц сеть на javascript, react.js, ajax, mysql?
можно ли сделать соц сеть на javascript, react.js, ajax, mysql?

Всплывающее окно на определенной кнопке
Приветствую формучане, я еще новичок в JavaScript с React и пока не совсем понимаю как решать данную проблему. У меня есть определенный список который отображается методом map из сервера на 56...

Как вывести двойной ассоциативный массив в react
echo json_encode( array( 'English' => , 'French' => ) ); render() { const { error, isLoaded, items } = this.state; ...

React и clearInterval
Добрый день! <div onClick={this.start.bind(this)}>старт</div> <div onClick={this.stop.bind(this)}>стоп</div> Две кнопки, (код упрощен) timer() { const...

Как в React в onclick вызвать функцию из другого файла
Допустим у меня есть файл heder.js import React, { Component } from 'react'; import './header.css'; class Header extends Component{ signIn = () => { alert('clicked'); }

Можно ли создать сайт полностью на реакте?
Можно ли создать сайт полностью на реакте? То бишь весь htlml чтоб на нём был, и head и body? Пока дак пробывал в бади менять и сервис http://tools.neilpatel.com html не видит, но если в index.php ...

Callback с аргументами
В react приложении есть метод render() render( return( <div className="msu"> {listData.slice(0, 5).map(i => { switch(i) { case 0: ...

Автоматическое нажатие на кнопку через 10 секунд
Добрый день. Есть следующая проблема. Нужно как-то совместить setTimeout и onClick на React JS. Хочется сделать автоматическое нажатие на кнопку через несколько секунд. Рабочий код (нажатие вручную...

React не применяются стили
Доброго времени суток! :) Имею следующую ситуацию - подключаю к js файлу css stylesheet, но стили не применяются. Имена классов в теги добавляются, а стилей нет. Не добавляются как в таком...

Пропадают элементы после перезагрузки страницы
У меня есть код, который создает мне список моих задач. Код является работающий. После того, как я создаю задачи, выполняю перезагрузку страницы то все мои созданные задачи пропадают.У меня есть 2...

Запретить пробелы в input
День добрый! Помогите решить проблемку. Есть input добавления тегов и кнопка чтобы их добавить. Нужно чтобы в инпуте было запрещено вводить пробел. Заранее спасибо)! формы написаны через...

Редактор текста
Как переделать такой код под использование textarea вместо input? При попытке заменить input на textarea текст перестал редактироваться при потере фокуса var TextEditComponent =...

SetState не обновляет дочерние компоненты
Всего 2 компонента, родитель и ребёнок для вывода через map в строке 276. Саме дурацкое, что через консоль лог показывает, что общая цена this.state.amount меняется, map тоже проходит по новому...

Input type search, событие по кноке очистить
Доброго времени суток. Ребят подскажите с вопросом, компонент в котором есть input с типом search. Как обработать событие очистки поля по нажатию на "крестик". Заранее спасибо большое.

ReactJS. Webpack. Как проверить версию браузера до подключения библиотек к проекту?
Всем привет!! Собираю проект Web Psck-ом, подключаю модуль React. На низких версиях типа Opera 18 получаю ошибку: Uncaught ReferenceError: Map is not defined ...

Фильтр строк по любым буквам React.js
всем привет. есть такое вопрос. даны любые слова (строки). Компоненту в props передаётся массив строк. Он отображает их в виде вертикального прокручивающегося списка. Есть инпут. При вводе текста в...

Не могу разобраться: TypeError: Object(.) is not a function
13 | 14 | const store = createStore(rootReducer, 15 | compose( > 16 | applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})), 17 | ...

Как экранировать кавычки для строки перевода из i18next?
В перевоед попробывал так. errorFileAvatar: "Ошибка файла \"Аватар\": ", При рендере export default function T(props) { return ( <Translation> {

React. Список пользователей
https://jsonplaceholder.typicode.com/users Нужны столбцы таблицы:id,name,email. Я новичок в React.

Привязка к value в input
Видел, что привязывают какое-то свойство стейта к value в input, затем каждое событие onChange вызывается функция в которой проводится каждый раз метод setState, для того чтобы сделать поле...

Создание и скачивание файла по нажатию на кнопку
Добрый день, Я новичок в js и react. Пытаюсь разобраться в следующем. С бэка на фронт приходит строка. Я хочу, чтобы при нажатии на кнопку создавался файл txt с этой строкой и начиналось его...

Не отображается выпадающий список
Здравствуйте! Изучаю React. Возникла необходимость сделать из JSONа многоуровневый select. в консоль выводятся значения, а вот в рендер не получается передать ничего. Помогите, пожалуйста. Что не...

Постраничный вывод данных на react
Привет. Сразу к сути - нужно сделать на react постраничный вывод товаров. Вывод всех товаров на страницу у меня реализован, но нужно чтобы на одной странице было не более 16 товаров. Подскажите...

Залить проект на хостинг
У меня есть проект на реакте. Мне нужно его залить на хостинг. Мне нужно для этого какой то бэкенд или webpack-dev-server сгодиться? Я просто раньше вообще с этим не сталкивался. Что нужно сделать,...

Ошибка масштабируемости карты Leaflet на React
Товарищ, хочу поведать о своей проблеме Решил я значит сделать карту на Leaflet и React, а она и не работает, точнее криво-косо. Для начала просто вставил пример с офф сайта.(Первая картинка) ...

Как сделать анимацию переключения картинки
Доброго времени суток! Я только учусь и поэтому прошу сильно не ругать за возможные глупости! :) Делаю учебный проект интернет магазина на React.js + Redux, так вот сделал я компонент по типу...

Как отключить событие фокуса у дочернего элемента?
Как отключить событие фокуса у дочернего элемента? В коде ниже работает получение фокуса у родительского div и когда он теряется, однако проблема в том, что при клике на дочерний элемент этого div...

Не устанавливается флажок checked (radio button) в onChange не меняется при нажатии на радио кнопку
Здравствуйте, я в React JS новый, хотел бы кое что уточнить Код есть, в базе данных все корректно меняется при нажатии на кнопку. Проблема лишь в том, что оно не check-ается по внешнему виду(на...

Срендерить строку с html
Как срендерить строку с html? render() { var title = '<b>Строка</b>'; return ( <div> {title} </div> )

Подключение Bootstrap
Доброго времени суток всем! В одном из скринкастов https://learn.javascript.ru/screencast/react#react-css для знакомства с React увидел, как автор подключает Bootstrap из терминала своего редактора...

Ошибка Uncaught TypeError: Cannot read property 'value' of undefined
Всем привет! Я новичок в react. Работаю с jHipster. Пытаюсь получить значение, которое выбрано пользователем в выпадающем списке Select библиотеки Ant Design. 1.Вначале, в событии...

Загрузка изображения из API
Как правильно в React.js преобразовать изображение, полученное из API, - в строку base64? const App = () => { const = useState(" ") useEffect(() => { ...

Добавить валидацию и отправлять форму, только когда поля заполнены
Допустим такой компонент и к нему тест. куда прописать следует заполнение поля title? import React from 'react'; export default class Order extends React.Component { constructor() { ...

React_js ошибка error:0308010C:digital envelope routines::unsupported
как сделать чтобы реакт заработал? в консоли браузера такая ошыбка - crbug/1173575, non-JS module files deprecated. работаю в vs code на macos ...

Не получается поставить bootstrap
При попытке устаноки бутстрапа https://facebook.github.io/create-react-app/docs/adding-bootstrap через npm выводит npm install --save bootstrap npm WARN bootstrap@4.2.1 requires a peer of...

Как загрузить на сервер картинки через CKEditor 4. React
В общем я задал такой же вопрос на стек овер флоу, но хотелось бы узнать и ваши мнения https://stackoverflow.com/questions/59749038/how-upload-images-to-server-using-ckeditor-4 Суть задачи состоит...

ReactJs изменение цвета после ввода названия цвета
Здравствуйте, извиняюсь, что написал возможно, не самый понятный заголовок, но мне не пришло в голову более подходящее название. Начал учить Reactjs и застрял перед вроде очевидной, но мною не...

Redux. Изменение store после удаления элемента
Всем привет. Разбираюсь с работой React и завис с одним моментом. Делаю заметки - отобразить из базы (mongodb), добавить новую, удалить. Сделал все, кроме удаления. Смысл загвоздки вот в чем:...

Вынос fetch "post" запроса в отдельный файл
Здравствуйте, подскажите пожалуйста можно ли вынести "post" запрос в отдельный файл? Я сделал папку с файлом "api.js" и вынес туда "get" запросы, хотел бы узнать как можно вынести и "post" запросы...

React.JS + Redux. Отправка запроса и чтение данных JSON
Всем привет. Работаю на ASP.NET Core. Подключил React/Redux. И теперь есть одна проблема. Создал код для подключения к серверу. Но почему-то не могу получить данные JSON. Вот код actionCreators: ...

Не работает "React.lazy"
Здравствуйте, не работает "React.lazy", помогите пожалуйста что у мне не так с кодом. index.jsx import React, {Suspense} from "react"; import ReactDOM from "react-dom"; //Components //...

Обновление данных в форме
Доброго времени суток, появился вопрос по react'у. Есть код: export default class HelloWorldApp extends React.Component { constructor(props) { super(props); this.state...

Анимация появления и сокрытия формы в React
Условие: При нажатии на кнопку должна с анимацией появляться форма, данные с которой отправляются на сервер. Введённые ранее данные сохраняются в localStorage, после отправки формы localStorage...

Не могу разобраться как вставить ссылку
Здравствуйте у меня возникла проблема у меня есть кнопка мне нужно указать ссылку на эту кнопку но у меня не выходит помогите пожалуйста. Писал по разному в html <a href="http://yandex.ru"...

Как вывести необходимые данные из массива объектов?
Здравствуйте! Только начал свое знакомство с ReactJS и нужно сделать сайт-тест знаний пользователя по определенной теме. Есть вот такой state. На данный момент не могу понять, как мне вытащить title...

Двойной рендеринг в React
Добрый день, начинаю изучать react, сделал авторизацию через Firebase, после того как зашёл на сайт и при обновлении страницы сначала прогруживаются кнопки, а потом показывает сообщение, что я уже...

Как правильно удалить элемент по таймеру
if (props.error) { cls.push('fadeIn', 'modalShow') setTimeout(cls.splice(-2), 3000) } Пытаюсь сделать модальное окно, которое после появления висит 2 секунды и исчезает....

Не работает scss в react-е
Здравствуйте. Не распознается синтаксис scss у меня в react проекте. Установил его, yarn перезапустил, прописал в webpack.config.js { test: /\.scss$/, use: ...

Получить значение ключа объекта
Добрый день коллеги. Получается вот такой код import React, { Component } from 'react'; import PropTypes from 'prop-types'; import styles from './MovieItem.module.css'; import * as...

Store не хранит состояние
Здравствуйте! Создал store с помощью hook'ов: /*code...*/ import { InsuranceItemContext } from './Context/InsuranceItemContext'; import { reducer } from './Reducer/Reducer'; function...

Аналог querySelectorAll в ReactJS
В нативном js для поиска дум элементов, чтобы узнать их количество я использовал querySelectorAll и lenght для определения сколько таких-то элементов существует у меня с нужным мне классом в данный...

Кредитный калькулятор
Ищу туториал (не видеоурок), где сказано, как сделать кредитный калькулятор.

Разделение доступа в react / redux приложении
Есть родительский компонент, в методе componentWillMount проверяю соответствие роли, если роль не подходит делаю редирект class WrapperAdmin extends Component { componentWillMount() { ...

Вставка данных в таблицу react
Здраствуйте, пишу для себя проект и тут хочу отмечать посещение людей. Данные получаю в json и хочу вывести их в таблицу с помощью Checkbox. Но так как данные приходят не особо красиво, то у меня...

Expo проект при запуске крашится npm ERR C:\npm-cache\_logs\2019-12-20T19_04_34_353Z-deb
> @ start D:\code\react-native\Firstproj > expo start Starting project at D:\code\react-native\Firstproj Expo DevTools is running at http://localhost:19002 Opening DevTools in the browser......

Как перерендерить страницу
Приветствую всех, у меня возникла наверно довольно простая проблема, но я пока начинающий React разработчик. Я пишу свой TodoList и пробую при удалении объекта из массива перерендерить страницу, но...

Передача функции от Родителя к Ребенку
У родителя есть функция updateText() {} нужно передать ее ребенку, чтобы там использовать - вызвать Изначально рендрю вот так <Task key={i} index={i}> так ошибок не находит но когда...

Как вывести данные из массива JSON?
Есть компонент Item: return ( <div className="item"> <img src={ image } alt="pizza1" className="item-preview"/> <h3 className="item-name">{ name }</h3> <div...

Метод в Redux реагирует на клик со второго раза
Пробую пример для понимания редакса создал, 2 кнопки инкремент и декремент. Клацаю на любую из этих кнопок значение меняется лишь со второго клика на одну из этих кнопок и после этого же второго...

Вызванный компнент функция появляется только после обнвления страницы
Всем привет. Вот начал изучать React JS Не могу решить одну проблему. Есть 2 файла. App.js и Main.js App.js import React, { useState, useEffect,Component} from 'react'; import logo from...

LocalStorage для корзины товаров (React/Redux)
Привет! Стоит задача, чтобы после перезагрузки данные корзины покупок оставались. Я пытаюсь это прикрутить через LocalStoge и Redux. Прошу помочь. Я совсем не понимаю иду ли я в правильном...

Изменение состояния useState
Есть такой код: import React, { useState } from 'react' const Task = () => { const = useState( {name: 'Иван', age: 25, show: false} ); const handleClick = () => { ...

Галерея с модальным окном(и миниатюрами картинок)
Не могу найти галерею с модальным окном и миниатюрами для картинок https://jfcaiceo.github.io/react-lightbox-component/ Этот пакет хорош, но он принимает сами картинки и уменьшает их через ксс, а...

Плавающая ширина input
Здравствуйте, возник вопрос, может кто-то знает как сделать плавающую ширину инпута? Стили написаны на material ui (material table), сам код на ts (react). У меня задание таковое, что нужно сделать...

Ошибка с babel
Как видите не получается поправить версию бабеля пробовал пару решений безрезультатно, у кого какие идеи??? ERROR in ./src/index.js Module build failed (from...

Передача значений между компонентами с использованием redux.
Добрый день. Необходимо передать переменную из одного компонента в другой, появилась идея использовать в качестве буфера Redux, но мне кажется, что это не совсем хорошая идея. Подскажите, это...

Вывод данных полученных в axios
Всем доброе время суток. Сижу и пытаюсь разобраться в React, смог вывести одиночные данные полученные в axios, но не могу вывести массив данных. Может кто подскажет как то сделать? Я сделал fake...

Как редактировать сайт на ReactJS?
Здравствуйте, я только-только начинаю изучать React и у меня в голове сложилась примерно общая такая структура файлов На днях мне дали посмотреть на реальный проект. И такой файловой структуры я...

Как связать между собой текст списка и чекбокс в нем
Привет всем!есть список состоящий из массива, нужно сделать так что бы текст <li> зачеркивался и отменялось подчеркивание в зависимости от состояния checkbox'а. не могу понять как их связать если при...

Загрузка json файла, используя запрос
Доброго времени суток! не могу получить json файл используя запрос - возвращает почему-то страницу. помогите разобраться, в чем проблема. файл load.js import React from 'react'; export...

React компонент без рендера и получение содержимого контейнера
class UserManager extends React.Component { constructor(props) { super(props); this.state = { value: null, };

Виджет комментариев переделать с react на redux
вот этот код нужно переделать в redux с компонентами редьюсерами и так далее долго уже пытаюсь никак не получаеться( App.js import React, { Component } from 'react' import { format } from...

Как избежать перерисовки незатрагиваемых компонентов
При нажатии кнопки меняется текст сообщения. Как избежать перерисовки не участвующего в этом взаимодействии грида ? Пример на codesandbox.io Код привожу и здесь import React, { useState,...

Сколько времени займет изучение фреймворка?(извините за тупой сами знаете что)
Знаю, вопрос глупый, у всех по разному и всё такое, кто-то может сказать хоть примерно нужно на изучение фрейма для поиска работы и конечно же полезные ссылки и книги для изучения не помешали бы,...

Работа с iconv-lite (проблемы с кодировкой)
Всем привет. Суть задания такова Написать приложение для выполнения под ОС Android, которое переводит текст в одной кодировке (например win-1251) и записывает содержимое в другой кодировке...

ReactJs связать с opencart или другими CMS системами
Как можно связать reactjs с различными CMS системами, понятно что через API, но нужен конкретный пример и/или ссылка на урок где рассказывается как это делается. Спасиб.

Обновление данных firebase в React приложении
Доброго времени суток!) Интегрирую в React-приложение типа todo-list подключение к Firebase. Получаю данные и добавляю их в state в componentDidMount(). Добавляю новый item в БД в...

Оплата с использованием Stripe
Необходимо подключить оплату к сайту ,выбрал Stripe.При первой записи все работает ,но тут стандартная форма,так же нашел уже готовый вариант с готовой формой с оф библиотеки ,Но не понятно как...

Почему синтаксис "useMemo" в моем коде вызывает предупреждение?
Здравствуйте, почему синтаксис "useMemo" в моем коде вызывает предупреждение? Сколько зависимостей я б ненаписал всеравно это предупреждение. Как это устранить? Нету предупреждения только когда...

Изменение цвета случайного div'a
Имеется игровое поле с 25 div'ами. По клику на кнопку "Play" случайный div должен окрашиваться в синий цвет. По клику на div с синим цветом он должен перекраситься в зеленый. Если клика не было - ...

Кто передал в функцию props
Доброго времени суток. Посмотрите, пожалуйста, скрин из консоли. В пропсах там сидят данные. Не могу понять откуда они взялись. Функция withSuspense вызывается в компоненте App в 39-ой строке....

Ошибка при создании React проекта: Maximum call stack size exceeded
Здравствуйте. Я новичок в React. Решил следуя туториалу настроить проект. Сначала запустил команду npm i -g create-react-app Ни одной ошибки не произошло. Далее, запустил команду create-react-app...

Не могу сделать редирект
Здравствуйте. Я использую React Routing, по этому все пути у меня содержат символ решетки после хоста. Вероятно по этому возникает следующая проблемма. Я нахожусь на странице вида...

ООП в React
Перед изучением react нужно хорошо разбираться в ООП js или сейчас достаточно знать функции js и сразу можно изучать react? С появлением hooks, как я понимаю, он стал более функциональным.

Как вытащить данные с backend?
Есть данные с бэка: Вот как я хочу забрать эти данные: const = useState()

ReactJS. Почему не работает код? В консоли нет ошибок!
Почему не работает код риакта? В консоле нет ошибок, и на екране нету текста который я хочу вывести <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

React.js с Material-ui
Привет ребята! Возник вопрос и проблема с React.js. Я написал код который должен вывести мне кнопки в стиле Material-ui, однако браузер выдает ошибку: Uncaught ReferenceError: require is not defined....

Компонент React Select (Creatable). Как сделать так, чтобы при клике не открывался выпадающий список?
https://react-select.com/creatable Я хочу сделать так, чтобы выпадающий список с элементами списка открывался только при клике на области, помеченной оранжевым цветом на скриншоте (стрелочка...

Сделать виджет комментариев
Напишите виджет комментариев на React со следующей функциональностью: 1. Отображение списка комментариев: автор, текст, дата и время 2. Добавление нового комментария (поля для ввода: имя...

Плавное изменение текста столбца таблицы при получении новых значений
Допустим есть массив { items: } Данные грузятьс и выводятся в рендере через map - всё ништяк, но мне нужно что бы компоненте li2 в его дочернем диве с классами val1 и val2 новые...

Redux form попытка очистить конкретный field
Всем привет, есть такая форма. <form className={classes.listField} onSubmit={props.handleSubmit}> <Field validate = {} name = "filmName" type="text" label = "Название фильма" component...

Как превратить переданные props в state?
У меня есть react контейнер который ходит по апи за данными. Данные рендерятся на странице и они же прокидываются по средствам props в модальное окно для редактирования вместе с колбеками для полей....

Работа с DOM в React и на чистом JS
С Днём Победы! Пишут о том что работа React быстрее с DOM, чем на чистом JS, так как он работает с Virtul Dom, а только потом вносит изменения в реальный. Я не могу понять в чём это выражается?...

Нужны ли знания Typescript если идти на на Junior UI Web Dev (React)?
Здравствуйте, нужны ли знания Typescript если идти на на Junior UI Web Dev (React)?

Events.js:167 throw er; // Unhandled 'error' event
В общем, я создал приложение и поставил сверху express https://dev.to/loujaybee/using-create-react-app-with-express Затем я озаботился тем, что файл server.js не обновляется по хот модулю и решил...

Работа с асинхронными функциями
Всем привет, недавно начал учить react и столкнулся с такой проблемой Есть компонент Map в котором 2 метода. Метод getPosition - асинхронный запрос на сервер для определения местоположения...

Практика react-redux
Хотел я значит сделать игру, так как более менее основы знаю react+redux, а итоге такого наворотил, что понял, нужна практика и много практики, от малой до великой, посовейте, плиз, как практиковать...

Как отловить событие перехода на страницу с redux?
Приложение создано с помощью react creat app, сверху поставлен redux и router. Хочу узнать как поймать событие перехода по ссылкам(компонент Link к компонентам-страница) внутри приложения.

Сортировка товара
Здравствуйте! Подскажите как сделать сортировку при выборе (названия, цены, рейтинга...) Есть код, import React, { useState } from 'react'; import myArray from '../myArray'; import...

Всё тот любимый undefined
Здравствуйте! Не понимаю сути этой ошибки: При передачи данных в store пишет, что у меня undefined(хотя там есть данные)(проблемы с getPockeBlock): import React from 'react'; import...

Роутинг React.js
Здравствуйте! Возник вопрос: как работать с многоуровневой маршрутизацией. У меня компонент не отрисовывается, да и я не понял как вообще работать правильно с маршрутизацией. Т.е. если у нас...

Массив из компонентов!
Надо вывести репозитории GitHub (например, только их имена). Есть компонент для одного, отдельного, репозитория. Как вывести весь массив репозиториев? Главный компонент App.js: import React...

Как менять состояние кнопки только у одного конкретного элемента, взятого из массива c map()
Как менять состояние кнопки у одного конкретного элемента, взятого из массива.map(), так, чтобы у других состояние не менялось вместе с ним??? const array = //пример массива function...

Изменение маски ввода input в зависимости от выбранного значения в select-box
Здравствуйте, подскажите (возможно есть готовый пример) как реализовать следующую задачу, имеется форма построенная компонентом formik , в которой используется react-select, на форме размещен...

Откуда тут массив с Промисами?
Здравствуйте! Скажите пожалуйста, почему вот этот кусок кода мне выдаёт массив промисов вместо массива объектов со свойствами и одним новым свойством, которое я пытаюсь добавить с помощью этого же...

React и Api: вывод элементов.
У меня есть API, с помощью которого я вывожу продукты. У меня продукты в API разделены на категории. И у меня есть кнопки категорий к этим продуктам, но они повторяются. Помогите пожалуйста: как...

Как подгрузить картинку в компонент, если путь к ней лежит в json файле?
задумка: слайдер, у которого инфа для слайда(название, характеристики и прочее) содержится в json(для теста), там же и путь к картинке. не подгружает. подскажите, пожалуйста, как быть. "gazel":...

При нажатии на кнопку скрыть компонент
На сайте имеются кнопки(1 изображение) при нажатии на лупу должно появляться поле поиска(2 изображение) на месте кнопок и названия ProgUser.js const buttons = ; return ( <App...

Настройка роутинга
Здравствуйте! Стоит задача при изменении некой переменной показывать различные компоненты. По сути авторизация, при успехе которой пользователю открывается админка. Сейчас сделано так: В App.js я...

Чтение для rectJS из json файла
Всем привет! Проблема: изменился формат подаваемого на вход json файла и не получается переписать код для нового фрагмента. Была программа, которая нормально читала данные из json файла для...

Unexpected string concatenation of literals no-useless-concat
Здравствуйте, уважаемые форумчане! Не могу никак избавиться от предупреждения в заголовке темы. Вот код: browser_update_link = "https://www.google.ru/search?q=" + `Как обновить браузер...

Компоненты и пропсы
Добрый день! У меня есть массив с названиями животных, это выводится на экран с помощью картинок, я могу отсортировать массив картинок по группам животных - это работает, у меня один стэйт для...

Отправка JSON и form-data одним запросом?
Добрый день, у меня есть форма с фотографией и текстовыми полями. Можно ли в одном POST запросе отправить и картинку и json, т.е, чтобы "Content-Type" был form-data и JSON

Пример динамического импорта в react приложении
Всем привет. Подскажите где можно посмотреть пример динамического импорта компонентов в реакт приложении. Читал доку вебпака https://webpack.js.org/guides/code-splitting/ не совсем понял как это...

При нажатии на Enter форма не отправляется
При нажатии на Enter форма не отправляется(хотя при нажатии на инпут с типом "submit" всё работает). В консоли появляется ошибка "Form submission canceled because the form is not connected". Как это...

Ошибка TypeError: this.previousElementSibling is undefined
Почему происходит ошибка ? Uncaught TypeError: this.previousElementSibling is undefined class CustomSpinInput extends Component { onChange = (e) => { ...

Не отображается ReactJS
Только начал учить библиотеку React так сразу же не задалось. В качестве рабочей среды использую Visual Studio code. Решил написать простенький код по выводу надписи. Файл с jsx: import React...

Axios отправка картинки на сервер
Всем привет. Есть у меня бэк и делаю для него front. Надо сделать форму регистрации, сделать, но она не отправляет изображение. Выводит ошибку 415. Просидел и продолбался 2 часа. Но нечего не...

Как обновить контент на странице из модального окна с использованием react-router-dom
Существует модальное окно, которое добавляется на страницу, нажатием специальной кнопки, и полностью удаляется со страницы, нажатием на кнопку закрытия. Я хочу добавить <Link /> внутрь модального...

Сортировка массива и его отсортированное отображение по клику на кнопку
Есть некий набор информации представленный в массиве. Проблема в том, что не могу реализовать через switch саму сортировку и отображение его же по нажатию на кнопки. Подскажите, пожалуйста , в чем...

useState поменять местами элементы массива
Здравствуйте!!! Подскажите, допустим есть массив cards, с помощь драг энд дропа я захватил элемент с id 1 и перетащил на элемент 4. Как поменять их местами в setCards?(обновить состояние в onDrop) ...

react дождаться выполнения асинхронных функций
Добрый день. У меня две асинхронные функции ServiceApi.getMatgrouplist(access_token) .then((data) => matgroupListSuccess(data)) .catch((err) =>...

Клиентская часть на ReactJS
Посмотрел туториалы по реакту. Все сводится к тому что есть некий index.html, а в нем какой-то элемент типо <div id="root"></div>. А потом мы рендерим туда что-то. Необходимо написать приложение...

Модальное окно с кастомным компонентом
Добрый день. У меня имеется react + redux приложение. В рамках приложения описан компонент модального окна, который вставлен в корень страницы и отображается на основе состояния из redux. Модалка...

Можно ли использовать вызов функции генерации id в reducer
Здравствуйте. Есть вопрос. Можно ли использовать вызов функции генерации id (7ст) в reducer (допустим что существует только Redux core)? //............................................ switch...

Подключение React, babel в Webstorm
Уже 3 дня не удается правильно настроить react и Webstorm. Таже проблема з babel. Пожалуйста, напишите как грамотно ето сделать, или киньте ссылку на туториал.

Как записать несколько обработчиков событий в "onClick"?
onClick={this.showConsole} Здравствуйте. Допустим я имею два или три обработчика событий и я хочу что бы они исполнялись при одном событии. Как это правильно записать в ...

При клике на ссылку не открывается нужный контент, хотя url меняется.
Привет. При клике на ссылку не открывается нужный контент, хотя url меняется. После перезагрузки все подгружается или когда сам вручную меняю адрес. header.jsx import './header.css'; import {...

Разница между React и React native
Я хочу начать освоение React для фрондента, но при этом хотел бы иметь возможность писать мобильные приложения. И поэтому у меня вопрос: эти фреймворки сильно отличаются друг от друга? Много ли...

React как сделать анимацию прозрачности при клике?
React как сделать анимацию прозрачности при клике? https://reactcommunity.org/react-transition-group/transition Тут, конечно, целый пример, но я не понял как подгрузить бибилиотеки с анимками....

Почему не размонтируется компонент?
Приветствую уважаемых коллег.! Сначала делаю так: render() { return ( <div> {this.props.conditionToShow && <Component1 />} </div> ) В этом случае, всё работает как надо: Каждый раз...

React-теры подскажите (сортировка)
Коллеги подскажите как сделать из этого сортировку по возрастанию и убыванию. Пы\сы: гуглил очень много import React, { Component } from "react"; import ProductData from "../test.json"; ...

Использование setState с forEach.
В работающем примере import React from "react"; import ReactDOM from "react-dom"; import App from "./components/app"; import "./styles.css"; const listItems = ; const rootElement =...

Undefined API React
Добрый день! Разрабатываю простенькое crud приложение c интеграцией с готовым backend. Возникла проблема: данные, которые отправляются на сервер получаются Undefined и не отображаются в итоговой...

Не работает функция jquery внутри компонента react
Здраствуйте, помогите найти причину, не работает функция jquery внутри компонента на react , вот так выглядит компонентimport React from 'react'; class CaroselPagination extends React.Component { ...

Валидация мапы на Yup
Есть некоторый массив ключей const products = ; и стейт компонента в виде мапы import React, { Component } from 'react'; class Animal extends Component {

Посоветуйте курсы по React JS
Народ, всем привет. Вот недавно начал изучать React JS вот по этим видео: https://www.youtube.com/playlist?list=PLIcAMDxr6tpoShAiU0Nh_nBtg19XWbCql Подскажите, какие материалы изучали лично вы,...

JS React Как сравнивать значение формы со строкой (e.targer.value == '?')
Есть форма с двумя кнопками и событие. Не работает сравнение e.targer.value с value заданное кнопкам. onTaskButton(e){ e.preventDefault(); if (e.targer.value == 'But1') { ...

Передать json через пропс в другой компонент и вятынуть данные
Доброго времени суток. Подскажите в вопросе. Получаю данный из запроса (JSON), затем пытаюсь передать его в другой компонент через props, но не могу потом вытащить из него значение. ...

Асинхронный запрос
Запрашиваю данные с БД, потом экспортирую, и когда испортирую в другой файл, то приходит promise. Как сделать, чтобы не promise приходил, а данные? const elementsData = () => { const dataDb =...

Почему событие срабатывает только со второго раза?
Пишу клон трелло и событие написано на добавление доски и задачи но почему работает только со второго раза подскажите? Компонент где происходит событие export const...

Не работает роутинг в продакшене create-react-app
Добрый день, Не работает роутинг в продакшен режиме create-react-app, в деве все нормально работает, подскажите пожалуйста что подправить. Index.js: import {BrowserRouter} from...

Динамическая таблица с select
Есть таблица: <table> { showTime && group &&<tr> <td>1</td> <td>2</td> </tr> }

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2023, CyberForum.ru