• Когда лучше всего отправлять запрос об изменении текста в input?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Для этого придумали функцию debounce
    onChange={debounce(this.onInputChange, 300)} // будет вызываться не чаще чем раз в 300 ms
    Ответ написан
    1 комментарий
  • Когда лучше всего отправлять запрос об изменении текста в input?

    @frozen_coder
    Java-developer
    Вызывать отправку в onChange. Гуглите в сторону реализации debounce, например у lodash есть.
    Ответ написан
    1 комментарий
  • Как вы организовываете folder structure в medium-to-large size react приложении?

    @frozen_coder
    Java-developer
    Разбиваю на папки по как-бы модулям - по разделам приложения. В каждой такой папке уже есть подпапки с actions, components, constants, reducers и проч. У каждого такого модуля есть свой компонент роутера, а редьюсеры собираются в один. Компонеты-роутеры потом собираются в компоненте роутера верхнего уровня, аналогично и для редьюсеров. Таким образом разделы приложения получаются слабо связаны друг с другом. CRA никак же не ограничивает в структуре папок в src.
    Ответ написан
    2 комментария
  • Как открыть фрагмент из адаптера RecyclerView?

    zagayevskiy
    @zagayevskiy Куратор тега Java
    Android developer at Yandex
    Адаптер отвечает за заполнение ресайклервью. Нужно создать интерфейс
    interface ItemClickListener{
        void onItemClick(ItemType item);
    }

    ItemType - тип элемента, или, например, int - номер позиции.
    Создать метод адаптеру setotemclicklistener(ItemClickListener listener), где запомнить листенер.
    При нажатии на элементы - вызывать метод onItemClick с соответствующим параметром.
    В месте создания адаптера (фрагменте, активити, etc) - создать листенер и передать его в адаптер. В коллбеке открывать нужный фрагмент.

    >>пишет cannot resolve method
    getFragmentManager()

    Это потому, что у адаптера нет этого метода, он есть у активити, например.
    Ответ написан
    Комментировать
  • Javascript. Какой использовать паттерн инициализации класса с асинхронным запросом внутри?

    Negwereth
    @Negwereth
    lvivcss.com.ua
    Фабрика.

    И да, а надо ли вам именно классы-классы? Может, вам обычной композиции объектов хватит? Тогда фабрика у вас вообще на 100% отработает.
    Ответ написан
    2 комментария
  • Что это за кнопка в Ubuntu Gnome 17.04?

    teke_teke
    @teke_teke
    programador
    Не вздумайте нажимать.
    Ответ написан
    Комментировать
  • Как подключить бд к react?

    Young_khv
    @Young_khv
    ASP.NET Developer
    По большому счёту ответ: никак =)
    React это client-side библиотека, его задача данные показать, да пользовательские данные собрать. Для реализации сохранения/загрузки данных вам необходимо будет создать отдельное приложение (Node.js/Python/PHP/ASP.NET или любом другом, гуглите инструменты для создания RestAPI) с API методами, внутри которых уже и будет вся работа с БД. А реакт будет просто дёргать соответствующие методы посредством, например, AJAX запросов и выводить данные пользователю.
    Ответ написан
    Комментировать
  • Какими минимальными средствами можно сделать существующий чат realtime-овым?

    @Wexter
    nodejs + socket.io
    Ответ написан
    Комментировать
  • Как спроектировать парсер нескольких сайтов в "реальном времени" на Python?

    Astrohas
    @Astrohas
    Python/Django Developer
    Парсинг в реальном времени зло которое замедлить всю вашу систему. А не проще ли индексировать сайты в базу данных и от туда выдавать результаты? Можно запускать задачи парсинга например раз 10 минут, чего будет достаточно.
    Параллелизм обычно делается потоками. Можно почитать тут https://habrahabr.ru/post/229767/, https://habrahabr.ru/post/78267/
    .
    Для организации тасков можете какую нибудь целюру использовать
    Ответ написан
    Комментировать
  • С чего начать карьеру, если чувствуешь свою проф непригодность, хотя никогда не пытался устроиться?

    platotel
    @platotel
    IT Product Manager
    selfdestroy, добрый день. Что мне бросилось в глаза:
    - ник про саморазрушение и отсутствие аватарки, что иногда (не всегда) бывает признаком низкой самооценки. Да, есть те, кто по идеологическим или ещё каким-то причинам не хочет афишировать своё лицо, у кого-то просто нет хорошей фотографии, кто-то больше любит какую-то картинку поставить вместо лица, но нет ли именно проблем с восприятием себя?
    - наложение на себя клейма: "проф непригодность", "не обладаю супер знаниями",
    - страх отказа ("никогда не пытался устроиться"),
    - позиция "снизу", демонстрация чувство вины ("извиняюсь"),
    - растерянность ("понятия не имею, как найти", "не знаю, куда плыть дальше"),
    - настрой на провал ("меня просто нигде не возьмут"),
    - "никогда не щупал продакшн в живую" - есть стажировки, Open Source проекты, онлайн-курсы, на которых можно делать свой проект, обучаясь.

    Если Вы сами не верите в себя, кто в Вас поверит? Пожалеют - да, кто-то добрый - даст совет, но сами подумайте: Вы бы взяли на работу человека, который бы на собеседовании говорил, что вообще-то, он плохо подготовлен для работы у Вас, который бы на вопросы о известных ему технологиях сказал бы что-то о том, что не пробовал их изучать, потому что они слишком сложны и т. п.

    Я Вас очень понимаю в том, что иногда хочется опустить руки и переложить ответственность за свою жизнь на кого-то другого или на сложные обстоятельства. Но Вы ведь понимаете, что сильнее Вас за Ваши мечты и идеалы не будет бороться никто? Только Вы можете сказать себе: "я - хозяин своей жизни, и всё, что со мной происходит - результат моих действий либо моего восприятия происходящего". Очень просто сказать: "полюби себя", "начни ценить себя", но часто за низкой самооценкой кроется именно нежелание брать на себя ответственность за свою жизнь. Попробуйте что-то делать в этом направлении. Тогда и в программировании, и в трудоустройстве, и в общении с окружающими станет проще.
    Ответ написан
    17 комментариев
  • Как вы делаете jwt аутентификацию в server-side react приложении?

    @LiguidCool
    От MitM вас защитят только SSL сертификаты и иконки на сервере.
    Где хранить? Ну вообще это не так важно, но я бы хранил в LocalStorage. Хз почему, просто левая пятка говорит.
    Хотя если у вас не совсем REST, то можно хранить токен в кукисах и отправлять "по классике" (в заголовках).
    Ответ написан
    7 комментариев
  • Нужна лучшая практика что бы убрать писанину в action?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Сначала тоже казалось "писанина", смотрел в сторону разных middleware'ов и т.д.
    А потом понял - что тут проблемы лично для меня никакой нет. Открываешь старый проект, на котором нашли баг/нужно что-то добавить - и вот оно, все просто по полочкам: есть действие пользователя -> есть action creator -> есть action с определенным типом -> есть reducer ... Достаточно 10 минут, чтобы освежить в памяти "что откуда и куда", поэтому я решил не придумывать и не усложнять.
    Ответ написан
    Комментировать
  • Как защитить ссылку на видео от распространения?

    AppFA
    @AppFA
    Frontend developer at Yandex
    Для каждого клиента генерировать рандомный хэш - будет ссылка, далее на стороне сервера проверять данные клиента (токен\куки\сессию) если все верно - отдавать страницу, нет - отдавать ошибку. Все по-моему довольно тривиально.
    Ответ написан
    3 комментария
  • Какой необходимый уровень знаний для junior React.js Разработчика?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    UPDATE: реальные тестовые задания и разборы здесь, ответы на все вопросы из поста в моем блоге об обучении react.

    не включая основы js

    Извините, но стандартная задача, про "напишите функуцию add, которая при вызове add(1)(2) вернет 3" - многих положила на лопатки =) Поэтому будьте готовы..

    React
    0) Какую проблему решает react ?
    1) Мгновенно ли срабатывает setState? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен?
    2) Зачем многие постоянно пишут в constructor: this.FUNCTION_NAME = this.FUNCTION_NAME.bind(this) и отсюда вопрос вытекает чему равно this в разных местах вашего компонента...
    3) в каких методах жизненого цикла стоит выполнять xhr запросы? В каких стоит "обновлять state на основе props"?
    4) Что будет если вызвать this.setState в render методе компонента?
    5) зачем нужен componenWIllUnmount, приведите пример..
    6) Контролируемые, не контролируемые компоненты
    7) Как организовать роутинг в реакт приложении? (ответ: взять react-router - подходит, но было бы круто, если бы вы рассказали, как он примерно работает)*
    8) Зачем нужны propTypes? Что происходит с ними в production сборке?
    9) Как можно удобно "отлаживать" чужой код приложения, написанного на react (намек в сторону React devtools)
    ...

    Redux
    0) Какую проблему решает redux?
    1) Зачем многие создают типы действий NAME_REQUEST / NAME_SUCCESS ? А заодно, что такое "действие", а что такое "создатель действия"...
    2) Что такое редьюсер? Можете написать простой редьюсер без react/redux?*
    3) Для чего нужен redux-thunk? Как он работает? Напишите (можно псевдокод) асинхронный создатель действия (либо, если надоело говорить "терминами" - асинхронный aciton)
    4) Как компоненты приложения получают "пропсы" из "стора"?*
    5) Можно ли (и считается ли это нормальным) использовать state, если используется Redux?
    6) Почему в reducer'ax мы возвращаем новые объекты? Приведите пример, когда вы возвращаете новый объект, а когда тот же самый.
    6.5) А так же, "как в js вообще это работает?". Например:
    let obj1 { name: 'Test', age: 100 }
    let obj2 = obj1
    obj2.name = 'Test_new'

    Что будет в obj1, почему? В каких случаях объекты могут быть равны?
    7) Что возвращает функция connect (из react-redux)?
    ...

    Общее:
    0) package.json
    1) Webpack, gulp, etc...
    2) node.js
    3) promise

    Что-нибудь практическое:
    1) Как бы вы валидировали форму, если ошибки валидации приходят после submit'a ее на сервер..
    2) Почему не работает следующий код, сделайте чтобы работало
    ...
    На истину не претендую, но такие вопросы имели место быть на собеседованиях. В беседе можно многое разузнать дополнительными вопросами и так далее. Так же, если часть вопросов вам неизвестна - не беда, многие и на половину ответить не могут.

    p.s. возможно дополню...
    p.p.s. звездочкой отметил, на мой взгляд не самые необходимые для junior-собеседования вопросы.
    Ответ написан
    31 комментарий
  • Как в react-redux реализовать вызов метода в ответ на изменение стейта?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Добрый день.

    Представим ваш action creator (функцию), которая на success возвращает успешную авторизацию, например:
    $.ajax(url...
      success(data) { dispatch({type: AUTH_SUCCESS, data }) })


    Кто мешает сделать так?
    $.ajax(url...
      success(data) { 
        dispatch({type: AUTH_SUCCESS, data }) 
        loadUserCart(data.user_id) // <- еще один action creator
    })

    Суть уже понятна? Мы после успешной авторизации юзера, вызываем сразу же следующий экшен-крейтор:
    function loadUserCart(id) {
      return (dispatch) => {
        
        dispatch({ type: CART_REQUEST }) // получается, это событие вызовется сразу после успешной авторизации, практически мгновенно
    
        
        $.ajax(urlForCartUpdate...
          success(data) { 
            dispatch({type: CART_SUCCESS, data })
        })  
      }
    }


    Далее вы в компоненте с корзиной, настраиваете показ прелоадера, и вуаля! Получается, для юзера, без задержек, как только он авторизовался - у корзины будет крутиться прелоадер. Юзеру все понятно, он занимается своими делами. Как только "данные подъехали" - вы скрыли прелоадер и показали ему необходимые данные по корзине.

    нужно сначала сделать AJAX-запрос, а по его результатам уже рендерить корзину

    Именно это мы и сделали.

    P.S. не знаю, требуется ли это, но на всякий случай укажу, что чтобы сделать прелоадер в шаблоне, вам нужно в редьюсере корзины создать какое-нибудь поле (флаг), например isLoading и устанавливать его в true когда получите action с типом CART_REQUEST, и false для CART_SUCCESS. Таким образом, вы сможете сделать банальный if в шаблоне рендера и показывать либо разметку прелоадера, либо разметук с данными корзины.

    === вторая часть ===
    В компонентах-контроллерах есть только функция connect() со своими функциями-аргументами, которые передают данные в представление. Как-то реагировать на изменения состояния такие компоненты не умеют (я ведь не ошибаюсь в этом?).

    Еще как умеют, в этом и суть. Вы в mapStateToProps передаете в общем случае:
    {
      ваше_название_поля: reduxStore.название_редьюсера
    }

    В частном случае, может выглядеть так:
    function mapStateToProps(state) {
      return {
        rate: state.rate,
      }
    }


    После того, как вы "подписались" на изменения в state.rate, (а это, если говорить об частном случае, скорее всего reducer с названием rate), ваш "приконекченный" компонент всегда будет получать новые props при изменении в редьюсере. Следовательно, будет вызываться функция render. Само собой - можно хоть сколько "редьюсеров подключить" к одному компоненту.

    Имейте ввиду, что все здесь написано для понимания простым русским языком, на самом деле, так как вы используете компонент Provider на самом верхнем уровне вашего приложения, он прокидывает необходимые props вниз. Ваши connect(Компоненты) умеют реагировать на изменение необходимых props => реакт вызывает рендер, так как "пришли новые props".
    Ответ написан
    2 комментария
  • Можно написать чат используя только ajax?

    bazilio2010
    @bazilio2010
    Мужчина
    конечно
    Ответ написан
    Комментировать
  • Как перерисовывается DOM при использовании с Redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    В общем случае, метод render компонента вызывается в случае изменения state / props
    Никто (даже создатель библиотеки Redux) не просит вас отказываться от state. Это хорошая и удобная "фича" компонентов в react.

    Когда вы подключаете redux, вы оборачиваете все свое приложение в Provider (конечно, с указанием store). Затем Provider прокидывает куда нужно (в зависимости от ваших "подключенных" через функцию connect компонентов) необходимые props. Так как приходят новые props - вызывается метод render и компонент перерисовывается.

    Во всем этом можно убедиться, если посмотреть ваше корректное приложение на redux через React Dev Tools в консоли браузера. Вы увидите, что на самом верху "гнездится" Provider с кучей данных. Затем ниже по дереву, вы найдете свои, обернтуые в connect(Компонент) компоненты. Никакой магии здесь нет.
    Ответ написан
    Комментировать
  • Почему не обновляется props после unshift и dispatch?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Взял текущее состояние, добавил в начало массива элемент. сделал диспатч нового массива.

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

    Т.е. вы возвращаете тот же самый объект (в js объекты передаются по ссылке), для react вьюхи ничего не изменилось, значит render вызывать не надо => ничего не происходит.

    Попробуйте возвращать новый(!) массив, в вашем случае это:
    setAdminData: [clients_info, ...currentList]

    Либо чуточку понятнее, но вставляя в конец массива:
    setAdminData: currentList.concat(clients_info)

    Метод concat всегда возвращает новый массив.

    Ну и чтобы стало совсем понятно в чем дело, попробуйте в консоли выполнить следующий код:
    let arr1 = [1,2,3,4]
    let arr2 = arr1
    arr2.unshift(1)
    console.log(arr1)

    Вопросы: чему равен arr1? Почему? Будет ли arr1 === arr2, почему?
    Еще вопросы: В каком случае react вызывает функцию render?
    Ответ написан
    5 комментариев
  • Как вывести данные API в таблицу?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Не надо с DOM напрямую работать.
    Создаете в state переменную: data
    Далее в componentDidMount выполняете ajax запрос и его результат записываете через this.setState({data ... })
    В render методе своего компонента, в таблице делаете обход по this.state.data с помощью map / forEach / тд

    Пример:

    ...
    constructor(props) {
        super(props)
        this.state = {
          data: []
        }
    }
    ...
    componentDidMount() {
        // ваш ajax запрос
        // в success коллбэке устанавливаете новый state, из-за этого произойдет ре-рендер
        success: function(data) { this.setState(data) }
    }
    render() {
    const { data } = this.state
    ...
        <table className='table table-bordered table-striped'>
            <thead>
              <tr>
                <th>name</th>
              </tr>
            </thead>
            <tbody>
              {
                data.map(item => {
                  return (
                    <tr key={item._id}>
                      <td>{item.name}</td>
                    </tr>
                  )
                })
              }
            </tbody>
          </table>
    ...
    }
    Ответ написан
    Комментировать
  • В какую сторону развиваться СисАдмину?

    Francyz
    @Francyz
    Photographer & SysAdmin
    В сторону программирования)))
    У меня куча знакомых ушли из админов в прогеры, потому что со временем ты начинаешь уставать от того, что получаешь 20-40 тыс. (Это регионы) и объясняешь людям с двумя высшими образованиями и ЗП в 200+ тыс как отсортировать почту по дате.
    Ответ написан
    28 комментариев