а не через connect(.....)(DumbComponent)

и все вроде-бы было хорошо, пока не пришло время тестов)

может как-то можно достать компонент-то из коннекта?

не прибегая к ножницам)

Dumb не должен быть связан с redux-store. Только контейнер, который через props передает уже для Dumbs

чтобы не ходить туда сюда, у меня сделан контейнер как тут https://egghead.io/lessons/javascript-redux-fetching-data-on-route-change

а можно как-то удобно подключать компоненты с путями вида Source/Source.jsx? я пока кладу в папку index.jsx module.exports = require(‘./Source.jsx’), но так себе путь

создавать в каждой такой папке package.json

а кто-нить сталкивался с зависающим профайлером в хроме на маке?

уж лучше index.jsx :)

уж лучше index.jsx :)

https://github.com/kriasoft/react-starter-kit/blob/master/docs/react-style-guide.md#separate-folder-per-ui-component

уж лучше index.jsx :)

согласен

Либо действительно require('./components/Component/Component');

согласен

гхм, только index.js, нафига там jsx )

вообще правильно бы писать jsx

потому что это не js

а можно как-то удобно подключать компоненты с путями вида Source/Source.jsx? я пока кладу в папку index.jsx module.exports = require(‘./Source.jsx’), но так себе путь

webpack module resolve?

потому что это не js

не, то, что по-хорошему будет написано в index.js это именно js

т.е. что-то вида export default from './Component.js(x)';

webpack module resolve?

для каждого компонента?

О, зачем?

а как?

просто для папки components

Да хотя бы так

Просто ресолвятся файлы из сырсов, а ты пишешь пути от корня проекта.

В данном случае от src

т.е. что-то вида export default from './Component.js(x)';

А расширение вообще не нужно писать

во-первых это не решает озвученный вопрос, во-вторых неявные пути хрень

А расширение вообще не нужно писать

ой, это да, случайно)

во-первых это не решает озвученный вопрос, во-вторых неявные пути хрень

Почему не решает? Как раз решает. Человек не хочет писать dotslash, хотя все пишут и ничего. Вот решение, пожалуйста, не пишите, заодно и можете использовать пути относительные от корня проекта.

А то как в сказке, и рыбку съесть и... ну вы поняли)

Почему не решает? Как раз решает. Человек не хочет писать dotslash, хотя все пишут и ничего. Вот решение, пожалуйста, не пишите, заодно и можете использовать пути относительные от корня проекта.

нет, он не хочешь писать /ComponentFolder/ComponentName, когда папка и компонент называются одинаково

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

нет, он не хочешь писать /ComponentFolder/ComponentName, когда папка и компонент называются одинаково

Не понял

Не понял

https://github.com/kriasoft/react-starter-kit/blob/master/docs/react-style-guide.md#separate-folder-per-ui-component

Ну и не /component/name, а component/name

Аааа, так там же вон и package.json прописан. В нем тогда main пиши и все. Или тоже не хочет?

https://github.com/kriasoft/react-starter-kit/pull/197

Аааа, так там же вон и package.json прописан. В нем тогда main пиши и все. Или тоже не хочет?

я не хочу тоже :)

Ну логично, можно было бы index.js класть в папку и это решило бы проблему с "нехочупэкаджджэйсон"

так всё и сказали уже )

Т.е. solved?

можно и в принципе плагин для вебпака написать, что бы он пытался получить файл, с названием папки )

ну как сказать solved, вопрос предпочтений же

по моему вполне реально написать )

Т.е. solved?

не хочу ни index.js(x), ни package.json, потому что лишние файлы. но уже решил, что буду package.json использовать. раз уж у меня целая папка с компонентом и ресурсами, то можно и такую роскошь позволить

можно и в принципе плагин для вебпака написать, что бы он пытался получить файл, с названием папки )

я сначала и подумал, что там дали плагин, но нет (

не хочу ни index.js(x), ни package.json, потому что лишние файлы. но уже решил, что буду package.json использовать. раз уж у меня целая папка с компонентом и ресурсами, то можно и такую роскошь позволить

лучше уж package.json, чем подобный плагин

а такой резолв через package.json — это чья вообще ответственность? где описано? если это просто вебпак так умеет — отстой. если нода — уже лучше

это CommonJS packages 1.1

Собственно вот спека

http://wiki.commonjs.org/wiki/Packages/1.1

не хочу ни index.js(x), ни package.json, потому что лишние файлы. но уже решил, что буду package.json использовать. раз уж у меня целая папка с компонентом и ресурсами, то можно и такую роскошь позволить

Ну вопрос чисто эстетический получается. Ведь к структуре компонентов вопрос нет? Или есть?

Ну вопрос чисто эстетический получается. Ведь к структуре компонентов вопрос нет? Или есть?

про структуру и нет вопроса)

А если не секрет, как бы ты сам устроил загрузку компонента, если без package.json и без index.js(x)?

как выше и писали, плагин вебпака, который ищет component.js, component.jsx, component/index.jsx, component/component.jsx

сейчас и так много вариантов перебирается, это был бы еще +1. но вариант с package.json и правда идеологически правильнее

Во во

У инлайн стилей в реакте есть какие-то особенности? Обновляю стейте компонента {this.state.scroll} - обновляется нормально style={{transform: translateY(${-this.state.scroll})}} - остается изначальным

С другими свойствами вроде работало нормально

Сорян, px забыл :(

Пасаны, что-то я щас с ума совсем сойду: чому валиться может?

ERROR: S client not available

babel-preset-stage-1

thx ?

o_O

Мы уже обсуждали, но суть такая - для методов лучше использовать не arrow funcs, а прямые функции: class MyComponent { handleSelectClick() { this.setState({ isSelected: true }) } render() { const { isSelected } = this.state return ( <div> {isSelected && ( <b>Already selected</b> )} <button onClick={() => this.handleSelectClick()}> {isSelected ? 'Select again' : 'Select'} </button> </div> ) } }

Понял, спасибо

infernojs уже кто-то пробовал?

фух, с npm-shrinkwrap одни только проблемы

)

Мы уже обсуждали, но суть такая - для методов лучше использовать не arrow funcs, а прямые функции: class MyComponent { handleSelectClick() { this.setState({ isSelected: true }) } render() { const { isSelected } = this.state return ( <div> {isSelected && ( <b>Already selected</b> )} <button onClick={() => this.handleSelectClick()}> {isSelected ? 'Select again' : 'Select'} </button> </div> ) } }

так обсуждали же, и биндинг в конструкторе самый норм?

Норм, но не для быстрого прототипирования. Основной аргумент был в том, что каждый раз не создается функция в отчими от arrow func, но он исчезает если заглянуть в профайлер;)

Я помню аргументов против arrow func было отсутствие stacktrace, что оказалось впоследствие ошибкой и многие

это подтвердили

Мы уже обсуждали, но суть такая - для методов лучше использовать не arrow funcs, а прямые функции: class MyComponent { handleSelectClick() { this.setState({ isSelected: true }) } render() { const { isSelected } = this.state return ( <div> {isSelected && ( <b>Already selected</b> )} <button onClick={() => this.handleSelectClick()}> {isSelected ? 'Select again' : 'Select'} </button> </div> ) } }

Этот метод уж точно не лучше арров функций, так как создается при каждом рендере новая функция

профайлер какой? обычный devtools? react?

DT

потом ещё при диффе указатель на функцию не совпадает

Да?

Вот кстати интересный поинт, надо проверить

ну так она каждый раз новая создаётся

Конечно, реактовский perfs ругается на это и по этому появилось правило no bind, который запрещает и такой вид

По этому самый правильный это биндить в конструкторе

ну так она каждый раз новая создаётся

Но ты же все равно shouldComponentUpdate используешь ;)

По этому самый правильный это биндить в конструкторе

Это очень зависит от приоритетов.

В случае с arrow func быстрее прототипировать

С arrow func выйдет даже быстрее печатать, чем каждый раз снова создавать функцию, ну, а плюсы и минусы уже в прошлом обсудили)

Но ты же все равно shouldComponentUpdate используешь ;)

но когда sCU возвращает false, приходится биндить новые эвент хандлеры )

Конечно, реактовский perfs ругается на это и по этому появилось правило no bind, который запрещает и такой вид

А есть ссылка под рукой на правило в ESLint?

А есть ссылка под рукой на правило в ESLint?

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

я вообще против всех этих микрооптимизаций в большинстве проектов) Ничего не будет тормозить если не писать совсем уж говнокод

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

но когда sCU возвращает false, приходится биндить новые эвент хандлеры )

Короче, нужен самооптимизирующийся код!?