ребят, подскажите хороший бойлерплейт реакт + вебпак + реакт роутер

kriasoft?

ребят, подскажите хороший бойлерплейт реакт + вебпак + реакт роутер

https://github.com/reactjs/react-router-redux#examples из этого ничего не подошло в качестве основы?

https://github.com/reactjs/react-router-redux#examples из этого ничего не подошло в качестве основы?

смотрю, спс

Кто знает пакет который может подрубиться к страничке и ждать смены хеша и вызравать событие аля: hashchange("#show-alert", () => { alert('f'); })

надо чтобы он не лобал другие обработчики и как дополнение работал?

kriasoft?

там чет хот релоад не работает..

Сижу пол дня с проблемой. Была сборка установленная и рабочая. Копирую в соседнюю папку, выполняю npm install и получаю ошибку: Warning: Failed context type: The context `router is marked as required in Link, but its value is undefined.`

Кто-то забыл крышечки удалить :)

юзай yarn с авто shrinkwrap, уберай крышечки или shrinkwrap в npm

Кстати, реактаны, а как сйечас yarn? Сложно ли переходить с npm?

И главное - есть ли смысл?

смысла нет

Доброго дня всем. Есть ли здесь имеющие опыт на продакшкне и с Реактом и с Вью? Какой из них хорош для написания больших проектов со знанием только базовую Js(не знакомымс Ангуляр)

юзай yarn с авто shrinkwrap, уберай крышечки или shrinkwrap в npm

что такое "крышечки"?

^

лул https://github.com/marko-js/marko

Здравствуйте. Только начала учить React. И так получилось, что попала к ребятам на половину созданный и просраный по дате сдачи проект. Нужно вывести данные из апишки в HTML-таблицу(таблица из одного столбца). Как это сделать? Пробовала так: class Admin extends Component { constructor() { super(); this.fetchDistricts = this.fetchDistricts.bind(this); this.state = { data: [] } } fetchDistricts() { let url = "http://192.168.1.155/district"; $.ajax({ type: "GET", url: url, dataType: 'json', success: data => this.setState({data}) }) } renderDistrict(item) { return <td>{item.name}</td> } render(){ const {data} = this.state; const districts = data.map(item => this.renderDistrict(item)); return ( <form className="form-admin"> <div className="admin_options col-md-3"> <input type="text"/> <input type="button" value="Поиск"/> <hr/> <div className="admin_area"> <p>Район</p> <div> <input type="checkbox"/>Кировский </div> <div> <input type="checkbox"/>Советский </div> <div> <input type="checkbox"/>Октябрьский </div> </div> <div className="admin_tags"> <p>Теги</p> <div><input type="checkbox"/>Раздевалка</div> <div><input type="checkbox"/>Уборная</div> <div><input type="checkbox"/>Душ</div> <div><input type="checkbox"/>Буфет</div> <div><input type="checkbox"/>Особый</div> </div> <button>Применить</button> <button>Сбросить</button> </div> <div className="col-md-8"> <ul className="nav nav-tabs"> <li className="active"><a href="#tab1" data-toggle="tab">Футбольное поле</a></li> <li><a href="#tab2" data-toggle="tab">Районы</a></li> <li><a href="#tab3" data-toggle="tab">Теги</a></li> <div className="admin_operation"> <Link name="add_field" to='articles/new' className="admin_add">Добавить</Link> </div> </ul> <div className="tab-content"> <div className="tab-pane active" id="tab1"> <table> <tr> <th>Тип оплаты</th> <th>Время работы</th> <th>Адрес</th> <th>Телефон</th> <th>Тип поля</th> </tr> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> <div className="tab-pane" id="tab2"> <table id="district" className="adress"> <thead> <tr> <th>Район</th> </tr> </thead> <tbody> <tr> <td>{districts}</td>

</tr> </tbody> </table> </div> <div className="tab-pane" id="tab3"> <table> <tr> <th>Тег</th> <th>Адрес поля</th> </tr> <tbody> <tr> <td></td> <td></td> </tr> </tbody> </table> </div> </div> </div> </form> ); } } Но страницу теперь не отображает вообще. В чем может быть проблема?

ой

ой

ой

to Марина, у тебя fetchDistricts нигде не вызывается

Какую ошибку пишет? Если эту бадягу const districts = data.map(item => this.renderDistrict(item)); удалить - страница отрендерится? (без нужных данных, конечно)

в componentDidMount вызвать fetchDistrict

Я так понимаю, что проблема не в отсутствие данных, а в "Но страницу теперь не отображает вообще" - то есть просто ошибка

короче, без копирования в чатик ошибки не разобраться :)

https://www.youtube.com/watch?v=vgDrh81drEc

ребят, подскажите плз, componentWill(Did)Update родителя не срабатывают, если в дочернем компоненте нет никакого стейта, хотя дочерний компонент меняется. Мы написали фейковый стейт в дочернем и в нем при componentDidMount меняем его с false на true. И теперь все срабатывает. Как сделать это правильно?

componentWillUpdate срабатывает в следующих случаях — 1. если изменился state (правильнее сказать вызван setState) 2. если родитель вызвал рендер данного компонента 3. если сам компонент или родитель вызвал forceUpdate 3. и если shouldComponentUpdate не вернул false в этих случаях

componentDidUpdate срабатывает всегда, если сработал willUpdate и ничего не упало

если что забыл, добавьте :)

componentWillUpdate срабатывает в следующих случаях — 1. если изменился state (правильнее сказать вызван setState) 2. если родитель вызвал рендер данного компонента 3. если сам компонент или родитель вызвал forceUpdate 3. и если shouldComponentUpdate не вернул false в этих случаях

спасибо, значит в нашем случае быстрый фикс будет просто вызвать forceUpdate()?

спасибо, значит в нашем случае быстрый фикс будет просто вызвать forceUpdate()?

э, в общем да, но я это всё написал к тому, что дочерний компонент не имеет никакого отношения к тому, будут ли вызваны эти методы у данного компонента

э, в общем да, но я это всё написал к тому, что дочерний компонент не имеет никакого отношения к тому, будут ли вызваны эти методы у данного компонента

понял, пасиб =)

А что ты меняешь у родителя?

Если ничего, то логично, что оно не срабатывает

А что ты меняешь у родителя?

там меняется пару стейтов..

А если использовать реакт роутер в4, то в зависимостях нужно иметь только react-router-dom или еще react-router

Дом декларативно, просто роутер - императивно

Если чисто дом

То второе не нужно

Если хотите на клик по кастомному компоненту изменить роут

То нужно явно добавить роутер в зависимости

https://www.youtube.com/watch?v=vgDrh81drEc

Захожу в реакт чатик и вижу это. wat

Видать эвуалированный тутор по реакту

Или модер проглядел

ребята, работает кто react + BEM?

ребята, работает кто react + BEM?

яндексоиды

это я понимаю, но из Вас кто-нибудь

просто хочу узнать, каким образом

ментора, увы, нет, который бы подсказал

все самостоятельно

ребята, работает кто react + BEM?

Мы работаем, каждый компонент - блок, все элементы внутри - элементы :)

а наименование? Блоки-элементы-модификаторы-миксы?

вручную?

Запрещаем передавать классы для кастомизации в пропсы, чтобы извне классами переписывать стили

что можно сказать про reBEM?

ben-cn юзаем, нам норм :)

https://github.com/rebem/rebem

ой

не то

Есть неудобства правда, но пока не существенные

https://github.com/rebem/rebem-jsx

например?

т.е. для каждого элемента свои стили, к примеру, less модуль

?

ERROR: S client not available

там когда модификатор хочешь через тернарник поставить, b('item)() + condition ? b('item)('modificator')() : ''

вот примерно такую тему в класс пишешь

по сути обычный подход, действует как при вёрстке на шаблонизаторе?

аа

спасибо

b('item)('modificator')() — тут сразу еще и класс самого эолемента добавляется

получается в иотге block__elem block__elem block__elem_mod

вообще, удобный такой подход на реакте?

то есть два раза класс повторяется для самого элемнета :)

пока не решили еще, надо поисследовать решения

но от css modules мы решили уйти

почему?

БЭМ почти полностью позволяет уйти от проблемы множ неймспейсов на небольших и средних проектах, а супер крупных у нас нет пока

БЭМ почти полностью позволяет уйти от проблемы множ неймспейсов на небольших и средних проектах, а супер крупных у нас нет пока

Очевидно поэтому

вообще смысл понятен, спасибо

правда и редьюсеры, и акшены, и компонентная разбивка такая, мешанина такая будет при большом проекте

Странный подход

Как бы, нет множественных неймспейсов - нет проблемы

Я вообще о них не думаю, их просто нет

правда и редьюсеры, и акшены, и компонентная разбивка такая, мешанина такая будет при большом проекте

да, мешанина будет, надо сначала хороший опыт получить, чтобы архитектуру грамотную выстроить :)

БЭМ - это скорее уже религиозное, реально разумных причин тут нет. Я понимаю легаси или "нам так нравится", если всё устраивает, то хорошо, но добровольно в это сейчас ввязываться - это мягко говоря опрометчиво

+

БЭМ - это скорее уже религиозное, реально разумных причин тут нет. Я понимаю легаси или "нам так нравится", если всё устраивает, то хорошо, но добровольно в это сейчас ввязываться - это мягко говоря опрометчиво

Дело даже не в самом BEM. Они просто хотят каскадом из родителя менять цвет далекой кнопки в чилдрене. После css modules это вспоминается как страшный сон

Дело даже не в самом BEM. Они просто хотят каскадом из родителя менять цвет далекой кнопки в чилдрене. После css modules это вспоминается как страшный сон

можно писать нормальный код даже без css-modules оперируя сборными классами на примере кнопки: (btn large green rounded) etc.

можно писать нормальный код даже без css-modules оперируя сборными классами на примере кнопки: (btn large green rounded) etc.

Это называется функциональный css и он довольно быстро доходит до своих пределов

можно писать нормальный код даже без css-modules оперируя сборными классами на примере кнопки: (btn large green rounded) etc.

Стайлтрон

Ну я так понимаю он просто про олдовый подход с кучей классов в каждом компоненте

Это называется функциональный css и он довольно быстро доходит до своих пределов

не согласен, с препроцессорами, я делаю что-то типо псевдо компонентов, выходит вполне структурированный код.

Типа такого извращения? https://acss.io/ утрирую, если что :D

Пока выходит

Есть два варианта когда это жизнеспособно -- у тебя не реальные классы, а просто миксины, без вывода всего этого непотребства в сам class= Тогда это нормально Либо у тебя небольшие проекты)