• Когда использовать сторонние компоненты, а когда писать свой?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Добавлю, что иногда готовый компонент "перебор". Например, многию пихают redux-form, когда нужно просто проверить заполнены ли поля, или пихают redux, когда надо данными связать 2 компонента... или пихают реакт, когда хватит карусели на jQuery (ну вы поняли...).
    Ответ написан
    Комментировать
  • Зачем нужен firebase?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Нужно, чтобы не поднимать свой бэкэнд, для хранения данных, обновления... оповещений и так далее, всего того, что с данными связано и что успеют напихать в firebase разработчики.
    Ответ написан
    Комментировать
  • Как правильно грузить статические файлы (картинки, доки) в React/Webpack?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Для первого варианта: попробуйте file-loader (а не просто file).

    Для второго варианта: картинку надо брать из public директории.

    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/static/' // название директории
      },


    <img src='./static/popup-illustration.png' />

    Во втором случае картинка не попадет в webpack, а будет отдана как есть.
    Ответ написан
    1 комментарий
  • Почему при изменении состояния в redux не рендерится компонент?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Чего-то здесь не хватает... логика поиска проблемы правильная. Если в вашем редьюсере в консоль падает то, что нужно, значит следуйте дальше: в компонент, где этот редьюсер подключен и смотрите внутри mapStateToProps так же с помощью консоли, изменились данные или нет. Правильно ли вы их подключили и т.д. (получается вам надо проверить и SideBar и SideBarChat)
    Ответ написан
  • React Router как скрыть компонент?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Можно вообще не использовать роутер. В компоненте проверять url адрес нативно, и рисовать или нет компонент.
    { window.location.pathname !== '/authorize' && <Menu /> }


    Location (MDN)
    Ответ написан
    Комментировать
  • Какую IDE выбрать для React?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Норм холивар =) плюсану за VS Code
    Ответ написан
    Комментировать
  • Django rest framework, react, redux как сделать вход пользователей?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Запрос к апи разумеется в экшене (ну если быть точнее, то в AC - action creator, функции, которая диспатчит ваши экшены). Сессию храните где вам удобнее. Если бы это был JWT - можно было бы хранить в localStorage, хотя по этому поводу много споров (безопасино или нет в LS хранить).
    Ответ написан
    Комментировать
  • Как установить или передать через redux state компоненту?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    function mapStateToProps(state) {
        console.log(state) // и здесь смотрите, есть ли у вас в state - state.potato, если нет, значит забыли это сделать в корневом редьюсере. А если есть, то смотрите что у вас хранится в state.potato.products
        return {
    //potate-store
            products: state.potato.products
        }
    }


    Скиньте свой корневой редьюсер, который вы передаете в configureStore функцию, если не разберетесь.
    Ответ написан
  • Как сделать модальные окна для карточек товаров?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    React-modal хорошая библиотека, ничего лишнего, я бы рекомендовал оставить ее.
    Как сделать модалку:
    на том уровне, где у вас отрисовывается каталог, или даже выше - вы рисуете модальное окно и ему передаете признак, по которому оно открыто, например: isProductModalOpen (true / false). Этот код находится в "контейнере", приконекченном к redux.

    Далее при клике на кнопку подробнее, вы бросаете экшен OPEN_PRODUCT_MODAL + айдишник товара (который будете запрашивать с сервера) или + всю инфу о товаре, если она у вас уже есть и вам ничего не нужно запрашивать.

    Редьюсер, отвечающий за модальные окна принимает этот экшен и обрабатывает. В частности устанавливает значение, на которое вы опираетесь в контейнере и делаете true для флага isProductModalOpen

    По закрытию модалки - так же улетает экшен, который обрабатывается в редьюсере и признак isProductModalOpen ставится равным false.

    Готово!

    Такой подход позволяет делать несколько модальных окон разных типов.
    Ответ написан
    3 комментария
  • Для чего нужны imutable данные в React?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Нет профита, не заморачивайтесь.
    Когда "профит" от immutable будет маячить на горизонте, вы уже будете к этому готовы (либо столкнетесь с какой-то проблемой и выйдете на иммутейбл, либо просто повысите теоретическую базу / сложность задачи). Насколько я понимаю, с использованием immutable и без использования .toJS() - поиск в структуре ваших данных будет производиться быстрее.

    p.s. если найду видео добавлю, там была презентация. пока не нашлось.
    Ответ написан
    Комментировать
  • Как при сборке с помощью webpack преобразовать в содержимое тега img в base64?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Все что нужно для движения, это все, что хотим пропустить через webpack делать с помощью import / require.
    <img src={require('path/to/img.jpg')} />

    Почитать остальное можно здесь (EN). Там заодно пример и css.
    Ответ написан
    3 комментария
  • Как исправить код React и использовать babel?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    import React, { Component } from 'react';
    
    class SearchBar extends Component {
      constructor(props) {
        super(props);
    
        this.state = { term: ' ' };
      }
    
      render() {
        return ( // в круглых скобках возвращаем, если более 1й строки
          <div>
            <input onChange={event => this.setState({ term: event.target.value })} />;
          </div>
        )
      }
    }
    export default SearchBar;
    Ответ написан
    1 комментарий
  • Когда в методе render React.JS отрисовываю список, и хочу отобразить только например 'name', выводить id елем. +name, с чем это связано?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Насколько я понял, это связано с работой OrderedMap.
    OrderedMap.map по умолчанию возвращает не массив, а объект.
    5a9708586c066449345178.jpeg
    Ответ написан
    1 комментарий
  • React js как учить?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    У меня в профиле есть информация о старых учебниках + новый в процессе.
    Старые продублирую. Практика устарела, но теория не плохая.
    Ответ написан
    Комментировать
  • Как определить с какой страницы перешли?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Откуда берется название?
    По факту откуда - не важно. Важно, там где оно есть его передать. Если это title страницы, можно вытащить его стандартным методом (document.title). Можете хранить одно значение "предыдущая страница" или всю историю брождений по вашим "страницам" в редьюсере или sessionStorage (если без redux или не хотите засорять), а класть данные туда с помощью коллбэка в onpopstate

    Следовательно, если у вас redux - то нужно писать так:
    window.onpopstate = function(event) {
      sendLastPage(document.location, document.title);  // ваш_экшен_крейтор(данные_для_передачи)
    };

    Если без redux - то аналогично, складывая в sessionStorage
    Ответ написан
    Комментировать
  • React form validation with refs?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Если вы будете использовать ref, то значит вы будете иметь доступ к DOM элементу, значит и валидацию надо делать "дедовским" способом, через навешивание обработчиков onChange на все ваши ref'ы (на всю вашу форму тоже получится, зависит от задачи).

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

    Основы по браузерным событиям (learn.javascrip.ru).
    Ответ написан
    Комментировать
  • Все ли приложение будет ререндерится, если измениться какой то внутренний(где то в приложении) state одного из компонентов?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Разумеется что нет. Рендерится (перерисовывается) только "та часть" (тот компонент), в которой были изменены пропсы/стейт + все дети если в них нет оптимизаций (например, они могут быть сделаны как stateless, pureComponent или иметь shouldComponentUpdate - тогда перерисовываться не будут при описанных условиях).

    вижу обновили вопрос: да, только футер.
    Ответ написан
    2 комментария
  • Как добавить поле в Record в immutable.js?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    case ADD_PRODUCT_TO_CART_SUCCESS: {
      return state.setIn(["entities", payload.productUid], {...payload.product, count:  ВАШЕ_КОЛИЧЕСТВО});
    }

    В этом коде мы берем все что было в payload.product и по 1 полю добавляем в новый объект ( фигурные скобочки = новый объект), а так же добавляем поле count. Количество (count) вы так же, наверняка, будете передавать в экшене. Получится: count: payload.count (или как вы назовете поле в вашем экшене...)

    Пример:
    { type: ADD_PRODUCT_TO_CART_SUCCESS,
        payload: { productUid, product, count: ваше_количество } // сюда count можно передавать из функции с помощью которой ваш экшен был создан...
      }
    Ответ написан
    2 комментария
  • Как перебрать props в react.js?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    В добавок к ответу Романа - учитесь читать ошибки. Что у вас написано: this.props._sharedData.account.map is not a function. Почему? Потому что this.props._sharedData.account.map = undefined, а undefined() = ошибка с таким текстом.

    А все почему? потому что метод map работает только для массивов! А у вас объект. Чтобы вам было легче изучать реакт и иметь хороший прогресс - подтяните основы (можно на learn.javascript.ru)
    Ответ написан
    Комментировать
  • Что такое side эффект?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Sideeffect - это что-то, что может повлиять на "чистоту" вашей функции. Редьюсер же - функция. Чистая функция, это значит такая, что если ей на вход подать одни и те же параметры, то результат будет всегда один и тот же.

    Пример: есть у вас в localStorage имя пользователя. И вы в коде пишите, что-нибудь такое:
    case SET_DISPLAY_NAME: {
      return {
        ...state,
        name: window.localStorage.getItem('name') ? window.localStorage.getItem('name') : action.payload,
      }
    }


    Следовательно, если вы подадите на вход функции, имя Вася, то оно вам вернет Васю только если "в sideeffect локал_сторадже" нет ничего. Здесь вы не можете быть уверены, что если подать Васю, вам всегда вернется Вася.

    По примеру с комментариями - не думаю что хороший пример. Айдишники генерировать будет бэкэнд ваш. Вы добавляете новый комментарий путем отправки его на сервер, с сервера приходит статус "ОК" и ваш комментарий уже с айдишником.

    Бывает, что айдишники нужно генерировать самому, тогда они отлично генерятся в acftionCreator'ax. Например, делаете вы систему уведомлений, и у каждого уведомления должен быть свой id (например, тут сервер вам не нужен, вы ничего туда не отправляете, просто визуальная часть). В таком случае, я бы не стал генерировать id через middleware, а просто делал бы это в "экшенах".

    Тем не менее, с генерацией айди все тоже самое, что и с localStorage. Вы не уверены, что подав на вход: имя, текст комментария и почту - получите ТОТ же результат, что и в прошлый раз с такими же входными параметрами (айдишники то разные будут!)
    Ответ написан
    3 комментария