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

Максим

https://maxpfrontend.ru, обучаю реакту и компании
Лайки

  • Онлайн уроки по Redux?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    На egghead много видео уроков, в том числе два бесплатных курса от Дена Абрамова.
    https://egghead.io/browse/libraries/redux
    Платные, при желании, можно найти бесплатно на просторах интернета.
    Ответ написан
    Комментировать
    Комментировать

  • Как обновить несколько редюсеров из одного action?

    rockon404
    @rockon404 Куратор тега Redux
    Frontend Developer
    Так обрабатываете это действие во всех нужных редьюсерах. Они вызываются по цепочке.
    Ответ написан
    4 комментария
    4 комментария

  • Как по клику заново отправить запрос AJAX через React?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer 
    class App extends React.Component {
  state = {
    category: 'business',
    items: [],
  };

  componentDidMount() {
    this.fetchData();
  }
  
  fetchData() {
    axios.get('https://newsapi.org/v2/top-headlines?country=us&category='+this.state.category)
      .then(res => {
      this.setState({ items: res.data.articles });
    });
  }
  
  changeCategory = () => {
    this.setState(
      { category: 'entertainment' },
      this.fetchData,
    );
  };


  render() {
    return (
      <div className='wrapper'>
        <button onClick={this.changeCategory}>CLICK</button>
      </div>
    );
  }
}
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно сделать маршрутизацию react-router-dom?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    У вас у корневого маршрута стоит свойство exact, это значит, что переход на него будет только при точном совпадении пути с /. По пути /rigs компонент Main отрендерен не будет.
    Решить проблему можно так:
    <Switch>
  <Route path="/auth" component={Auth} />
  <Route path="/" component={Main} />
</Switch>
    Ответ написан
    4 комментария
    4 комментария

  • Как вы распределяете время между программистами и задачами?

    kumaxim
    @kumaxim
    Web-программист
    Имеем 4 колонки на kanban-доске:
    1. Список заданий
    2. В процессе
    3. На проверке
    4. Исполнено

    Теперь о каждом чуть более детально.

    Список задач, он же backlog - список того, что вообще надо сделать. Сортируется это дело по приоритетам, т.е. самая верхня задача самая важная, самая нижняя - самая не важная. Отдельно отмечу, что только в данный момент времени. Отметок "Важная", "Важная 1", "Важная 2", "Срочная", "Горящая" и т.п. быть не должно. Если задача есть в этом списке, значит она важна для команды. Ее исполнение необходимо для нормальной работы команды. Акцентирую Ваше внимание, что именно в данный момент. Как тимлид Вы можете сделать только одну доработку в этой колонке - присвоить цвет каждому подчиненному. Например, Иван берет только синие задачи, Николай только желтые и т.п. Срочнось задач в компетенцию тимлида не входит, это зона ответственности менеджмента.

    В процессе - задачи, над которыми именно сейчас работают Ваши подчиненные. Не вообще работают, а вот конкретно в данный момент, когда Вы открывайте доску и смотрите на нее, Ваш человек сидит в IDE и пишет/отлаживает код. Колонка обязана иметь лимит. Все книжки рекомендуют начинать с 2n - 1, где N - количество людей в команде, а минус 1 потому что кто-то может с чем-то застрять и ему надо будет помочь. Порядок задач в этой колонке не важен. Важно только то, сколько они там находятся. У Вас должно быть какое-то время реагирования, т.е. если задача висит там 3-й день, то нужно спросить условного Николая, что у него там за проблема и не нужно ли ему там с ней помочь. Часто, это колонка разбивается на на две: в процессе и отложено. Вторая означает, что когда исполнитель начал работу над задачей, он не нашел, скажем, доступа к хостингу или данные к FTP/cPanel, предоставленные клиентом, оказались не верными. Колонка "Отложено" требует уже реакции менеджеров в духе "Звонок клиенту". Задачи от колонки "Отложено" менеджеры должны обрабатывать, дополнять и перемещать снова в backlog. Продуктовые команды, обычно, такую колонку не используют. Разного рода digital-агенства применяют это очень часто.

    На проверке - думаю, из названия понятно. Ваш подчиненный завершил задачу, Вам/Менеджерам/Клиенту надо ее проверить. В эту колонку задачи могут переносить Ваши подчиненные, но из нее переносить задачи могут только менеджеры или Вы.

    Исполнего или Готово - опять же, думаю понятно. Завершенные задачи. В конце рабочей недели по наполнению этой колонки можно оценить продуктивность команды или/и продуктивность конкретного разработчика, если Вы будите использовать схему "Человек - Цвет". Карточки из этой колонки отправляются в архив в пятницу в 19:00 или когда Вы там выгоняйте всех программистов из-за мониторов. Также, в конце каждой недели, должен чиститься backlog от более не актуальных задач. Помните что я писал выше? В первой колонке у нас только важные задачи, которые необходимы именно в данный момент. Если клиент "заглох" или "слетел" - его задачи из backlog должны быть отправлены в архив, вместе с завершенными задачами в пятницу в 19:00

    Отдельно отмечу, что появление задач с метками "Важное 1", "Срочное", "Очень-Очень срочное" в любой системе управления, не только scram/kanban, говорит о том, что в компании слабый менеджмент. Есть задача. Ее либо надо сделать прямо сейчас или в ближайшее время либо ее нет смысла делать совсем.

    Следует также помнить, что замена менеджмента и/или системы управления, ровно как и изменения в ней, должны исходить от собственика/директора либо при его одобрении и полной поддержки. В противном случае это очень быстро все заглохнет, окончившись не чем. Каким образом Вы донесете эту необходимость до своего Босса - уже вопрос отдельный.
    Ответ написан
    3 комментария
    3 комментария

  • Как (и возможно ли) дотянуться до Junior JavaScript Developer в кратчайшие сроки?

    @Finch_85
    1. Писать JS код ежедневно. Ну кроме выходного может. Хотя бы чуть чуть, но надо ежедневно что-то новое делать. Начни (ничего что на ТЫ?) что-то делать свое - плагин какой-нибудь, либо веб приложение.
    2. Уроки могу посоветовать от Codedojo. (есть на торрентах, если надо адрес кину в ВК). Подписка там 500 р/месяц с доступом на все уроки.
    3. Надо хорошо освоить базу по JS (ES6 конечно)

    Вот примерные вопросы для собеседования - посмотреть (кроме React конечно)
    Еще один списочек. Здесь уже набор тестовых заданий. Можешь посмотреть что примерно дают в качестве тестового задания - посмотреть
    Ответ написан
    6 комментариев
    6 комментариев

  • Как просматривать проекты на GitHub которые в топе?

    DevMan
    @DevMan
    есть несколько критериев оценки: например, звезды или форки.
    звездные - https://github.com/search?q=stars:%3E1&s=stars&typ...
    форкнутые - https://github.com/search?o=desc&q=stars:%3E1&s=fo...
    тренд - https://github.com/trending?since=daily
    Ответ написан
    3 комментария
    3 комментария

  • Как разделить скрипт на части в React?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    lazy loading
    code spliting
    Ответ написан
    Комментировать
    Комментировать

  • Как вернуться к начальному состоянию редюсера в redux конкретного свойства?

    @Yuxus 
    export default function Reducer(state = initialState, action) {
  switch (action.type) {
    case RESET_TYPE_ID:
      return {
        ...state,
        filter_models: {
          ...state.filter_models,
          type_id: null
        }
      };

    P.S. Но в вашем случае это плохая идея, потому что делать сброс значения на каждый пустой фильтр это не очень эффективно. Как вариант можно полностью переписывать filter_models при каждом изменении фильтра изначально отбрасывая фильтры без значений. В этом может помочь pickBy из lodash:
    const filters = _.pickBy(filterSet, _.identity);
    Ответ написан
    1 комментарий
    1 комментарий

  • Как перейти по ссылке внутри обработчика событий в react?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer 
    import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Example extends Component {
  handler = () => {
    this.props.history.push('/cources');
  };
  
  render() { /* ... */ }
}

export default withRouter(Example);


    Возможно, вам подойдет простой вариант с компонентом Link:
    import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Example extends Component {
  render() {
    return <Link to="/cources" />;
  }
}

export default Example;
    Ответ написан
    Комментировать
    Комментировать

  • Рационально ли хранить base64 картинки в local storage?

    Yertuwernat
    @Yertuwernat
    Кратко о себе: живу в России, не женат, характер
    localStorage ограничен по времени и по размеру - для картинок не подходит
    используй localforage

    localStorage можно использовать для чего-то простого и неважного - например настройки приложения
    Ответ написан
    2 комментария
    2 комментария

  • Как рендерить разные страницы в ReactJS?

    0xD34F
    @0xD34F Куратор тега React
    this.state = {loadworksheep: false};

    this.setState({loadWorksheep: true});

    Так как правильно - w должна быть большой или маленькой? Вы бы определились.

    const worksheetLoaderPage = (
    WorksheetSelector
);

    WorksheetSelector ---> <WorksheetSelector />

    Если есть другой способ по нажатию кнопки рендерить другую страницу, то буду крайне рад услышать.

    react router
    Ответ написан
    Комментировать
    Комментировать

  • Как вы боретесь со слабой типизацией и зачем ее придумали?

    rockon404
    @rockon404
    Frontend Developer
    Для этого в проектах используют TypeScript или Flow:
    const foo = (arg: number) => { /* do something with number type */ };

    Сейчас без них большие проекты лучше даже не начинать.

    О преимуществах слабой типизации:
    1. Удобство использования смешанных выражений (например из целых, вещественных чисел и строк).
    2. Абстрагирование от типизации и сосредоточение на задаче.
    3. Краткость записи.
    Ответ написан
    Комментировать
    Комментировать

  • Почему Flow ругается на передачу функции компоненту?

    Nikulio
    @Nikulio Автор вопроса
    NaN !== NaN
    Решение : 
    type Props = {
  title: string,
  inputHandle: (value: SyntheticInputEvent<>) => mixed,
  radioChangeHandle: (value: SyntheticInputEvent<>) => mixed,
  submitHandle: (value: SyntheticEvent<>) => mixed
};


    Обновил пропсы в SearchForm.js
    Ответ написан
    Комментировать
    Комментировать

  • Почему возникает Actions must be plain objects без ReduxThunk?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Потому что redux-thunk это middleware и если бы вы заглянули в его исходники(всего 14 строк), то вы бы увидели, что он перехватывает и вызывает функции, передавая в них нужные аргументы и возвращает результат, не предавая его дальше. Без него их перехватывать нечему и они попадают туда куда не должны попадать и провоцируют ошибку, так как Redux без мiddleware на вход в dispatch принимает только объекты, о чем и говорится в тексте ошибки, которую вы получаете.

    Возвращаемое значение(return) в асинхронных действиях используется только вами, его возвращает вызов dispatch. В редьюсеры, как было озвучено выше, оно не попадает.
    Так как возвращается Promise, его можно использовать как-то так:
    Ваш Async action:
    export const asyncAction = (...someArgs) => async dispatch => {
  const res = await someAsyncCall(...someArgs);
  dispatch({ type: SOME_ACTION_TYPE, payload: res });

  return res;
};

    Использование в коде(явный пример с dispatch):
    componentDidMount() {
  const { dispatch } = this.props;

  dispatch(asyncAction(...optionalArgs)).then(result => doSomething(result));
}

    То же самое с проброской async action через connect:
    componentDidMount() {
  const { asyncAction } = this.props;

  asyncAction(...optionalArgs).then(result => doSomething(result));
}


    Вообще, для использования then значение из асинхронной функции возвращать совсем не обязательно и такой код тоже будет прекрасно работать:
    export const asyncAction = (...someArgs) => async dispatch => {
  const res = await someAsyncCall(...someArgs);
  dispatch({ type: SOME_ACTION_TYPE, payload: res });
};

    Использование в коде(явный пример с dispatch):
    componentDidMount() {
  const { dispatch } = this.props;

  dispatch(asyncAction(...optionalArgs)).then(() => doSomething());
}
    Ответ написан
    8 комментариев
    8 комментариев

  • Как правильно составить резюме если нет опыта работы?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Врать.
    Ответ написан
    12 комментариев
    12 комментариев

  • Как обработать JSONP запрос используя Redux/React?

    RomReed
    @RomReed
    JavaScript, Flutter, ReactNative, Redux, Firebase
    https://maxfarseer.gitbooks.io/redux-course-ru/con...
    Ответ написан
    Комментировать
    Комментировать

  • Как реализировать подобный функционал на react + REDUX?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    В самом простом варианте.
    1. При загрузке приложения по опеределеному роуту, разбирать query string на составляющие и по ним делать запрос к API и рендерить состояние фильтров.
    2. По клику на фильтр, обновление его состояния и push нового location с query string, собранной по новому состоянию фильтра.
    Ответ написан
    9 комментариев
    9 комментариев

  • Redux и Flux взаимозаменяемые?

    @SeaBreeze876
    Front-end разработчик
    flux это просто концепция, redux это конкретная реализация flux
    так что параллельно =D
    Ответ написан
    Комментировать
    Комментировать

  • Почему в react приложении страницы обновляются??

    archakov06
    @archakov06
    Frontend-разработчик (ReactJS)
    Бедный реакт. К сожалению, Дан Абрамов еще не придумал искусственный интеллект, который за нас решал бы все проблемы связанные с реактом.

    Читайте про роуты, роутинг - https://www.google.ru/search?q=react+router

    Вам нужно подключить к своему проекту react-router
    Ответ написан
    Комментировать
    Комментировать