• Что такое Redux простыми словами?

    jQuery "видит" весь DOM целиком. И манипулирует DOM-ом, доступ к которому предоставляет браузер. Но можно и по-другому.

    Давайте рассмотрим такую архитектуру, в которой все компоненты связаны между собой древовидно. То есть, отдельно взятый компонент может общаться со своими дочерними и со своим родительским. Если нужно, чтобы между собой пообщались два компонента в разных ветках, то в конце концов их общение происходит через общего предка. Такой подход вполне согласуется с древовидной структурой HTML.

    Затем отделим состояние от поведения и представления. Состояние можно описать статической структурой данных, JSON-ом, например. А поведение - это чистая функция, из предыдущего состояния и некоего события (действия) делающая следующее состояние. Представление же "знает", как визуализировать состояние. Можно этот принцип воспроизвести от самых мелких компонент (не имеющих потомков) в нашем дереве и до корня. Тогда весь жизненный цикл приложения можно изобразить как цепочку состояний от некоего начального и до текущего, ведомую событиями (действиями).

    Для того, чтобы это всё отобразить, не обязательно в ходе вычисления следующего состояния (или представления) сразу манипулировать DOM-ом. Можно построить из состояния и его представления фрагмент DOM-а, каким он должен получиться. А потом вычислить diff между этим построенным фрагментом (виртуальным DOM-ом) и реальным браузерным. И этот diff применить к реальному DOMу. Один раз. Получится быстро.

    Насколько мне известно (поправьте, если это не так), Redux заимствован из Elm-а. Elm - это экосистема и функциональный язык, компилируемый в JS, сделанный для того, чтобы фронтэнд можно было разрабатывать удобно, быстро и без runtime-ошибок. По синтаксису - это адаптация Haskell-a. Ключевым элементом Elm-а является как раз вот эта самая архитектура. Советую подробнее почитать в первоисточнике. https://guide.elm-lang.org/architecture/

    Кроме упомянутых особенностей эта архитектура также позволяет выполнять так называемую time-travelling отладку. Поскольку каждое состояние и каждое событие по пути от исходного до текущего можно залогировать и воспроизвести (ведь функция, вычисляющая следующее состояние у нас чистая).

    С точки зрения функционального программирования, при таком подходе текущее состояние является результатом функции leftFold, применённой к исходному состоянию, последовательности событий (действий), приводящих к текущему и функции, умеющей вычислять следующее состояние.
    Ответ написан
    Комментировать
  • Если у родителя shouldComponentUpdate return fasle, обновятся ли вложенные элементы?

    Если shouldComponentUpdate вернула false - метод рендер текущего компонента не будет вызван. Соответственно дочерние компоненты тоже не начнут рендериться сами. Но может так случиться (например - по таймеру), что в дочернем компоненте вы вызовете setState - тогда он обновится (независимо от родителя)
    Ответ написан
    Комментировать
  • Какие технологии нужно знать для хорошей back-end разработки на Node.js?

    @SergeyZelensky-Rostov
    Занимаюсь front-end. Пишу на JavaScript, изучаю Node.js. Но понимаю что нужно знать как что работает. Протоколы и прочее.

    Как что работает надо знать и фротендеру и бекендеру.
    0)Самое главное понимать какой технологией лучше воспользоваться, для того чтобы сделать ту или иную задачу, нода - не серебрянная пуля
    1) Асинхронность, синхронность
    2) Протоколы http 1.1/http2 - в чем разница в них
    3)вебсокеты
    4)такие вещи как redis,memcached, уметь сочетать их работу,с реляционными базами
    5)хорошие знания SQL
    6)Почитать все что вам интересно, вы не найдете книги прочитав которую вы станете все понимать, и хорошо во всем разбираться, самая лучшая книга это документация(но бывают исключения), и конечно же опыт чем больше пишете тем быстрее приходит понимание определенных вещей.
    Ответ написан
    4 комментария
  • Как устранить ошибку в Android Studio?

    xne71247
    @xne71247
    Попробуйте сделать File->Invalidate Caches/Restart
    Ответ написан
    Комментировать
  • Как устранить ошибку в Android Studio?

    @Zacher
    Меня эта чушь уже задолбала, постоянно сама по себе выскакивала. Лечится это так:
    1. Отключаешь плагины gradle и все с ней связанные, студия сама их предложит отключить
    2. перезагружаешь студию
    3. включаешь все обратно
    4. перезагружаешь
    Я из-за этого проект пересоздавал -_-
    file->settings->plugins
    Ответ написан
    Комментировать
  • Что такое Redux простыми словами?

    edtoken
    @edtoken
    Full-stack Javascript/Python Developer
    В данном случае разное мышление (проектирование).

    В вашем случае:
    Логика идет от компонентов.
    Допустим на странице пользователя есть label online/offline
    Откуда брать значение, если нужно заблокировать окно чата в тот момент когда пользователь offline?
    Что если таких действий не одно, а допустим штук 10?
    Что если таких действий не одно, а допустим штук 10 и еще на разных страницах?
    Куда вынести функцию, которая проверит статус пользователя?
    Как её назвать чтобы не было конфликта имен?

    Redux для меня в первую очередь подход.
    1. Проектируется состояние (база данных фронта)
    {user:{online:false}}
    2. действие checkUserStatus (ajax/socket)

    3. сколько угодно компонентов (которые не знают друг о друге ничего и имеют любое поведение, в зависимости от статуса пользователя)
    компоненты могут ничего не уметь кроме как рендерить этот статус (label), или, могут быть более сложными и иметь логику + обработчики (кнопки, пр)
    Ответ написан
    4 комментария
  • Как написать компонент который будет возвращать компонент который в него положили?

    EvgeniyKvasyuk
    @EvgeniyKvasyuk
    https://habrahabr.ru/post/309422/ - замечательная статья, после которой вы легко напишите High order component
    Ответ написан
    Комментировать
  • Как написать компонент который будет возвращать компонент который в него положили?

    @vaskadogana Автор вопроса
    Frontend developer
    пока что решил свой вопрос по другому, но возврат содержимого вроде вот так происходит:
    class SomeContextProvider extends React.Component {
      getChildContext() {
        return {some: "context"}
      }
    
      render() {
         return React.Children.only(this.props.children)
      }
    }


    спасибо Evgeniy Kvasyuk за статью https://habrahabr.ru/post/309422/
    Ответ написан
    1 комментарий
  • Как написать компонент который будет возвращать компонент который в него положили?

    Staltec
    @Staltec
    Node.js разработчик
    render() {
      const isHidden = false; 
    
      if (isHidden) return null;
    
      return <children.type {...children.props} additionalProp="an value" />;
    }
    Ответ написан
    Комментировать
  • React: реализация рендеринга при изменении состояния?

    @zzzevaka
    Использование state не отслеживается. setState вызовет обновление компонента даже если вы не используете state в render вообще. Остановить обновление может shouldComponentUpdate
    Ответ написан
    Комментировать
  • Компоненты высшего порядка способ вернуть props.children из render?

    return (
       <El />
    )


    Это верно, если El - компонент. А у вас El - это реакт элемент (инстанс компонента). Так что просто возвращайте его:

    render() {
        return this.renderChildren(this.props);
      }
    Ответ написан
    2 комментария
  • Webpack 2. Как уменьшить сборку React?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Так же можете использовать code splitting (https://toster.ru/answer?answer_id=1010668)
    Ответ написан
    Комментировать
  • Как сделать сайт без перезагрузки на react.js?

    @YNile
    JS Developer
    Ничего вы не разобрались, а написали кривенький хак :) Для внутренних ссылок в react-router есть элемент Link<Link to="some-path">SOme path</Link>
    Он-то и решает вашу задачу
    Ответ написан
    3 комментария
  • Как обойтись без dev сервера (create-react-app) при использовании react-router?

    Вы хотите отказаться от webpack-dev-server? Если да - можно просто использовать express для раздачи статики, а на все остальные запросы отдавать index.html

    const app = express()
    
    // раздача статики (css, fonts, images, ...)
    app.use('/static/', express.static(__dirname + '/../../public/static'))
    
    app.get('/*', (req, res) => {
      res.send(/* ваш index.html  */)
    })
    Ответ написан
    2 комментария
  • Существует ли описание общих принципов Material Design на русском языке?

    webxaser
    @webxaser
    Вот эта статья думаю вам подойдёт.
    Ответ написан
    Комментировать
  • Что учить Angular или React новичку?

    uaKorona
    @uaKorona
    Front-End разработчик
    Angular 1 живее всех живых )) Также как и Jquery )
    Если тебе нужна работа - то быстрее будет освоить уровень джуна на angular 1 и смотреть в сторону версии 2.
    Ну да, и зарабатывать деньги )

    На ReactJS джунов, спрос или маленький или его вообще нет. Тут сразу все хотят минимум синьора.
    Но думаю и спецы по React-у/Redux оплачиваются лучше.
    И еще в отличие от angular 2 - это решение используется крупными компаниями:
    Facebook, AirBnb, Netflix

    А вот Google, который разработал angular - сам его не использует... )
    В заключении:

    Деньги ? -> Angular 1
    На перспективу ? -> React
    На очень далекую перспективу ? - Angular 2
    Ответ написан
    6 комментариев
  • Что учить Angular или React новичку?

    GriNAME
    @GriNAME
    Front-End Developer, Android Developer
    Многие советуют начать изучение с Vue, а потом уже выбрать что лучше. Для многи плюс Vue будет в хорошей документации на русском языке (официальная поддержка русского на сайте). Мне ближе Angular (v.2+) с его MVC, поэтому выбрал его. А вообще эти фреймворки не нужны для обычных простых сайтов. Если страница которую верстаешь язык не поворачивается назвать веб приложением, то там нужна обычная верстка. А когда на странице много модульных частей, которые как-то взаимодействуют друг с другом. То тут уже фреймворки будут кстати.
    Что именно выбрать решать вам. По большому счету это не принципиально и в основном дело вкуса в первую очередь. Все они в итоге делают веб приложения. Я выбрал Angular v.Последняя. Так же симпатичен Vue. Реакт немного недолюбливаю, чисто из-за личных предпочтений, не более.
    А так, JS в первую очередь доводите до хорошего уровня, как тут большинство и советуют. И ищите недорогие заказы. Главное сейчас это практика реальных проектов и просто запустить сам процесс поиска и выполнения работы. Остальное приложится)
    Ответ написан
    Комментировать
  • Что учить Angular или React новичку?

    @DannyFork
    Из мира Android. С ReactJS/Redux можно успешно начать работать имея базовые знания javascript .На моем опыте,когда возникла необходимость разработать SPA,весь багаж моих знаний о языке состоял из var,function,arrays и все.Неделю хватило,чтобы освоить библиотеку и необходимый уровень javascript(es6).
    В принципе достаточно ценный навык,за короткий срок .Что говорит о том,что порог входа низок,даже для человека с стороны.
    И все банально,работайте на результат,доучивайте язык в процессе.
    Ответ написан
    2 комментария
  • Как осуществить взаимодействие между React и не-React частью кода на странице? И как добавить метод React элементу?

    Для этого лучше всего использовать компонент как класс:

    class MyElement extends Component {
    
      componentDidMount() {
        // начиная с этого момента у вас есть доступ к 
        // this.container - это ссылка на DOM ноду (или реакт-элемент)
    
       jQuery(this.container) // например используем джейквери
    
        // или вызовем метод элемента
        // выведет в консоль 'Wow, so super!'
        this.componentWithMethod.mySuperMethod()
      }
    
      handle3dPartyContainerRef = node => {
        this.container = node
      }
    
      handleComponentRef= node => {
        this.componentWithMethod= node
      }
    
      render() {
        return (
          <div>
            <h1>Hello!</h1>
            <div ref={this.handle3dPartyContainerRef}  />
            <ComponentWithMethod ref={this.handleComponentRef} />
          </div>
        )
      }
    }
    
    
    class ComponentWithMethod extends Component {
      mySuperMethod = () => {
         // Вот так можно добавить метод к элементу
        // вызывать его можно если получить ссылку на установленный в DOM элемент 
        console.log('Wow, so super!')
      }
    
      render() {
        return (
          <span>just a node</span>
        )
      }
    }


    Про ref в реакте есть документация.
    Ответ написан
    2 комментария