• Зачем нужен del-cli w webpack?

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

    Например, вы разбиваете свой большой бандл на кусочки.
    У вас в момент билда получилось 30 кусков.
    Затем вы удалили какой-то код, и вот у вас уже 29 кусков. Они заменятся все внутри dist, но 30й останется.

    А если у вас еще было наименование по типу: имя + хэш / или что либо другое - то у вас в dist будет просто куча хлама.
    Ответ написан
    Комментировать
  • Можно ли импортировать в проект скаченные npm пакеты используя gulp, как в webpack?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    import / export (на худой конец require) - это же все es2015, поэтому просто нужно настроить соответствующий таск с помощью browserify / babel. Можно и с помощью webpack, но это уже считаю "оверхэд", хотя для некоторых задач/людей очень даже подходит и имеет место быть.
    // https://stackoverflow.com/questions/36527536/import-and-convert-js-files-using-gulp-babel
    var browserify = require('gulp-browserify');
    gulp.task('bundle', function() {
        gulp.src('./dist/bar.js') // entry point
            .pipe(browserify())
            .pipe(gulp.dest('./dist'))
    });
    Ответ написан
    Комментировать
  • Как правильно удалять нужный элемент из массива?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Так как вам всегда нужно возвращать новый массив, задачу можно разделить следующим образом:
    1) в новый массив копируете* все с начала до index
    2) в этот же новый массив копируете все с index+1 до конца

    * - для копирования отлично подходит spread operator. В теории выглядит так:
    const arr = [{a:1},{b:2},{c:3},{d:4}]
    //допустим, вы прислали index 1 и сохранили его в переменную index, например
    const newArr = [
      ...arr.slice(0, index), // клонируем все элементы до индекса
      ...arr.slice(index+1), // клонируем все элементы после индекса
      // итого: индексный элемент удален
    ]


    Хазрат Гаджикеримов вам верно подсказал так же про filter. В комментарии привел верное решение. Давайте теперь рассмотрим ваше:
    if(action.type === 'REMOVE_STUDENT') {
            let newArr = state; // сохранили в newArr ссылку(!!!) на старый массив. Если вы хотели скопировать массив, то нужно было писать: let newARr = [...state] (если в state просто массив)
            newArr.splice(action.payload, 1); // здесь вы из newArr ( и из state, так как сохранили ссылку) удалили с ИНДЕКСА один элемент. Так же, внимание, вы используете sPlice, а не slice. Разницу нужно уточнить! (подсказка ниже как)
            return newArr.filter(element => element !== action.payload); // а здесь вы что вообще написали? вы сравнили element (что там? объект?) с action.payload (в которой как вы говорите индекс). Что должно быть в итоге? ;)
        }


    Очень легко гуглить все незнакомые функции по типу: name MDN
    в вашем случае запросы в гугл:
    slice MDN (первая ссылка выдачи)
    filter MDN (первая ссылка выдачи)

    Теория из-за которой не происходит понимания: копирование объектов по ссылке
    Ответ написан
    2 комментария
  • Как в React использовать переменные, полученные из Node.js?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Если используете webpack, можете использовать webpackDefinePlugin
    Например:
    new webpack.DefinePlugin({
          'ENV_API_ROOT_V1': JSON.stringify(process.env.ENV_API_ROOT_V1),
          'HTTP_PROTOCOL': JSON.stringify(process.env.HTTP_PROTOCOL),
          'WS_PROTOCOL': JSON.stringify(process.env.WS_PROTOCOL),
        }),

    старт вашей сборки, будет выглядеть примерно так:
    cross-env ENV_API_ROOT_V1=my_url_for_Api.com HTTP_PROTOCOL=https WS_PROTOCOL=wss webpack --progress --config ./webpack.prod.config.js

    в таком случае вам будут доступны в файлах переменные: ENV_API_ROOT_V1, HTTP_PROTOCOL, WS_PROTOCOL
    Ответ написан
    2 комментария
  • Что почитать/посмотреть по тестированию кода (JS)?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Сначала легко запутаться. Мне помогло следующее:
    1) есть тест-раннеры (то есть утилиты, которые запускают тесты, в вашем вопросе это mocha) и библиотеки "ассеротов" - это что-то типа "утверждений", которые вы в тестах будете использовать.
    2) все unit тесты, это не что иное как тестирование какой-то функции на то, что она выдаст заранее описаный (вами!) результат. Образно: есть функция sum(a,b), вы пишите какой-то такой код:
    import { sum } from './my-functions'
    ожидаю, что sum(1,3) === 4


    если добавить какую-нибудь псевдо-библиотеку ассертов, будет примерно так:
    import { sum } from './my-functions'
    import { should } from 'another-assert-library' // should в переводе "быть/являться" 
    ожидаю, что sum(1,3).should.be.eql(4) // ожидаю что sum(1,3) будет равно 4


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

    Не остался в стороне и learn.javascript.ru с его разделом про тесты
    Ответ написан
    Комментировать
  • Где найти примеры очень сложных работ на Javascript/React/Angular/Vue?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    А кто, собственно, захочет выкладывать в опен-сорс решения для коммерческих организаций? Это же занимает время. Нужно все приготовить, подчистить, задокументировать где не хватает, тесты дописать. Это куча работы, кому за это заплатят? Какой прок от этого организации (повышение доверия к организации - как вариант, но далеко не всем это нужно)? Придется объяснять, что это за продукт, и что он делает. Почему применены такие-то костыли и как с этим жить. Бррр... там работы много. Не нужной для организации работы.

    Так же многие компании просто не хотят раскрывать как они сделали ту или иную фичу. Опять же - зачем?Конкурентов плодить? ;)

    В то же время, большие опен-сорс решения все же имеют место быть (но у них изначально опен-сорс как фича, или компания хочет таким образом привлечь к себе внимание. Либо компания может себе это позволить). Обычно, они сразу и всем известны, и гугляться на раз-два-три, типа react open source projects, angular open source projects и тд.
    Ответ написан
    Комментировать
  • Зачем нужен redux-thunk?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Если я правильно понял вашего коллегу, то речь была не о том, что нужно асинхронные функции через setTimeout вызывать, а это был просто пример, как сделать какой-то кусочек "типа асинхронным".
    Его довод был в том, что вместо вызова dispatch из замыкания (полученного с помощью redux-thunk, например) он вызывал store.dispatch напрямую (то есть у объекта store, и этот store импортировал бы в каждом файле).

    В таком случае, у redux-thunk - одно преимущество явное - не нужно импортировать store в каждом файле.

    В остальном, все очень четко расписано в ответе Дэна Абрамова, который привел holymotion.
    Если быть кратким, то вам нужна функция dispatch, ведь именно через нее вы "диспатчите" свои экшены. Вы не можете в асинхронном ответе написать:
    ...
    axios.get('/user')
          .then(res => {
            // успешно получили данные
            dispatch({ // <-- здесь вы вызываете функцию dispatch, а если она к вам не пришла в анонимной функции, с помощью redux-thunk, то октуда вы ее возьмете?
              type: GET_PROFILE_SECCUESS
              payload: res.data
            })
          })
    ...


    Поэтому вы были бы обязаны в каждый action creator, который является асинхронным, передавать бы помимо нужных вам аргументов, еще и функцию dispatch из своего контейнера. Что не удобно. (это все есть по ссылке на stackoverflow, но более подробно)
    Ответ написан
    1 комментарий
  • Как работать с confirm в react?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Итого (из комментариев) у топик-стартера настроен eslint и + ошибка в коде.
    Решение:
    1) использовать window.confirm вместо confirm
    2) передавать index (сейчас он у вас undefined)
    Ответ написан
    1 комментарий
  • Как использовать пакет prop-types?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вероятнее всего, предупреждение в том, что вы пишите React.PropTypes...
    А нужно просто PropTypes...
    Например:
    import React, { Component } from 'react'
    import { PropTypes } from 'prop-types' // можно и import PropTypes from 'prop-types'
    ... 
    ComputersList.propTypes = {
      data: PropTypes.shape({
        rows: PropTypes.array.isRequired,
        isFetching: PropTypes.bool.isRequired,
      }).isRequired,
      onlineSessions: PropTypes.array.isRequired,
      onChangeSort: PropTypes.func.isRequired,
    }
    Ответ написан
    Комментировать
  • Как правильно построить архитектуру компонентов react+redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Это как-то неудобно, у меня есть идея чтобы вынести List Item (stuff/:id/comp_7/:item_id) и Subitem (stuff/:id/comp_2/:item_id/sublist/:subitem_id) в отдельные контейнеры.

    Нормальная идея.

    Судя по вашей схеме, каждый элемент с красным текстом (я так понимаю, это роуты) - должен быть контейнером и будет легче.
    Ответ написан
  • Не могу побороть ошибку при использовании extract-text-webpack-plugin?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Привет, Денис. Обнови extract-text-webpack-plugin, скорее всего проблема в этом.
    У меня "extract-text-webpack-plugin": "^2.0.0-rc.2",
    Ответ написан
  • Как правильно тестировать Reducer в Jest?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    it(`handle action ${patientActions.ON_CHANGE_PATIENT}`, ()=>{
            expect(reducer(undefined, {
                type: patientActions.PATIENT_INIT_STATE, // тут должно быть patientActions.ON_CHANGE_PATIENT
                payload: {
                    value: '11122',
                    field: 'patient_ur'
                }
            })).toEqual({...defaultStates, patient_ur: '11122'})
        })


    ошибку в этом тесте исправьте, если "пройдет", то думаю дальше все получится. Суть юнит-тестов в том, что вы пишите: было А, применил какую-то функцию (в вашем случае редьюсер), стало Б. Сравнить с В.
    Причем "В" вы описываете сами.
    Ответ написан
  • Какой фреймворк Node.js использовать для связки React + Node?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Да все те же express, koa...
    Вообще, на hh.ru пробовали искать по ключевым словам типа node.js, react?
    Ответ написан
    Комментировать
  • Когда действительно необходимо потащить flow в проект?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Для того, чтобы в проекте что-то появилось, обычно возникают такие ситуации:
    1) у меня все работает, но что-то не устраивает
    2) у меня есть время и желание выучить новое

    Если у вас п.2 - то просто берете flow и проверяете стало ли с ним лучше / удобнее. Если да - можно внедрять.
    Если п.1 - анализируете что может вам помочь в работе, и пробуете разные инструменты.
    Ответ написан
    Комментировать
  • Какую архитектуру выбрать для приложения типа Chat, Slack?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Подскажу ответ только на 1й вопрос: Redux удобнее чем простой Flux, как по мне. У flux нужно много чего держать в голове... что куда подписано и тд тп. А у Redux - store один и этим удобно.

    Ну и докучи закину еще 0.5 на второй.. Реакт-роутер в контексте (следовательно в пропсах) прокидывает много полезной информации. Просто поставьте его, и посмотрите что он передает в компоненты. На основе этих данных сможете сделать выбор, нужен вам он или нет.
    Ответ написан
    1 комментарий
  • Как подключить less к Webpack?

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

    ...
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    ...
    // в секции plugins
    plugins: [
    ...
    new ExtractTextPlugin({
          filename: 'style-[contenthash].css',
          disable: false,
          allChunks: false, // true
        }),
    ...
    ]
    
    в секции module -> rules (loaders)
    ...
    {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract({
              fallbackLoader: 'style-loader',
              loader: ['css-loader', 'less-loader'],
              publicPath: '/public', // ваш publicPath
            }),
          },
    Ответ написан
    9 комментариев
  • Как вставить компонент по нажатию на кнопку?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вам не нужно напрямую работать с DOM'ом как это часто было в jquery коде.
    Подумайте следующим образом: у вас есть изменяемое состояние (разное колиество "тудушек" для списка дел) - его можно (а в вашей задаче, думаю и нужно) хранить в state компонента (например в this.state.todos = [ todo1, todo2, todo3 ...])
    В render функции вам нужно пробегаться по this.state.todos и генерировать разметку...

    По кнопке на добавление, вам нужно устанавливать в this.state.todos новый массив, в котором будет на один элемент больше. При этом, так как state изменится, у вас вызовется функция render, а так как в ней идет генерация разметки в зависимости от того, что лежит в this.state.todos - то вы получите на 1 элемент больше. И так по кругу.

    Аналогично реализуется и удаление и редактирование. Вы всегда изменяете что-то в state, реакт перерисовывает для вас компонент и его потомков - вы получаете актуальное состояние.
    Ответ написан
    6 комментариев
  • Почему не происходит перезагрузки после изменения sass в webpack?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    1) зачем вам extractTextPlugin в develop режиме? Если незачем, то замените это на scss и style loader'ы, например так:
    {
            test: /\.scss$/,
            use: [
              'style-loader',
              'css-loader',
              'sass-loader',
            ],
            include: path.join(__dirname, 'src'), // ваша директория тут
          },


    2) добавьте --hot у запуска сервера:
    webpack-dev-server --open --hot --config webpack.dev.js


    3) если все же нужны extracted - почитайте эту тему (много решений).
    Ответ написан
    Комментировать
  • Почему при добавлении Input теряются введенные данные в других Inputs?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Ситуация следующая:
    По кнопке add вызывается функция addPropertiesToArray, вы внутри в newArrays имеете: {Registrations:2} и это устанавливаете в state.

    После изменения state, само собой вызывается метод render, внутри которого у вас вызывается функция propertiesParser

    Это функция идет по properties и отрисовывает заметку. У вас в этот момент нет никакой информации, что было введено в inputs, вы это никуда не сохранили, а ре-рендер вызвали (так как state изменили в addPropertiesToArray), следовательно ваши MyInput компоненты отрисовались с пустым значением (вы, в разметке так и указываете value='' => то есть value = пустая строка).

    Чтобы у вас сохранялись введенные значения, вам нужно их где-то хранить. В вашем случае, я бы хранил их в state, и в input'ax брал бы эти значения. Само собой, в функции addPropertiesToArray, эти бы значения в стейт и добавлял.

    p.s. сам код в рамках этого вопроса не обсуждаем, я вашей задумки не понял, мне кажется слишком сложно написано.
    Ответ написан
    2 комментария
  • Webpack нужен для того чтобы заменить им npm / gulp?

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

    Думаю, для того, чтобы создатели могли как-то получать деньги.

    Webpack "еше один" удобный инструмент для создания файла скриптов/стилей, обработки каким-то образом картинок и прочих возможных дел. Другими словами - еще один удобный инструмент для веб разработки.
    Gulp делает примерно тоже самое. Еще из популярного был (и есть) - grunt. Просто три похожих инструмента, каждый со своими плюсами/минусами (как обычно). Так же есть и другие различные менее популярные (на мой взгляд) "сборщики/таск-раннеры".

    Npm тут слегка не в тему в этом сравнении. Но если говорить об "удобстве" разработки - то в тему. С npm удобнее) но это пакетный менеджер и его задача отличается от задач webpack/gulp/....
    Ответ написан
    Комментировать