• Каким образом лучше всего интегрировать ReactJS с Laravel?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Приложения написанные на react/angular/и т.д. ожидают на бэкэнде API.

    1. Создаете API
    2. Внутри ваших компонентов "общаетесь" с вашим API
    Ответ написан
    Комментировать
  • Как комбинировать компоненты в React?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Нужно как вы написали: создавать отдельные компоненты, в которых реализован некий функционал, собственноручно или "подтянув" сторонний код.
    На выходе, будет например:
    <PhoneInput />
    <DatePicker />

    и т.д.
    Ответ написан
  • Как послать json на сервер?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вопрос не относится к реакту абсолютно. Чтобы послать данные, нужно использовать POST запрос. Из библиотек для xhr запросов, лично мне нравится isomorphic-fetch

    P.S. Вы можете хоть $.ajax (из библиотеки jquery) использовать, хоть нативный xhr...
    Ответ написан
    Комментировать
  • Как сделать приложение redux&reactjs без Nodejs?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    На всякий случай: node нужен для удобства разработки и для "сборки бандла вебпаком", например... Для общения с вашим API node не нужна. Нужен файл(ы) скриптов, которые будут отвечать за работу вашего SPA приложения.

    У вас же в конце концов будет только html/css/js файлы, которые отдает ваш nginx, например. Node-процесс запускать для работы вашего SPA в проде не нужно.

    з.ы. на одном из проектов в проде: статика (html/css/js) отдается nginx, бэкэнд на Elixir + Phoenix.
    з.ы.ы. Локальная девелоперская версия работает на ноде + собираю скрипты вебпаком.
    Ответ написан
    2 комментария
  • Как создать очередь показа изображений?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Очередь с реактом ничем не отличается от "очереди с чем угодно". Можете использовать requestAnimationFrame (EN, на русском тоже есть в гугле) + "как контролировать fps", или setInterval / setTimeout.

    Реакт тут вообще не причем, когда напишите код для показа без него, добавьте этот код в код компонента и все.
    ---
    Алгортим примерно следующий:
    1) загружаете список url
    2) по нему начинаете загружать картинки (стандартно, с помощьюconst img = new Image + img.onload = ... )
    3) эти картинки складываете в очередь (в массив)
    4) начинаете показывать

    Показ вы начинаете либо в случае загрузки первого кадра и далее по ходу загрузки остальных, либо после загрузки всех - это уж как вам угодно.
    Ответ написан
    Комментировать
  • React+Redux VS Backbone (Marionette) в 2017?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    1. Поясните этот момент. Поиск, фильтрация... это же обычные операции на vanila js? Спокойно обрабатывайте ваши данные в reducer'ах, хоть с помощью underscore, хоть с помощью lo-dash...
    2. Разделение кода возможно. Так как за сборку отвечает обычно webpack, начать можно с небольшого теоретического экскурса здесь: Кантор (ру) (гугл, подкидывает еще (англ.))
    3. Не мало всего уже есть, но конечно меньше.

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

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Как уже писал не раз тут на тостере - начните с codementor.io (поиском node.js и russian). Там ставка выше, но я думаю сможете договориться.

    P.S. в целом же, менторов на русском языке найти очень не просто.
    Ответ написан
  • Как запустить meteor.js?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Можно запускать команду через screen
    То есть, команда screen как будто бы открывает виртуальную вкладку, в ней запускаете meteor, затем выходите из скрина (обычно это ctrl + A,D ) и у вас "сессия" в той виртуальной вкладке остается висеть. Чтобы снова к ней присоединиться, нужно написать screen -R. Ну или просто почитайте подробнее про screen.
    Ответ написан
    1 комментарий
  • Какой использовать стэк для одностраничного медиа веб-приложения?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Поддержу Владимир Ио про "зачем переписывать", но добавлю, что человека на проект написанный на react, найти будет проще чем специлаиста по бэкбону / vue. Про рост числа vue- специалистов не знаю, а вот backbone думаю только убавляет в спецах и тенденция усилится со временем. Реакт же - очень интенсивно набирает все больше "разработчиков" и поэтому с точки зрения поддержки, будет дешевле.

    Я бы сам предпочел react. Ничего не имею против vue / angular (пусть его и нет в вопросе), но с точки зрения дешевизны поддержки, react сейчас дороже angular, но думаю уже дешевле backbone (чисто "диванная" и немного hh.ru аналитика). Со временем (думаю не далее чем вторая половина 2017 года) цена поиска и найма angular/react специалистов будет примерно равна.
    Ответ написан
    Комментировать
  • Как получить доступ к всему store из reducer?

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

    P.S. круто про редьюсеры рассказано во втором туториале от Дэна (создателя redux). Так же можно и первый посмотреть, если еще не смотрели (оба на английском, но речь понятная + к каждому видео есть транскрипция (текст))
    Ответ написан
    Комментировать
  • Динамический сайт на nodejs, как сделать?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Грубо говоря, вы используете php в том числе и в качестве шаблонизатора, так? Значит и на node смотрите в эту же сторну, например if условие в jade.
    Ответ написан
    1 комментарий
  • Как и где найти преподавателя?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    1)codementor.io (там выбираете тэги: нужные вам технологии и ru/rus/russian например).
    2) фрилансим - создаете задачу.
    3) здесь на тостере у интересных вам пользователей (в нужных тэгах опять же) смотрите контакты - пишете в личку.
    4) просите кого-то из друзей в IT компаниях попросить кого-то из их друзей научить.

    Ваши вопросы:
    1) javascript (очевидно). Написать "смену контента" на кнопки можно без использования библиотек, или с ними.
    2)
    какой самый быстрый и оптимальный способ отправки данных на сервер
    : обычный запрос (POST), веб-сокеты... вряд ли что-то еще.

    а также как создать такой сервер и базу и мини API для приёма и записи данных

    вопрос слишком общий. Что на сервере? (наверняка MySQL база) На чем писать API будете? и т.д.
    Ответ написан
    Комментировать
  • Как передать параметры не используя стрелочную функцию в reactjs?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Передавать параметры в функции, можно с помощью bind (при этом создается новая функция, что может сказаться на производительности, но я с проблемами не сталкивался).

    Выглядеть это может так:
    ...
    onChangePeriodClick(period) {
      console.log(period)
    }
    ...
    <button onClick={this.onChangePeriodClick.bind(this, 'Hours')} /> Hours </button>
    ...
    Ответ написан
    8 комментариев
  • Как вы структурируете компоненты в react приложениях?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Есть директория components, есть containers. Внутри почти плоский список, когда появляется какая-то явная группа, например 5 компонентов фильтров - создаю отдельную поддиректорию.

    Предлагаю вам не заморачиваться по этому поводу сильно .)
    Ответ написан
    Комментировать
  • Как лучше всего реализовать CRUD - DOM на ReactJS?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    по поводу вопроса 2: вам будет необходимо взять еще что-то. Например, можно использовать веб сокеты, чтобы рассылать всем подписчикам события: элемент_создан / удален и т.д. Без такой "рассылки" по подписчикам (подключенным клиентам) не получится сделать, разве что будет какой-то костыль с таймером (не надо так).

    по поводу вопроса 1, за неимением хорошего простого примера под рукой, предлагаю сделать по шагам, если получится - уверяю, с "расширением" пойдет гораздо лучше:

    Например есть страница с номерами телефонов и именем.

    На этой странице у вас компонент PhonesAndNames в момент componentDidMount делаете xhr вызов и получает список всех телефонов и номеров. Например, это GET запрос на ваш сервер: GET /api/phones

    Полученные данные вы кладете в state и в рендере компонента у вас строится таблица по данным из state компонента. Следовательно, как только у вас xhr запрос завершится, данные окажутся в state, случится ре-рендер и все будет хорошо. Для полного счастья, можно добавить переменную isLoading, например, и ставить ей true в начале выполнения запроса, и false в момент получения ответа. В рендере компонента, в зависимости от значения isLoading - рисовать прелоадер. Конечно, isLoading тоже будет жить в state.

    Далее, при наведении на строку - у вас, к примеру рисуется "крестик". По клику на крестик - производится запрос на сервер, например: DELETE /api/phones/айди. Внутри компонента PhonesAndNames это будет просто onClick на элементе крестик и функция, которая опять же отправляет xhr запрос. Когда будет получен ответ, вы должны поиском найти id удаленного элемента из вашего списка в state и вернуть список элементов. Изменился state - случился ререндер - все в порядке.

    Так же с добавлением. Вам достаточно поставить пару input'ов + кнопку "добавить". Опять обработчик на onClick (или на onSubmit, если сделаете это как форму) - опять xhr запрос (POST /api/phones), опять на успешный ответ операция со списком телефонов и имен в state, а именно: банально добавление в конец или в начало нового элемента.

    Остался только update. С ним тоже самое. В простейшем примере, чтобы не заморачиваться, все ваши телефоны и имена могут быть в таблице внутри тэга input и в конце строки, там же где крестик - иконка "обновить".
    ---
    Получается, если вы будете использовать web-сокеты, то вам нужно будет настроить свой сервер так, чтобы в момент успешного ответа на все вышеизложенные методы бродкастилось (от broadcast, т.е. рассылать) какое-то событие, на которое ваши клиенты умеют реагировать.
    ---

    Чтобы все это в процессе "расширения" и "усложнения" не превратилось в трудноподдерживаемую кашу, рекомендую использовать любую из библиотек для "управления состоянияем приложения", так сказать. Мне очень нравится redux.
    Ответ написан
    7 комментариев
  • Стоит ли использовать state, или все таки всегда хранить в redux store?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    State можно и нужно использовать. Об этом не раз говорил создатель библиотеки Redux.

    Согласен с Pavel Shvedov по поводу того в каких случаях. Абсолютно нет никакой необходимости тот же onChange в поле инпута выносить в redux store и диспатчить изменения на каждый чих, если вы, например, делаете валидацию поля. Пусть у вас будет форма, у нее есть кнопка submit, для нее, например, простейшее правило: все три поля формы должны быть не пустыми. Надо ли это выносить в store? Зачем? Используете state, смотрите: если поля не пустые - убираете атрибут disabled у кнопки submit. Смотрите === реакт сам смотрит, в зависимости от переменной в state, так как на изменения state происходит ре-рендер компонента.

    Пример:

    ...
    constructor(props) {
        super(props)
        this.state = {
          email: '',
          password: '',
        }
        this.onSubmit = this.onSubmit.bind(this)
        this.onInputChange = this.onInputChange.bind(this)
      }
      onSubmit(e) {
        e.preventDefault()
        const { email, password } = this.state
        this.props.onSubmit(email, password)
      }
      onInputChange(e) {
        this.setState({ [e.target.id]: e.target.value })
      }
      validate() {
        if (this.state.email && this.state.password) {
          return true
        }
      }
    ...


    далее в методе render компонента:

    render() {
        const { email, password } = this.state
        return (
          <div className='row'>
            <div className='centered w300'>
              <form onSubmit={this.onSubmit}>
                ...
                <button type='submit' className='btn btn-success' disabled={!this.validate()}>
                  Submit
                </button>
              </form>
            </div>
          </div>
        )
      }


    Если не требуется большего, то зачем при этом использовать store ? На случай для какой-то более сложной валидации, можно использовать onBlur события и их уже диспатчить (вдруг вы введеный ник проверяете на "занят/не занят").
    Ответ написан
    2 комментария
  • Как сделать отзывчивое изображение?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Сделайте обертку, туда передавайте нужные размеры (https://jsfiddle.net/5fs3dkqj/2/)
    Ответ написан
  • Почему метод fetch не устанавливает headers-запроса?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    На счет нативного fetch, в MDN пример следующий:

    var myHeaders = new Headers();
    
    myHeaders.append('Content-Type', 'text/xml');
    myHeaders.get('Content-Type') // should return 'text/xml'


    Я использую библиотеку isomorphic-fetch.
    Для заголовков есть пара хелперов, выглядит так:

    export function httpGet(url) {
      return fetch(url, {
        headers: buildHeaders(),
      })
      .then(checkStatus)
    }


    Заголовки строю следующим образом:

    function buildHeaders() {
      const authToken = localStorage.getItem('myapp.token')
      return { ...defaultHeaders, Authorization: authToken }
    }


    Изначально, значение у defaultHeaders следующее

    const defaultHeaders = {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    }
    Ответ написан
  • Почему появляется ошибка при сборке проекта?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    в дополнении к предыдущему ответу, выглядит это примерно так:
    .babelrc
    "presets": ["es2015", "stage-0", "react"],
    Ответ написан
    Комментировать
  • Можно ли использовать Jquery в ReactJs?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Использовать можно. Здесь годная статья о том, как подключать только "кусочки jQuery" в сборку.
    Там же есть и примеры.
    Ответ написан
    Комментировать