Ответы пользователя по тегу React
  • Почему могут не отображаться компоненты в react developer tools?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Пробовал переустанавливать - все остается также.

    это как?)

    Если я правильно понял вопрос, вы хотите чтобы были нормальные имена у компонентов? Тогда вам просто нужно использовать не продакшен версию (скорее всего не .min файл, если вы с CDN грузите).
    Ответ написан
    1 комментарий
  • Что такое API в проекте на react?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    У вас приведено 2 куска кода из 2х разных миров:
    1) это код из мира фронтенда, в котором вы выполняете запрос на /api/user/
    2) это код из мира бэкэнда, в котором вы обрабатываете роут ???/user (почему ???, потому что не видно главного файла сервера, но если представить, что вы разбираете какой-то рабочий пример, скорее всего это и есть обработчик /api/user роута)

    API (wikipedia)

    Как это завязать на API

    1. Делается сервер (на любом из языков), который в принципе является набором роутов, например:
    GET на роут /products - отдает все продукты
     POST на роут /products/add - создает новый продукт
     GET на роут /proudcts/1231rh8fdf - отдает один продукт с id 1231rh8fdf
     DELETE ...
     PUT ...

    2. Пишется клиент, если в рамках реакт-редукса, то главное в вашем вопросе, это то что вы уже привели - запросы на определенный роут в action creator.
    Например:
    export function signIn(email, password) {
      return dispatch => {
    
        dispatch({
          type: USER_SIGN_IN_REQUEST,
        })
    
        const data = {
          session: {
            email,
            password,
          },
        }
    
        httpPost(`http://${API_ROOT_V1}/api/sessions`, data)
          .then((data) => {
            dispatch({
              type: USER_SIGN_IN_SUCCESS,
              data: data.account,
            })
          })
          .catch((err) => {
            console.warn(`Sign in error: ${err}`) //eslint-disable-line no-console
            dispatch({
              type: USER_SIGN_IN_FAILURE,
              err,
            })
          })
      }
    }

    Этот action creator (создатель действий) делает POST запрос на API-сервер (можно и так называть сервер в частном порядке) вместе с логином и паролем. Далее сервер обрабатывает этот запрос (то есть ищет совпадение роута и метода (get/post/put..) и выполняет необходимые операции, после этого выдает ответ (например, json с данными о юзере) и вы эти данные устанавливаете в ваш reducer.

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

    Итого: что такое API в проекте на React - вопрос не корректный. Правильный вопрос: как вы взаимодействуете с API в приложениях написанных на react, либо: как написать API на языке ХХХ (пример на англ для node.js и express - https://scotch.io/tutorials/build-a-restful-api-us...
    Ответ написан
    Комментировать
  • Где найти модуль авториации, регистрации redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Опираясь на то, что вам не подошел ответ с Auth0

    Что в таком случае "модуль авторизации/регистрации"? Здесь вопрос поставлен не верно может быть?.
    Изначально, если мы говорим про Auth0 - это подходит под слово модуль (бэкэнд + готовые формочки, которые они дают вместе с примерами).

    Если же мы говорим про задачу frontend-разработчика, то она звучит так:
    1) Сверстай формы (включая валидацию и что еще нужно, например disabled для кнопки, если не заполнено обязательное поле)
    2) По клику на кнопку "войти" / "зарегистриоваться" - отправляй POST запрос с данными.
    2.5) Так как у вас приложение на React+Redux, значит необходимо создать action creator, который диспатчит, что-то в стиле USER_SIGN_IN_REQUEST (SUCCESS), и reducer для хранения инфы о юзере (если нужно).

    На этом кончаются задачи фронтэндщика.

    А то решений сейчас много и не знаю какое выбрать

    Скиньте пример, потому что я не понимаю о каких "решениях" идет речь, так как вижу ответом на ваш вопрос: две формы + стандартный набор для react-redux приложения.

    P.S. возможно вы имели ввиду под модулем, что-то в стиле форма + войти через соц.сеть/сервис - тогда да, я вас понял, но подсказать готовый не могу.
    Ответ написан
    4 комментария
  • Почему не всегда срабатывает e.target.dataset?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    У вас клик на ссылке, а data-* на элементе <i>
    Когда кликаете по ссылке - e.target = ссылка и у нее нет data-*
    Когда в клике попадаете на i = все хорошо.
    Ответ написан
    3 комментария
  • С чего и где начать обучению React, Redux?

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

    Я по весне писал объемный redux туториал , там react 0.14 (но он очень близок к 15) и остальные пакеты "постарее", но вы можете брать его за основу, а пакеты ставить новые. Единственное, тогда еще не было курса №2 из другого ответа, поэтому я не использовал "селекторы". Но это не помешает вам погрузиться в мир redux.

    P.S. курс по react тоже есть.
    Ответ написан
    2 комментария
  • Как передать параметры в метод?

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

    Во-первых - onClick={this.updateClick('params')} - что вы ожидаете от такой записи? Давайте поразмышляем: в onClick вы должны передать функцию-обработчик, а вы передаете РЕЗУЛЬТАТ функции this.updateClick так как вызываете ее с ( )

    Во-вторых, как вам правильно подсказали, можно использовать .bind для передачи параметров.
    Для этого, сначала идем в MDN, читаем. Пытаемся передать функцию с параметром в качестве домашнего задания. Подсказка: .bind ставит ваши параметры в начало. То есть все аргументы сдвигаются (в том числе и "e").

    P.S. Если не получится, то можете посмотреть ответ по ссылке.

    P.P.S. Очень важно понять, что есть результат работы функции. То есть, в вашем вопросе, вы передавали в onClick - e.preventDefault(), причем именно это, а не "функцию, которая по клику бы срабатывала и происходил бы e.preventDefault()). В случае с bind, вы передаете результат работы функции bind, который является функцией, другими словами - "все корректно, в onClick передается функция".
    Ответ написан
    Комментировать
  • Как в componentWillMount получить params router?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    в роутере должно быть:
    ...
    <Route path='/signin/:название_параметра' component={Компонент} />
    ...


    в компоненте внутри componentWillMount вызывать this.props.params.название_параметра
    Ответ написан
    4 комментария
  • Как настроить роутинг?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вы же используете webpack?
    Ошибка скорее всего в неправильном подключении файла с кодом (bundle.js обычно). Такая ошибка обычно выглядит в консоли так . Здесь подробнее.

    Не могу точнее ответить на вопрос без кода запуска сервера и возможно пригодится еще код webpac-dev-server и webpack-config файлов.
    Ответ написан
    1 комментарий
  • Почему не видит state?

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

    2) прокидывать this в mapDispatchToProps не нужно. Если вы хотите изменить state опираясь на новые данные, то это нужно делать в componentWillReceiveProps методе.

    3) чтобы пришли новые props, вам нужно их обработать в редьюсере, а для этого вам нужно вызывать в mapDispatchToProps ваш экшен-крейтор. То есть mapDispatchToProps будет выглядеть так (обратите внимание на круглые скобки после => , это сделано, чтобы не писать rerturn {...}):
    const mapDispatchToProps = (dispatch) => ({
      fetchEntities: (limit, offset) => dispatch(fetchEntities(limit, offset))
    })


    для этого, конечно же импортировать из actions ваш fetchEntities. В котором у вас promise версия, в которой будете обрабатывать пришедшие данные. Теория по этому поводу здесь, либо можете посмотреть теорию+пример на русском языке здесь.

    3.5) В mapStateToProps у вас должно быть соответствующее свойство, в которое вы будете из reducer'a прокидывать ваши новые props, и из-за этого сработает componentWillReceiveProps внутри которого вы сможете вызывать this.setState.
    Ответ написан
    9 комментариев
  • ComponentWillMount не изменяет свойство?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    "Вернулся обратно" => componentWillMount (скорее всего, либо вы как-то хитро "возвращаетесь обратно")
    Чтобы посмотреть, происходит mount/unmount и как - просто напишите console.log('mount') и console.log('unmount') соотвественно, а потом "походите" и "повозвращайтесь". Думаю все встанет на свои места.
    Ответ написан
  • Как использовать ReactJS если back-end на PHP?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вам стоит получше разобраться в теме одностраничных (single page applictaion, SPA) приложений и такого понятия как REST API. То есть, вы на пхп будете делать только "апишку", которая будет отдавать json-данные, например - список продуктов, а на реакте уже это все показывать. Причем, ваше SPA может и скорее всего будет использовать и flux/redux и react-router и npm, но это все нисколько не помешает бэкэнду на php.
    Ответ написан
    4 комментария
  • Как сделать обработку ошибок через axios последний?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    А зачем через Promise? У вас обычный синхронный код проверки и все. Пусть будет:
    ...
    router.post('/', (req, res) => {
        const {errors, isValid} = validateInput(req.body);
    
        if(!isValid) {
            return res.status(400).json(errors);
        } else {
            return res.status(200).json({data: 'bla-bla-bla'})
        }
    });
    ...


    Ну а сам axios заранее "промисифицированный". Взял пример из документации:

    axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });


    Если я вас правильно понял, то вы хотели бы использовать then/catch у axios, но думаете, что если роутер экспресса не возвращает promise - это невозможно? Нет, это не так.

    Если вернет ошибку - выполнится catch, если вернет "ок" - выполнится then. Не могу сказать по памяти, но res.status(400) может сработать как then, потому что вернуто не "ошибочное" значение. Тогда просто вместо res.status(400) бросьте исключение (типа new Error ...) и тогда точно catch сработает.
    Ответ написан
    4 комментария
  • Как правильно структурировать архитектуру приложения?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Если вы не хотите сравнивать props с помощью shouldComponentUpdate (пишете, что это не резонно), то я думаю единственный вариант - делать компоненты Filter и List контейнерами (Operations по-желанию, из задачи не понятно, хочется его тоже "не обновлять" или нет)
    Ответ написан
  • Как тестировать такие реактовские события кликов в enzyme?

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

    Разберем пример тестирования асинхронного экшен-крейтора на получение списка продуктов:

    Для начала код AC (action creator)
    export function getProducts() {
      return dispatch => {
        dispatch({ type: PRODUCTS_GET_REQUEST })
    
        return request.get(`${API_ROOT_V1}/api/v1/products/getAll`)
          .then(res => {
            if (!res.ok) {
              dispatch({ type: PRODUCTS_GET_FAILURE })
              dispatch(showNotification({
                status: 'err',
                text: 'something going wrong',
              }))
    
            } else {
              dispatch({
                type: PRODUCTS_GET_SUCCESS,
                data: normalize(res.body.data, schema.arrayOfProducts),
              })
            }
          }, err => {
            dispatch({ type: PRODUCTS_GET_FAILURE })
            dispatch(showNotification({
              status: 'err',
              text: err.message,
            }))
          })
      }
    }


    Получается, для тестирования функции getProducts, которая является AC, мы напишем тест, в котором ожидаем в случае успешного выполнения:
    а) что store достигло событие 'PRODUCTS_GET_REQUEST'
    б) что store достигло событие 'PRODUCTS_GET_SUCCESS' с некой data (у меня она еще нормализуется, но это не суть)

    Для этого, нам потребуется redux-mock-store (взято так же из документации).
    Собственно, сам тест:

    it('creates PRODUCTS_GET_SUCCESS when get products has been done', () => {
    
          const data = [
            {
              '_id': '5763e6eccfdb2e9d4baa58ef',
              'name': 'Product A',
              'description': 'Description of A',
              'img': 'no-photo',
              '__v': 0,
              'providers': [],
            },
            {
              '_id': '5763e6eccfdb2e9d4baa58f0',
              'name': 'Product B',
              'description': 'Description of B',
              'img': 'no-photo',
              '__v': 0,
              'providers': [],
            },
          ]
    
          nock(`${API_ROOT_V1}`)
            .get('/api/v1/products/getAll')
            .reply(200, { data })
    
          const expectedActions = [
            { type: PRODUCTS_GET_REQUEST },
            { type: PRODUCTS_GET_SUCCESS, data: normalize(data, schema.arrayOfProducts) },
          ]
    
          const store = mockStore([])
    
          return store.dispatch(getProducts())
            .then( () => expect(store.getActions()).to.deep.equal(expectedActions) )
        })


    То есть, отвечая на вопрос:
    как в таком случае проверить, что такой-то такой-то экшен отправляется в диспетчер

    1) const store = mockStore([])
    2) store.getActions()
    3) сравниваем полученное в п.2 с тем, что ожидаем.

    Здесь я попутно использовал nock для "мока" запроса к API. И немного подробнее описал ожидаемую "фейковую" дату (хотя это было не обязательно). Главное суть: мы ожидаем, что некоторые "экшены" достигнут стора. Это и протестировали.
    Ответ написан
  • Не могу экспортировать объект: React?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Нужно:
    export const (или let, function, class ...) NAME, а у вас просто export NAME. Отсюда и проблема.

    например:
    export const NOTIFICATION_SHOW = 'NOTIFICATION_SHOW'


    и в другом файле:
    import { NOTIFICATION_SHOW } from 'bla/bla/bla'
    Ответ написан
    Комментировать
  • Реализация поиска на ReactJs?

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

    Если без "flux/redux/..." то с помощью событийной модели (например, в момент поиска происходит событие "поиск_изменен", а компонент где был весь этот текст слушает данное событие и рендерит только часть отфильтрованную, так как вы ее передали. Если не передали - рендерит все (как будто поиска не было, или поиск пустой))

    Если с flux/redux/... то действуйте в рамках подхода. Если говорить про redux - то просто отправьте action с фильтрованным "куском".
    Ответ написан
    2 комментария
  • Как анализировать приложение построеное на reactjs?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Не могу сказать точно на счет GA/метрики, но думаю у них есть API которое позволит отправлять события. А события аналитики можно делать в middleware (если говорить о redux). Например.
    Ответ написан
    Комментировать
  • Годный курс по разработке на React?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Текст:
    сам учил - здесь (офф доки, EN)
    сам писал - здесь (RU, есть так же и про redux). В 2018м году вышло второе издание, первое прочитало более 250 000 читателей. (pdf/epub/mobi можно найти тут).

    Толковый перевод годной статьи (react + redux) - на хабре

    По видео - не подскажу, так как по реакту не смотрел (но по redux два отличных скринкаста на egghead.io есть).

    На русском ничего годного не видел. К сожалению, на одном "образовательном проекте", который не раз уже вставляли в ответы - видео курс (судя по первым бесплатным урокам) - плох.

    p.s. Делаю следующий проект-обучалку, но еще не решил будет там видео-версия или нет, очень затратно по времени.
    Ответ написан
    6 комментариев
  • Построение приложения frontend, что выбрать?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Я за реакт (дело личных предпочтений). А вам советую выбирать то что знаете. По моему, в реакт вникнуть легче чем в ангуляр.

    С роутингом и отображением-получением данных с бекенда.

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

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Баг в мозиле?

    p.s. там hot reload настроен не для всех файлов, вроде бы только для react-компонентов, и для reducers
    Ответ написан
    3 комментария