• Упростить массив объектов, есть ли резон и красивые решения?

    AlexMaxTM
    @AlexMaxTM
    В погоне за призрачным оверхедом, вы нагружаете процессор дополнительными вычислениями и еще напрасно расходуете память. Работайте напрямую с тем, что имеете. Массив объектов вполне удобный формат.
    Ответ написан
    Комментировать
  • Поясните для чего super(props), а также .bind(this)?

    Negwereth
    @Negwereth
    lvivcss.com.ua
    super() - вызов родительского класса на данном экземпляре, чтобы наследование сработало.
    А bind в данном случае - от скудоумия разработчиков react которые не смогли в компоненты на классах. Привязка методов из прототипа к конкретному экземпляру.

    Лично я это в самом темплейте через arrow function решал.
    Ответ написан
  • Насколько актуально изучение Node.js?

    boratsagdiev
    @boratsagdiev
    Чтобы стать хорошим фронтом, нужно знать минимум JS. А за ним подтянется и Node JS.

    Скринкаст Кантора устарел, если там не перезаписаны выпуски (Выпуски были записаны для Node 0.10.)
    Книга, в принципе, тоже :)

    Лучше поищите что-нибудь посвежее на ютубе. По Node JS [+Express] там полно всего. Из последнего нормального что мелькало в подписках:
    https://www.youtube.com/watch?v=w-7RQ46RgxU&list=P...
    https://www.youtube.com/playlist?list=PL4cUxeGkcC9...
    Ответ написан
    1 комментарий
  • В какой момент Virtual DOM Сравнивается с Real DOM?

    larisamoroz
    @larisamoroz
    Курю маны, втыкаю в код, ваяю, починяю.
    ReactDOM отвечает за работу с DOM,
    иными словами, если приложение работает и что-то отрисовывает в браузере — то нужно подключать ReactDOM.

    Virtual DOM сравнивается:
    1. не с текущей DOM , а с текущим снимком Virtual DOM (сделанным непосредственно перед применением каких-либо изменений)
    2. всякий раз, когда
      • а) меняется состояние компонента через setState
      • б) или меняются его props:


      а) lifecycle_state.png б) lifecycle_props.png

      См.:
    React: The Virtual DOM, React Component Lifecycle, The Component Lifecycle
    Ответ написан
    2 комментария
  • Redux c большим объемом данных в Store?

    Самое простое - сгенерировать 500-1000-whatever задач и посмотреть что будет с вашей системой.
    Если говорить в общем - я думаю, что это плохое решение в большинстве случаев. Тем более, если предполагаются большие объемы данных...
    • чем больше объектов, тем больше overhead на map\filter\objectAssign и операции со стейтом mapState\reselect.
    • банальный расход памяти браузера (а если с телефона?)
    • большое время загрузки и парсинга вашего json.


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

    PS
    Проведите тестирование (имитацию худшего сценария) и по результатам вам уже будет видно подходит это решение или нет
    Ответ написан
  • Какую книгу по assembler посоветуете?

    globuzer
    @globuzer
    gezgrouvingus progreszive ombusgrander greyderzux
    Авторы книг: Юров, Голубь, Зубков. Это российские более-менее современные учебные пособия.
    Также есть старинная книга, автор Скэнлон, программирование на IBM\XT, там еще для i8086 объясняется и хорошо расписана архитектура процика.
    Для организации ЭВМ и машинных языков, можно для понимаю почитать Таненбаума Архитектура компьютера, чтобы понять смысл ЭВМ изнутри.
    Ответ написан
    1 комментарий
  • React Native. Что происходит с JavaScript прослойкой после сборки в продакшн?

    JS код остается - он запускается отдельным потоком, не блокируя основной (отрисовку UI). Ну а дальше вы общаетесь с нативными компонентами через JSX - все очень похоже на работу с DOM (ведь за исключением refs реакт инкапсулирует работу с DOM-деревом)
    Ответ написан
    Комментировать
  • Выбор низкоуровневого языка?

    @nirvimel
    C. Only.

    И нет тут никакого выбора:
    На ассемблере пишут только студенты в порядке изучения архитектуры ПК. И те, кто в качестве хобби (бесконечно) разрабатывают собственную ОС (по какому-то религиозному убеждению истиннаяЪ ОС должна быть написана полностью на ассемблере). Профессиональные разработчики на ассемблере только читают потому, что могут заставить компилятор ЯВУ выдавать совершенно определенный ассемблерный код.

    C++, если использовать его идиоматично, а не как C с классами, то это уже совсем не низкий уровень, там нужно мыслить абстракциями, а не гонять байты. К тому же учится он совсем не быстро, а это как бы противоречит, поставленному в вопросе, условию.

    Поэтому остается только один язык. Он используется для этих задач уже более сорока лет (в то время как в других отраслях успело смениться много поколений языков) и за следующие сорок лет его вряд ли кто-то сможет подвинуть с этих позиций.
    Ответ написан
    6 комментариев
  • Как разделить webpack код от кода проекта?

    mr_T
    @mr_T
    Web-разработчик
    Задаёшь в entry столько элементов, сколько нужно. Потом в output задаёшь filename с подстановкой имени нужного entry. Entry со всеми зависимостями добавляешь в CommonsChunkPlugin, чтобы они не дублировались в entry исходников приложения. Типа того:

    entry: {
    	app: './src/app.js',
    	vendor: ['lib1', 'lib2', ... ] // перечисляем тут все зависимости, которые нужно вынести в отдельный файл
    },
    output: {
    	filename: '[name].js?[chunkhash:6]' // получаем 2 файла: app.js, vendor.js
    },
    plugins: [
    	new webpack.optimize.CommonsChunkPlugin({ // убираем дубли зависимостей из app.js
    		names: ['vendor']
    	}
    ]


    Ну и дальше по необходимости шатать конфиги entry и CommonsChunkPlugin, про них всё подробно в документации webpack расписано.
    Ответ написан
    2 комментария
  • Лучшая библиотека для asynchronous data fetching?

    @frozen_coder
    Java-developer
    Использую fetch-polyfill, когда откажемся от старых браузеров, то можно будет просто юзать нативный fetch и убрать polyfill. Если не fetch, то есть ещё axios, который вы почему-то не указали. В чем-то сложнее потребностей не возникало.
    Ответ написан
    Комментировать
  • Лучшая библиотека для asynchronous data fetching?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Использую isomorphic-fetch
    Ответ написан
    Комментировать
  • Как научиться писать на React-Native?

    @Froggyweb
    React это не язык. Чтобы его понимать надо хорошие знания в js.
    Ответ написан
    Комментировать
  • Как научиться писать на React-Native?

    @durnevdanya
    Привет. Конечно плохо, что с английский проблемы. Я советую вам для начала разобраться в документации, как можно подробнее. Изучить CSS для создания дизайна. Попытаться сделать что то свое, как на примерах в документации. Я так и выучил, кстати. А еще очень полезная вещь - находить проекты по React-Native на github и смотреть, как что там написано. Очень полезно. Создайте себе цель(идею приложения) и выполняйте ее, как можете, если что то не ясно - google вам в помощь. Как усвоите все базовые аспекты и создадите парочку приложений, советую посмотреть проекты на этом сайте.
    Удачи!
    Ответ написан
    2 комментария
  • Какие сейчас есть актуальные библиотеки для упрощения работы в React + Redux?

    @frozen_coder
    Java-developer
    Актуальны, почему нет? А вообще чаще всего не стоит скакать с одного на другое, пилите продукт, юзерам пофигу на чем вы пишите. Есть проблема - ищите альтернативу. А интересное лучше вне рабочего пробовать.
    Ответ написан
    1 комментарий
  • React-Redux. Какой путь правильнее: вызов connect на главном файле или на разных, которым нужно пробросить данные?

    Приложение вы оборачиваете в провайдер: он должен быть только один. Далее - вызываете коннект там, где нужны данные. При этом старайтесь избегать больших "коннектов" которые мапят кучу стейта и экшенов - т.к. это ведет к невероятному количеству ненужных ререндеров и перерасчетов state...

    Как пример - список с большим количеством элементов. Самая первая идея - сделать коннект к компоненту списка и передать ему items из state:

    const Item = props => (
      <li>{props.data.title}</li>
    )
    
    const List = props => (
      <ul>{props.items.map(item => <Item data={item} />}</ul>
    )
    
    const ConnectedList = connect(
      state => ({ items: state.someItems })
    )(List)


    Но что произойдет, если один айтем из store изменится? Правильно - ререндер всего списка. Даже если вы сделаете Item как PureComponent - все равно получится огромный оверхед.

    Второй вариант: коннектить список, но передавать туда только массив id элементов Плюс - коннектить каждый элемент, и получать данные из стора по переданному id. При этом хранить в сторе мы будем отдельно все айтемы (в виде хэшмапа itemId -> item) и отдельно массив с id, либо просто используйте reselect, который поможет вам сделать преобразование items => itemsIds избежав ререндеров (в примере я упущу этот момент, для краткости).

    const Item = props => (
      <li>{props.data.title}</li>
    )
    
    const ConnectedItem = connect(
      (state, props) => ({ data: state.someItems.entities[props.id] })
    )(Item)
    
    const List = props => (
      <ul>{props.items.map(id => <ConnectedItem id={id} />}</ul>
    )
    
    const ConnectedList = connect(
      state => ({ items: state.someItems.ids })
    )(List)


    Другими словами - даже 1000 подконекченных к стору компонентов лучше, чем 1 большой коннект (не скажу, что в 100% случаев, но все же).
    Подробнее про этот момент почитать можно тут somebody32.github.io/high-performance-redux

    PS
    И в целом, я заметил, что вы активно изучаете react - поэтому, рекомендую вот этот цикл статей Practical Redux. Там очень много годной информации по react+redux
    Ответ написан
    1 комментарий
  • React. Полезные библиотеки на подобие Redux?

    devellopah
    @devellopah
    на самом деле, таких библиотек пишется очень много. Поэтому лучше подпишись на рассылки по реакту, пусть новинки приходят на почту
    Ответ написан
    Комментировать
  • React. Полезные библиотеки на подобие Redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Для работы с датами: moment
    Для роутинга: react-router
    Для крутых таблиц, а так же представления большого количества данных: react-virtualized
    Для работы с material ui: material-ui
    Модалные окна: react-modal
    Удобный дейтпикер: react-bootstrap-datarangepicker
    Для google analytics: react-ga
    ---
    Для разработки:
    pre-commit - запускать проверки перед коммитом,
    eslint - поддерживать единый стиль кода на проекте,
    webpack + babel (само собой),
    cross-env - забыть про проблемы NODE_PATH под разные операционки,
    Ответ написан
    7 комментариев
  • React-Redux. Какой путь правильнее: вызов connect на главном файле или на разных, которым нужно пробросить данные?

    nevkusniy
    @nevkusniy
    KRATOR
    Собственно оба варианта корректны. Если рассматривать это в плане удобства использования, то второй вариант однозначно выигрывает. Один большой компонент будет разделен на несколько мелких, те еще на несколько, а те - еще. И вам будет проблематично перебрасывать каждый раз в параметры store.

    Provider вызывается один раз в корневом компоненте. Далее же вы просто любой из компонентов подключаете к redux store:
    import React, {Component} from "react";
    
    import {connect} from "react-redux";
    import {bindActionCreators} from "redux";
    
    /* ваш компонент */
    
    class MyComponent extends Component {
    	render() {
    		console.log(this.props);
    
    		return (<div></div>);
    	}
    }
    
    const mapStateToProps = (state) => {
    	return {
    		state
    	}
    };
    
    const mapDispatchesToProps = (dispatch) => {
    	return {
    		dispatch,
    		// это мы подключаем собственные actions
    		actions: bindActionCreators(actions, dispatch),
    	}
    };
    
    export default connect(mapStateToProps, mapDispatchesToProps)(MyComponent);
    Ответ написан
    Комментировать
  • Как унаследовать компонент в React и изменить его?

    Labriko
    @Labriko
    Senior Frontend Developer
    В Реакте не бывает случаев, когда наследование компонентов оправдано. Об этом подробно написано в официальной документации

    At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.


    Контент должен прокидываться через this.props.children компонента MainContainer, его рендер должен возвращать что-то вроде этого:
    <div>
      <Header />
      <Menu />
    
      <div className="content">
        {this.props.children}
      </div>
    
      <Footer />
    </div>


    Использование:
    <MainContainer>
    {/* Контент */}
    </MainContainer>
    Ответ написан
    1 комментарий