• Как передать параметры в метод?

    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 комментарий
  • Webpack? Но зачем?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Для одностраничников (да еще и без реакта, хотя собственно кому в голову придет делать LP на реакте :) ) - конечно, webpack вообще ни к чему. Вам же достаточно gulp + browserSync для комфортной разработки?

    ---
    Когда ваш "инструментарий" отлично справляется с работой - используйте его.
    Когда у ваших инструментов есть какой-то раздражающий момент - ищите варианты решения проблемы. Может быть что-то заменить?
    Когда просто "хочется" чего-нибудь новенького - посмотрите по сторонам, лишним не будет.
    Ответ написан
    2 комментария
  • Почему не видит 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 комментариев
  • Из-за чего возникает ошибка ReferenceError: Schema is not defined?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Потому что у вас не определена переменная Schema
    добавьте в начало файла: var Schema = mongoose.Schema

    p.s. ну и на всякий случай, давайте разберемся.
    ReferenceError: Schema is not defined

    в переводе - Schema - не определено. И действительно, если вы посмотрите в свой код, то у вас нигде нет записи в стиле var Schema = ..., следовательно вы не можете использовать эту переменную, так как ее просто не существует. Она никак не requir'ится в ваш файл, вы никак ее не определяете...
    Ответ написан
    Комментировать
  • ComponentWillMount не изменяет свойство?

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

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Принцип такой:
    1) узнаете как запустить вебпак с необходимым конфигом
    подсказка:
    webpack --config './path/to/config'
    2) вписываете в package.json в секцию scripts, например:
    "server1": "webpack --config './path/to/config'"

    затем npm run server1

    p.s. в секцию scripts можно вписать любую команду, которую вы можете выполнить в терминале.
    Ответ написан
    Комментировать
  • Как использовать 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'
    Ответ написан
    Комментировать
  • Return выполняется раньше получения данных с помощью request, как побороть?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Разобраться как работает асинхронный код. Поставить return в нужном месте и наслаждаться.
    Пример использования дан сразу на главной странице request'a
    var request = require('request');
    request('http://www.google.com', function (error, response, body) {
      if (!error && response.statusCode == 200) {
        console.log(body) // здесь точно уже есть данные
      }
    })
    Ответ написан
    Комментировать
  • Реализация поиска на ReactJs?

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

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

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

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Что мешает написать в google - npm NAME и узнать про любой модуль в первой ссылке, которая обычно ведет на npm сайт?
    Например, npm assert => https://www.npmjs.com/package/assert =>
    This module is used for writing unit tests for your applications, you can access it with require('assert').

    в переводе: модуль используется для написания unit-тестов.
    Ответ написан
    Комментировать
  • Как анализировать приложение построеное на 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, обучаю реакту и компании
    Я за реакт (дело личных предпочтений). А вам советую выбирать то что знаете. По моему, в реакт вникнуть легче чем в ангуляр.

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

    что реакт, что ангуляр с этим справятся без проблем.
    Ответ написан
    Комментировать
  • Cтоит ли публиковать статью по работе с простенькой библиотекой jsonrpc?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    А куда материалу на русском кроме хабра? На хабре есть шанс получить критику от неглупых людей. Кроме хабра - больше негде :(

    Да и может кому-то будет полезно, поэтому пишите! Хуже точно не будет.
    Ответ написан
    Комментировать