• Webpack: Ошибка SASS + ExtractTextPligin в Linux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Все просто, у вас два раза есть правило, которое говорит webpack'y обрабатывать scss. Удалите лишнее.
    Т.е. в вашем случае, оставьте только с Extract...

    На всякий случай, свой кусочек (webpack 2+):
    {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract({
              fallbackLoader: 'style-loader',
              loader: ['css-loader', 'postcss-loader', 'sass-loader'],
              publicPath: '/public',
            }),
          },
    Ответ написан
  • Как использовать webpack в продакшне?

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

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

    p.s. судя по вашему коду вы так и делаете. Если будет удобно разбивайте функцию на более мелкие повторяющиеся кусочки и т.д. (но вижу, что и это уже тоже делаете).
    Ответ написан
    2 комментария
  • SessionStorage в React/Redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    внутри какой-то функции, где вы планируете сохранять:
    window.sessionStorage.setItem('localCheck', 'true') (или false)


    в вашем инпуте:
    <input
         checked={window.sessionStorage.getItem('localCheck') ? true : false } // или 'checked' : false не помню точно,
         className="local_checkBox"
         type="checkbox"
         onChange={() => this.clickOnCheckBoxD(params)}/>
    Ответ написан
    Комментировать
  • Как постоянно обновлять данные при помощи componentDidMount?

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

    Рекомендую использовать в вашем случае componentdidupdate (разобраться что это за "лайфхук").
    Ответ написан
    Комментировать
  • Как прокачаться в react/redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Запилить любой проект, в котором будут:
    1) авторизация
    2) роутинг (доступ к некоторым страницам закрыт для не авторизованных)
    3) динамическая подгрузка данных
    Ответ написан
    3 комментария
  • Как сделать такой роутер на react?

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

    Ответы:
    1) да, можно
    2) можете завязаться, например, на window.location.pathname . Если там /auth - рисуете шаблон + такой-то набор инпутов или чего вам нужно, если там /test - то другой. Так же можно сразу в constructor в state установить какие-то параметры, на основе которых вы будете отображать шаблон и другие разные варианты.

    В render функции это может выглядеть как-то так:
    ...
    render() {
      let template
      if (window.location.pathname.indexOf('auth') !== -1) {
        template = <div>это auth</div>
      } else {
        template = <div>это не auth</div>
      }
      return template
    } 
    ...
    Ответ написан
    Комментировать
  • Где и как можно найти тренера/наставника/ментора для решения проблем по программированию (треб. технологии: asp.net mvc, nhibernate, webapi и др)?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    codementor.io (в поиске указывайте russian если нужен русский, наравне с другими тэгами)
    "фрилансим" и прочие тоже котируются. Пишите стоимость, размещайте объявления.
    В сети есть туториалы/статьи/etc, которые вам нравятся? Пишите их авторам напрямую.
    Ответ написан
    Комментировать
  • Как сделать Input disabled?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Необходимо, чтобы атрибут disabled у input'a реагировал на значение в другом. Если оба инпута в одном компоненте, то можете использовать state, и смотреть если в state первого инпута есть значение, то второй disabled, примерно так:
    <FieldGroup
          id="formControlsText"
          type="text"
          label="Text"
          placeholder="Enter text"
          disabled={this.state.myOtherInputValue1}
        />
    Ответ написан
  • Как сделать onChange функцию через redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    export function onChangeUser(value, name) {
      return {
        type:     login.ON_CHANGE_USER,
        fieldName: name,
        value: value
      };
    }
    ...
    case loginActions.ON_CHANGE_USER:
      return {
        ...state,
        [action.fieldName]: action.value
    }
    Ответ написан
    2 комментария
  • Как реализовать шаблонизатор на ReactJS?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    На первый вопрос:

    Оборачиваете все роуты в layoutWithSidebar компонент, в котором есть меню левое и в зоне контента this.props.children
    Активная ссылка (гугл).
    Пример, для роутера 3й версии:
    //компонент NavLink для удобства
    export default class NavLink extends Component {
      render() {
        return <Link {...this.props} activeClassName='active'/>
      }
    }
    ...
    <NavLink to='/url'>NAME</NavLink>
    Ответ написан
    2 комментария
  • Как загрузить изображение в canvas?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вы можете обратиться к canvas'у через: this.refs.canvasA, далее работайте как обычно, реакт тут уже не должен фигурировать в вопросе. (то есть, вызываете getContext, вызываете drawImage .... )
    Пример (без реакта).
    Ответ написан
    1 комментарий
  • Как лучше организовать работу с Canvas в React/Redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    "canvas мутирует напрямую элементы dom" - не совсем понятно, что имеется ввиду. На canvas происходит рисование. Дом не изменяется, изменяется что-то внутри canvas. Следовательно, чтобы к этому "канвасу" (имеется ввиду сам тэг) обратиться, нам понадобиться ref. Например: <canvas ref='myCanvas' width={180} height={30} />.
    Второй вопрос, тоже не совсем понятен, что имеется ввиду под "концепцией и совместимостью"? Так как у вас есть ссылка на "канвас" через this.refs.myCanvas - можно далее вытащить context, с помощью getContext и уже дальше работать.

    Пример компонента (в зависимости от пришедших данных, рисует столбики повыше, пониже..)
    export default class SomeBars extends Component {
      componentDidMount() {
        this.drawBars(this.props)
      }
      drawBars(props) {
        const { data } = props
        const canvas = this.refs.canvas
        const ctx = canvas.getContext('2d')
        ctx.clearRect(0, 0, canvas.width, canvas.height)
    
        const tempData = data ? data.slice(0,60) : []
    
        tempData.forEach((item,index) => {
          ctx.fillStyle = 'rgba(3,169,244,1)'
          ctx.fillRect(index*3, 30, 2, -(item/2))
        })
      }
      render() {
        return <canvas ref='canvas' width={180} height={30} />
      }
    }


    Если же речь, про canvas и поддержку тасканий мыши и всяких крутых штук (например, как умеет fabric.js) - то можно почитать на SO

    Так же, гугл как обычно, выдает несколько ссылок, например.
    Ответ написан
    Комментировать
  • Можно ли декорировать redux connect или как отписаться от redux store?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Не знаю зачем, но на вопрос "Как отписаться от redux store, когда демонтируется?" ответить легко - использовать componentWillUnmount

    p.s. стоит прочитать полностью - the component lifecycle
    Ответ написан
  • Как правильно передать action в reducer из компонента?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    export default function rootReducer(state = [], action) {
        console.log(action);
        if(action.type === 'BUTTON_CLICK'){
            return[
            ...state,
                action.book
            ]
                store.dispatch(state) // выкинуть отсюда.
        }
        return state;
    }


    В компоненте, используйте state, в нем храните name и author. По клику на кнопку, вам нужно вызвать ACTION. Скорее всего он вам придет из родителя-контейнера (компонента, который присоединен к store, с помощью функции connect).

    Inputs переписать можно так:
    export default class Inputs extends Component {
        constructor(props) {
            super(props)
            this.onAuthorChange = this.onAuthorChange.bind(this)
            this.onNameChange = this.onNameChange.bind(this)
            this.takeVal = this.this.takeVal.bind(this)
            this.state = {
                author: '',
                name: '',
            }
        }
        onAuthorChange(e) {
            this.setState({ author: e.target.value })
        }
        onNameChange(e) {
            this.setState({ name: e.target.value })
        }
        takeVal() {
            this.props.addItem({ // имя, под которым вы передали свой экшен в качестве пропса от родителя
                author: this.state.author,
                name: this.state.name,
            })
        }
        render() {
            const {author, name} = this.state
            return (
                <div className="app__enter">
                    <div className="inputs-bock">
                        <input onChange={this.onAuthorChange} className="inputs-book__author" placeholder="Автор" type="text" value={author}/>
                        <input onChange={this.onNameChange} className="inputs-book__name" placeholder="Название" type="text" value={name}/>
                    </div>
                    <div className="button-wrap">
                        <button onClick={this.takeVal}>Добавить книгу</button>
                    </div>
                </div>
            )
        }
    }


    Конечно, так как код функций onAuthorChange и onNameChange одинаковый, его можно уместить (и очень просто) в одной функции...

    Ваш "приконекченый родитель" может выглядеть так:

    import React, { Component } from 'react'
    import Inputs from '../components/Inputs'
    import { connect } from 'react-redux'
    
    import {
      addItem,
    } from '../../actions/UserActions'
    
    class InputsContainer extends Component {
      render() {
        return <Inputs addItem={this.props.addItem} />
      }
    }
    
    const mapStateToProps = (state) => ({})
    
    const mapDispatchToProps = (dispatch) => ({
      addItem: (params) => dispatch(addItem(params)),
    })
    
    export default connect(mapStateToProps, mapDispatchToProps)(InputsContainer)


    p.s. доки читать нужно, поддерживаю. ДЗ: переименовать addItem в пропсах и вызвать его внутри takeVal. Сделать из 2х функций обработчиков изменений в инпутах - одну.
    Ответ написан
    1 комментарий
  • Передача массива объектов в component?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вы не передаете в JobsList никаких props, следовательно this.props.Jobs = undefined.
    Выносите ваши "джобсы" в тот же файл где export default App, и пишите:
    return (
          <div>
            <JobsList Jobs={jobs} />
          </div>
        );
    Ответ написан
    Комментировать
  • Как в react spa грамотно реализовать разделение прав?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    С помощью роутинга react-router, например. В 4й версии думаю так же, но речь про 3ю.
    Часть роутов, оборачивается в родительский роут, котором идет проверка прав юзера, и далее в зависимости от этого вы рисуете:
    а) разные шаблоны, в которых фигурирует this.props.children
    б) null - если запрещен доступ, или опять же this.props.children - если все ок.

    В "чилдренах" - у вас будут вложенные роуты.

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

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Для этого придумали функцию debounce
    onChange={debounce(this.onInputChange, 300)} // будет вызываться не чаще чем раз в 300 ms
    Ответ написан
    1 комментарий
  • Правильная ли логика работы приложения на react/redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    При нажатии на кнопку генерируется action - тип: "КНОПКА_НАЖАТА" (1), у него в payload (полезной нагрузке, поле можно как угодно называть): какая это кнопка.
    Эти данные обрабатываются в редьюсере (2). Например: было пусто, после КНОПКА_НАЖАТА стало "в".
    Это изменение в редьюсере увидели подключенные (с помощью connect) компоненты. И перерендерились*.(3)

    * - если вы никак не мешаете render'y (например: не передаете тот же объект, или используете какое-то условие в shouldComponentUpdate,)

    ---

    Еще вариант, что это у вас все 1 компонент (либо 1 компонент + дети), и вам не надо гонять данные через store (то есть action + reducer ...), а просто можете использовать state.
    Ответ написан
    Комментировать
  • Как отправить все данные из LocalStorage по submit?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Так ответ прямо в вопросе. Отправить весь localStorage.
    ...
    onSubmit() {
    const data = JSON.stringify(localStorage)
    // отправить data
    }

    Только учтите, что там могут быть еще данные, не только с вашей формы.
    Ответ написан
    Комментировать