Ответы пользователя по тегу React
  • Как дать загрузиться контенту?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Но мне кажется что это костыль. Как правильно решить эту задачу ?

    поставить loading = false при начале загрузки картинок, и после загрузки поставить его в true. Как именно - зависит от того как вы их грузите.
    так как загружаются они видимо где-то еще, то loading вам придется хранить в стейте приложения, а не компонента.
    Ответ написан
  • Как реализовать запрет перехода на роут без авторизации?

    Robur
    @Robur
    Знаю больше чем это необходимо
    просто рендерите роут или нет в зависимости от того авторизован ли пользователь

    {isAuthoruzed && <Route path='profile'><Profile/></Route>}


    можно это завернуть в ProtectedRoute, в документации есть пример, прочитать ее быстрее чем на тостер вопрос писать
    Ответ написан
    Комментировать
  • Почему простая кнопка закрывает модальное окно?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Скорее всего клик уходит куда-то вверх по дереву и срабатывает обработчик "закрыть окно при клике на страницу".
    Тот же что закрывает окно если вы кликните мимо него в серую область.
    Если это так то ивент надо где-то остановить по дороге. Если нет то разбирайтесь, гадание по скриншоту давно не в моде.
    Может библиотека эта просто коряво написана.
    Ответ написан
  • Нормально ли иметь много React компонентов в небольшом проекте?

    Robur
    @Robur
    Знаю больше чем это необходимо
    да.
    "Много" - это сотни.
    А по вашей ссылке меньше 10 - с большой вероятностью там даже упрощено для примера.
    Ответ написан
    Комментировать
  • Как правильно написать HOC компонент на ReactJS?

    Robur
    @Robur
    Знаю больше чем это необходимо
    () => (wraped)

    Это будет иметь смысл если в первых скобочках будут какие-то параметры.
    То есть вы можете сделать функцию которая будет как-то сконфигурирована, которую можно вызывать передавая wraped.
    например
    const withBookStoreService = (consProps) => (wraped) => {
      return (props) {
        return (
          <Consumer ...consProps>
            {
              (value) => {
                return (
                  <Wraped {...props}
                )
              }
            }
          <Consumer>
        )
      }


    Тогда вы можете сделать

    const hoc1 = withBookStoreService(props)
    const hoc2 = withBookStoreService(otherProps)
    
    const wrappedInHoc1 = hoc1(component)
    const wrappedInHoc2 = hoc2(component)


    Скорее всего в оригинале это так и было, потом просто упростили до потери смысла. В таком виде как вы привели это конечно излишняя конструкция.

    так же можно написать () =>() =>() => (wrapper)
    Ответ написан
    2 комментария
  • Инверсия зависимостей в React! Почему это анти-паттерн?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Поделитесь откуда вы взяли что это антипаттерн?
    И где тут инверсия зависимостей?

    В целом то что вы описали - не только "можно" но и распространенная схема.

    Widget предоставляет интерфейс для работы с ним - такие то пропсы можно передать,
    такие то методы он может принять.

    Дальше container организует ему это все. И тут Widget является источником api - что у него в логике и в пропсах прописано - так и надо использовать.

    Какой там Container уже все равно пока он использует Widget правильно.

    Если вы хотите в Widget передавать компоненты которые этот Widget должен внутри себя рендерить - это тоже нормально, для Widget это просто еще один из пропсов.

    классический пример (не считая уже встроенного в JSX children) - кнопка с иконкой, кнопка в пропсах объявляет что у нее есть возможность получить иконку, и предполагает что-то насчет нее (например она должна быть квадратной, не больше 40 пикс и тп)

    А дальше вы в Container пишете <IconButton icon={<Icon/>}>Hello</IconButton>

    Никакое знание о вашем контейнере в кнопке не нужно.
    Ответ написан
    Комментировать
  • Не получается установить React Navigation?

    Robur
    @Robur
    Знаю больше чем это необходимо
    git есть на машине?
    Ответ написан
    Комментировать
  • Типизация мапы соответствий в react typescript?

    Robur
    @Robur
    Знаю больше чем это необходимо
    type X = {[k in TypeText]: () => {}}

    Я бы подставил ваши типы, но они плохо копируются из картинки, а набирать их руками мне лень
    Ответ написан
    1 комментарий
  • Почему не работает React JS?

    Robur
    @Robur
    Знаю больше чем это необходимо
    js файл тоже надо подключать в html, сам по себе он там не появится.
    Ответ написан
    Комментировать
  • Как найти работу удалённо без опыта мамкиному фронтенд девелоперу?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Я уже могу искать работу удалённо

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

    (боюсь с пустым гитхабом идти на собес)

    Бояться или искать - выберите что-то одно.

    По факту - все зависит от ваших скилов и смелости, под словами "знаю реакт" может быть что угодно, а смелости у вас не очень пока что.
    Ответ написан
    Комментировать
  • Нужен ли Redux, когда есть React Hooks?

    Robur
    @Robur
    Знаю больше чем это необходимо
    редакс и хуки никак не связаны.

    Редакс нужен, если вы собираетесь его использовать. Если не собираетесь - не нужен.
    Учить "новые хуки" стоит.
    Ответ написан
    Комментировать
  • Какие существуют методики и инструменты для масштабируемости проекта?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Словом нужно заложить масштабируемость в проект, который не требует пока масштабируемости, но если потребует, нужно сразу увеличить возможности сервиса


    Первым делом - четко определить на какую нагрузку вы рассчитываете и какого типа она будет.
    Например - 10000 запросов в секунду на сервер.
    или 10000 пользователей в день загружающих фронт.
    или 100 тяжелых запросов в базу в минуту.
    До этого разговор будет непонятно о чем.
    Потом проверить сколько может вытянуть текущая архитектура/железо.
    А то может окажется что если добавите +$10 в месяц на инстанс помощнее то вашего текущего сервера вам еще лет на 5 хватит
    Ответ написан
    2 комментария
  • Что за ошибка и как с ней бороться?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Надо показывать код в том месте где ошибка.

    Скорее что у вас там `Position()`, а как правильно, учитывая что это реакт-компонент, зависит от того что вы там делаете.
    Ответ написан
    Комментировать
  • Как достать данные с сайта?

    Robur
    @Robur
    Знаю больше чем это необходимо
    .json выделил черным цветом потому что пропадало при предпросмотре

    А пропадало потому что вы не используете тег code, чем вызываете раздражение у окружающих и в целом нарушаете правила.

    По теме - посмотрите в девтулзах запрос на сервер для начала - что отправилось, что пришло.
    Может у вас вообще gettingPosition не вызывается
    Ответ написан
    1 комментарий
  • Какие решения React(а) учить для Angular разработчика?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Мне нужен перечень того что сейчас в React Best Practice.

    Какой вы. Всем нужен.

    Основное отличие реакта от ангуляра - это то что реакт занимается исключительно рендерингом и все остальное оставляет на откуп разработчику. Это крайне эффективный узко специализированный инструмент для самой сложной задачи в веб разработки.
    Он не определяет способ стилизации, методы локализации, хранение стейта, работу с роутингом, работу с данными, общение с сервером, и прочее и прочее. Это примерно как от DirectX ожидать предоставления апи для работы с БД.

    Поэтому если вы пришли из ангуляра и привычно ожидаете все готовенькое - то первое что надо учить - это построение архитектуры приложений. Потому что в реакте это ваша ответственность, какие бы best practices вы не взяли.

    Есть "мейнстримовые" реализации для основных задач - например для роутинга react-router стандарт, для стейта приложения - redux и mobx, тестирование - jest. Но уже на уровне стилей начинается разброс - одному нравится так, другому нравится по другому.
    Ответ написан
    1 комментарий
  • Стоит ли использовать TypeScript в Redux?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Если переводите приложение на тайпскрипт - то имеет смысл переводить его полностью. Не важно редьюсеры там или еще что.
    Вот чего точно не стоит - это держать вперемешку js и ts код.
    Ответ написан
    Комментировать
  • Что сейчас требуется?

    Robur
    @Robur
    Знаю больше чем это необходимо
    что сейчас требуется джуну,

    Сейчас (как впрочем и раньше) в первую очередь - мозги.
    Без них вы повторите путь многих которые "не смогли войти-в-айти".

    Либы-технологии вы все равно будете знать весьма поверхностно и изучать по ходу дела работы над реальным проектом. Поэтому не так важно, что именно вы изучите.
    Ответ написан
    Комментировать
  • Почему появляется ошибка что отсутствует тип?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Потому что вы типа пропсов для WithCrud ставите такой же как у App.
    Сделайте новый интерфейс пропсов для WithCrud класса

    или можете просто написать class WithCrud extends React.Component<{}> {

    И почитайте про дженерики - они тут вам или не нужны или надо использовать не так
    Ответ написан
  • С помощью каких инструментов удобней всего делать админки на React?

    Robur
    @Robur
    Знаю больше чем это необходимо
    https://pro.ant.design/docs/getting-started вот например посмотрите. Основано на их-же бесплатной либе компонентов - формы там тоже были, немного странные, но достаточно гибкие.
    А так вообще - чем админка отличается от обычной аппы по большому счету? ничем. Берите какой-нибудь хороший компонент форм для всего этого crud, чартов если надо, роутинг и вперед.
    Ответ написан
  • Как решить проблему с LocalStorage в приложении через Redux?

    Robur
    @Robur
    Знаю больше чем это необходимо
    componentDidMount у вас null.

    попробуйте
    componentDidMount = JSON.parse(componentDidMount) || []


    а вообще json.parse надо в try/catch завернуть
    Ответ написан
    Комментировать