Ответы пользователя по тегу React
  • Как правильно реализовать сортировку и сортинг в redux для больших объёмов данных?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Поддерживаю, Mikhail Osher по поводу normalizr. По этому поводу хорошо объясняется (на англ) в этом курсе: Building React Applications with Idiomatic Redux.
    Ссылка на урок про normalizr внутри этого курса.
    Ответ написан
    Комментировать
  • Есть ли смысл изучать Reac, Angular без хорошего знания JS?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Если иначе познавать JS не получается (нет мотивации, нет денег, и тд) - смысл есть.
    Всегда правильно советуют: учим основы, разбираемся во фреймворке, пишем хороший код.

    Но на практике бывает иначе. Поэтому, если можете пройти туториал на любом из сайтов (реакта/ангуляра) - пытайтесь сделать что-то посложнее. Рано или поздно понимание того, что азы нужно подтягивать придет, но при этом уже будет сколько-то монет в кармане + не потеряется мотивация программировать.

    P.S. да, это вредный совет.
    Ответ написан
    Комментировать
  • Как вывести данные 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>
    ...
    }
    Ответ написан
    Комментировать
  • Чем отличается forceUpdate от setState?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Дополню Иван на тот случай, если у вас трудности с переводом:
    forceUpdate стоит вызывать если render вашего компонента зависит от чего-то еще (кроме props/state).

    Главный побочный эффект - лишние перерисовки. Второе: forceUpdate на текущем компоненте проигнорирует shouldComponentUpdate...

    В общем, как вам уже ответили, плюс все тот же перевод документации: старайтесь избегать forceUpdate

    p.s. мне на практике ни разу еще не приходилось использовать.
    Ответ написан
    4 комментария
  • Общая библиотека для юнит тестирования React Redux GQL?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Редьюсеры (из мира redux, да и вообще) тестируются очень удобно. Ваш тест в общем виде выглядит так:
    1) есть начальное состояние
    2) есть action с такими-то данными (или без)
    3) есть конечное состояние (заданное вами, вручную, ожидаемое состояние)
    4) вызываю reducer(с action указанным в пункте 2) и сравниваю результат с пунктом 3

    Банальный тест. Проверяем, что устанавливается isFetching в true в момент запроса.
    // кусочек из reducer'a
      case GET_DETAILED_FILES_REQUEST:
          return {
            ...state,
            isFetching: true,
          }
    ...
    
      // код из теста
      it('GET_DETAILED_FILES_REQUEST', () => {
    
          const action = {
            type: GET_DETAILED_FILES_REQUEST,
          }
    
          const nextState = reducer(initialState, action) // где reducer = ваш настоящий редьюсер, например " import reducer from '../../src/reducers/detailedFiles' "
    
          expect(nextState).to.deep.equal({
            ...initialState,
            isFetching: true,
          })
        })


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

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Первый вариант не плох, его используют, например: datepicker, react-select библиотеки.

    React-virtualized, например, позволяет подключить стили с помощью: import 'react-virtualized/styles.css' (и при этом не нужно писать путь от node_modules), думаю если разобраться как они это сделали - для вас это будет решением)
    Ответ написан
    Комментировать
  • Где хранить текущее значение формы?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    я храню меняющуюся информацию в state именно этого компонента

    Это логично, для этого (изменяемых свойств компонента) и был придуман state.

    стоит ли эти текущие state объявить в state всего приложения и менять их там

    Я так понимаю, под state всего приложения понимается либо redux store, либо state какого-то родительского компонента. Если второе - однозначно нет, так как при изменении - будет перерисовываться всё приложение (все потомки), если же речь идет про redux store, то какие-то данные, которые необходимы вам в других местах (кроме текущего компонента) стоит класть туда, но при этом иметь ввиду, что все компоненты, которые "подписаны на эти данные" (с помощью функции connect) будут перерисовываться при изменении.

    p.s. отвечая на вопрос "где хранить текущее значение формы?" - я бы хранил в state компонента, так как обычно оно больше нигде в других компонентах не нужно.
    Ответ написан
    3 комментария
  • Как получить идентификатор элемента(переменную i)?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Я бы сделал с помощью data-* атрибута, но в этом ответе возникла дискуссия, так что выбирайте что больше понравится.
    ..
    deleteNote(e) {
      console.log(e.target.dataset.item) //здесь будет идентификатор элемента
    }
    ...
    <span onClick={self.deleteNote} data-item={i} className={"close"}>X</span>
    ...
    Ответ написан
    Комментировать
  • Сколько раз вызывается connetc()?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    В обоих случаях. В начале, так как компонент наверняка где-то подключается, а раз он подключается (например через import MyComp), то весь код выполнится. Так же в случае изменения "примапленных" данных.

    Самый простой способ проверить это - добавить console.log и посмотреть.

    connect( (state)=> {
        console.log('вызван connect')
        return state.arrayValues.filter(val => val.includes(a));//массив со строками
      },
      (dipatch)=>({})
    );
    Ответ написан
    5 комментариев
  • Почитал про ReactTransitionGroup в чем преимущество перед обычной css анимацией?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Из докуменации:
    is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM

    То есть, это не замена обычной css анимации, а как пишут авторы: легкий путь, чтобы писать css анимацию для реакт компонентов, которые появляются или удаляются из DOM

    через свой набор классов.

    Через ваш набор классов. С помощью transition group вы как раз указываете, какие классы будут использованы.
    Ответ написан
    Комментировать
  • Вызов функции метода вне класса (React js)?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Всегда есть возможность вызывать static методы вне класса. (немного по вашему вопроса на SO)

    class GroupPage extends Component {
        static deleteItem(item){
            console.log('item',item)
        }
    }
    ...
    const SortableItem = SortableElement(({value}) =>
        <li className="listStyle">
            {value.video.time !== 0 ?
             <Button bsStyle="primary" onClick={()=> GroupPage.deleteItem()}>-</Button> : null}  
        </li>);
    Ответ написан
    Комментировать
  • Django и React.js как соединить?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вам больше не нужно использовать django, чтобы рендерить html-ки. Этим будет заниматься react. Вам нужен API сервер, и я так понимаю, подойдет что-нибудь такое (ну или гугл).

    Если можете написать API, то значит нет смысла искать видео-уроки/просто уроки по комбинации Ddjango + React, и вам нужно лишь подтянуть знания по react/redux/react-router или подобной связке.

    Если даже в теории ваша задача не разбивается на 2 части (написание API и написание одностраничного приложения), значит django и react.js в данный момент вам никак не соединить.

    p.s. если есть уже существующий сайт, где используется шаблонизатор от django и рендерятся страницы, то можно взять любую из них, где много динамики (например, удаление и добавление строк в таблице, какие-то xhr запросы и т.д.) и переписать для начала только ее на react.
    Ответ написан
    Комментировать
  • Почему компонент не слушает хранилище?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Предположу 2 ситуации:
    1) Как вам уже сказали в комментариях, скорее всего вы "мутируете" массив, а не возвращаете новый. Например, вам не подходит, метод push, чтобы добавить элемент и вернуть новый массив, используйте concat.

    2) Если вы подключили компонент (с помощью connect), и не прокидываете props вниз потомку, который в свою очередь не прокидывает эти пропс вашему компоненту, который не работает и находится на 3м уровне, не имея прямой связи... то и работать не должно. Чтобы "не прокидывать", можно использовать context, но вряд ли вам это сейчас нужно. Мне, пока что, context использовать напрямую не приходилось.
    Ответ написан
    1 комментарий
  • Как правильно устроить задержку выполнения функций?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Скорее всего, где-то в коде проблема...
    Но если читать ваш вопрос буквально, то кроме как setTimeout есть еще setInterval и requestAnimationFrame (все трое вам не подходят).

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

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Частично ваши запросы может удовлетворить react-intl
    Статья от нашего коллеги (на англ) - там стоит поизучать комментарии. А вот и сам автор на хабре.

    В данный момент тоже пользуюсь react-intl для перевода, но из функционала использую только перевод констант.
    Ответ написан
    Комментировать
  • В чем отличие (преимущество) material-ui и materializecss при использовании с React?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Отличие в командах разработчиков (сарказм, где-то и в коде они, наверняка, отличаются).
    Преимущества: не нужно писать css код для реализации дизайна в стиле material
    Ответ написан
    Комментировать
  • Ваши плагины и пакеты на sublime text для javascript, react, jsx разработки?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Ответ написан
    Комментировать
  • Как вывести контекст нажатого компонента React?

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

    Для изменяемых данных в зеленом блоке, можно использовать state компонента. Устанавливаете state через функцию, которую передаете в props ( везде называется handleClick, но для удобства можете переименовать). Чтобы передать 'city' можно придумать разные варианты, например, с помощью data-*атрибута у элемента, который будет доступен внутри e.target.dataset.*

    Зачем в constructor'e - this.XXX = this.XXX.bind(this) - жду ответ от вас )
    Ответ написан
    5 комментариев
  • Как настроить динамический роутинг дочерних компонентов в react-router?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Не вижу проблемы..
    <Route path={"/rooms/:chatroomId"} component={ChatBox} />

    В коде Rooms - стандартно - this.props.children, так как ChatBox является потомком...

    p.s. или вы что-то иное хотели спросить?
    Ответ написан
    3 комментария
  • Очистить input React/Redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Используете ли вы с redux методы жизненного цикла (componentWillReceiveProps и тд..)

    Конечно, используем.

    У вас "инпут" не очищается, так как нет никакого кода за это отвечающего. Можете использовать например onBlur событие...

    p.s. в целом код выглядит странно немного, может намудрили. Может сделать input неконтролируемым, оставить только "this.props.onChange", а в компонент Input передавать в value - todoName... (не вникал сильно в происходящее)
    p.p.s. про контролируемые и не контролируемые компоненты на русском: раз (мини книжка по реакту, версия старая, но актуально в целом), два (переводы офф.документации)
    Ответ написан
    Комментировать