но там ошибки сыплются

Сама идея smart компонентов ставит нас в рамки маштабирования приложения, лично мне кажется что самый правильный вариант - считать компоненты функциями, ты им что-то дал, они тебе что-то вернули. А вот откуда ты это что-то взял redux, mobx, rx(...) им не важно

вот только, ты сейчас описал типичный обьект с методами

кстати, по поводу валидаций - что для схем используете в работе?

https://ant.design/components/form/

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

искусственный интеллект

на реакте

искусственный интеллект

Ну чего ты грузишь человека, пусть начнёт простого с главной страницы фефсбука

С башорга бы начать, и то хорошо

Стейт компонента есть, POST серверу есть, input'ы, search, короче забав на первое время точно хватит)

Считаю это разделение одной из худших идей абрамова, это просто не работает

https://twitter.com/dan_abramov/status/802569801906475008 он и сам не настаивает на его использовании

Норм ?

Считаю это разделение одной из худших идей абрамова, это просто не работает

Как раз работает

Только в идее: библиотека компонентов и скрины

я сегодня бандл ужал с 1.5мб до 50кб с помощью него

сюрреализм какой-то)

в хэллоу ворлд нг2 был подключен, но не юзался?

в хэллоу ворлд нг2 был подключен, но не юзался?

Так бандл 1,5 Мб, а не 15))

это потому что в нг2 прекомпайл завезли

?

*Мопед не мой

не, ну это не вес англура, это явно девелопмент бандл с свистелками вебпака

vendor.js 6.7

Ребят, а PureComponent сравнивает только old и new props? Если они не одинаковые - ререндер?

Ребят, а PureComponent сравнивает только old и new props? Если они не одинаковые - ререндер?

ещё state

Не пойму тогда его преимущество перед обычным компонентом

Pure все ещё не deprecated?

Pure все ещё не deprecated?

а почему бы?

Pure все ещё не deprecated?

В доке ничего об этом нету

Не пойму тогда его преимущество перед обычным компонентом

преимущество не писать sCU

В доке ничего об этом нету

PureRenderMixin депрекейтили

преимущество не писать sCU

Но обычный компонент тоже ж можно писать без scu

Или тогда он всегда будет ререндериться?

При любом изменении state/props

)

для чего по-твоему sCU нужен?

Чтобы дать понять компоненту, когда ему обновить себя)

Поправь, если не так

Да и потом реакт сравнивает сам элементы дома?

https://www.youtube.com/watch?v=f-ctxG2qEps

Чтобы дать понять компоненту, когда ему обновить себя)

скорее наоборот если ты вызовешь this.setState({}) (не предоставляя ничего нового), реакт будет заново рендерить этот компонент. Он сравнит, что было отрендерено до этого, что будет отрендерено теперь, решит, что можно сам DOM не обновлять, все довольны. Самая дорогая операция — обновление DOM'а — предотвращена. Но эти сравнения – тоже вычисления. На порядок менее затратные, чем обновление DOM'а, но всё же вычисления, и их кол-во напрямую зависит от того, насколько глубоко идёт дерево данного компонента. Если же sCU вернёт false, реакт вообще ничего не будет сравнивать и рендерить. Это всё в общем-то в документации хорошо рассказано.

скорее наоборот если ты вызовешь this.setState({}) (не предоставляя ничего нового), реакт будет заново рендерить этот компонент. Он сравнит, что было отрендерено до этого, что будет отрендерено теперь, решит, что можно сам DOM не обновлять, все довольны. Самая дорогая операция — обновление DOM'а — предотвращена. Но эти сравнения – тоже вычисления. На порядок менее затратные, чем обновление DOM'а, но всё же вычисления, и их кол-во напрямую зависит от того, насколько глубоко идёт дерево данного компонента. Если же sCU вернёт false, реакт вообще ничего не будет сравнивать и рендерить. Это всё в общем-то в документации хорошо рассказано.

Да, цепочка scu->domEq->rerender понятна. Но не понятно, для чего нужено этот pureComponent)

pureComponent тип сам сравнивает в scu пропсы старые/новые и стейт, что не делает обычный компонент?

верно

сам реакт не сравнивает

а PureComponent сравнивает их поверхностно (хех, а какой у нас нормальный перевод для shallow comparison есть? :))

А сравнение глубокое?

Вот не пойму "shallow"

Вот не пойму "shallow"

а "глубокое" понимаешь?)

Да :)

sCU is what?

sCU is what?

shouldComponentUpdate

Ах точно

Спасибо

Да :)

ну вот shallow — неглубокое)

а "глубокое" понимаешь?)

Если я передам в пропсы вложенные объекты, pureComponent обойдет их всех в своих сравнениях или нет?

И интересно, часто ли юзают pureComponent? Опыт в реакте небольшой, но ниразу не видел этот тип компонента "в деле"

Если я передам в пропсы вложенные объекты, pureComponent обойдет их всех в своих сравнениях или нет?

shallow — оно просто ссылки чекает, причём не рекурсивно. let foo = { a: 1 }; let bar = { foo: foo }; bar.foo.a = 2; foo всё тот же, так что ничего у тебя апдейтиться не будет.

shallow — оно просто ссылки чекает, причём не рекурсивно. let foo = { a: 1 }; let bar = { foo: foo }; bar.foo.a = 2; foo всё тот же, так что ничего у тебя апдейтиться не будет.

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

Поэтому иммутабельные структуры пользовать проще.

Если я передам в пропсы вложенные объекты, pureComponent обойдет их всех в своих сравнениях или нет?

да проще самому в код посмотреть https://github.com/facebook/react/blob/v15.0.0/docs/js/react.js#L18663-L18688

да проще самому в код посмотреть https://github.com/facebook/react/blob/v15.0.0/docs/js/react.js#L18663-L18688

Посмотрю, спасибо

ребятки, у кого есть пол часа времени чтобы скачать мой репозиторий с гитхаба и посмотреть где ошибка? я за реакт села неделю назад и делаю все по вот этому тьюториалу https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/#configuring-testing в каком точно блоке ошибка знаю (точка, где пошло что-то не так), а что - еще не разобралась. Помогите, пожалуйста)

ребятки, у кого есть пол часа времени чтобы скачать мой репозиторий с гитхаба и посмотреть где ошибка? я за реакт села неделю назад и делаю все по вот этому тьюториалу https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/#configuring-testing в каком точно блоке ошибка знаю (точка, где пошло что-то не так), а что - еще не разобралась. Помогите, пожалуйста)

эм. а гугление ошибки не помогает?

ERROR: S client not available

ссылка на репозиторий, ветка develop https://github.com/Ekaterina-Kaschenko/React_yelp

у ошибки ещё есть номер строки и символа

эм. а гугление ошибки не помогает?

нет(

оттуда можно начать копать

ребятки, у кого есть пол часа времени чтобы скачать мой репозиторий с гитхаба и посмотреть где ошибка? я за реакт села неделю назад и делаю все по вот этому тьюториалу https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/#configuring-testing в каком точно блоке ошибка знаю (точка, где пошло что-то не так), а что - еще не разобралась. Помогите, пожалуйста)

touch .env

APP_NAME=yelp ROOT_URL='https://api.yelp.com' GAPI_KEY='AIzaSyAyesbQMyKVVbBgKVi2g6VX7mop2z96jBo'

содержимое

там проблемма не совсем в ошибке, а то, что отображается не совсем то, что ожидаю

там проблемма не совсем в ошибке, а то, что отображается не совсем то, что ожидаю

т.е. у тебя нет этой ошибки https://asciinema.org/a/8042kvdy3i9m8coyrum1jdxdn ?

довольно давно тянется этот ворнинг, но я так понимаю, это норм) не ошибка же

у меня же файл есть .env где переменные хранятся

ее нет

вот структура и нужный файл

выше скинула содержимое

В нативный дом элемент передаешь пропсы, которых не существует в хтмле?

как тема называется?

знает кто-нибудь, почему все HTML-элементы получают бОльшие размеры, чем я им задаю в пикселях? Задам, к примеру, ширину блоку div 1000px, а он не вмещается в экран, хотя у меня разрешение 1920px, при этом зум не включен, проверял во всех браузерах. Ясное дело, что тут где то включено автоматическое скалирование, ибо у меня ноутбук, а с таким разрешением, все сайты были бы слишком "мелкими". Как отключить скалирование?

Вопрос не связан непосредственно с React

может граница задана?

напиши box-sizing: border-box

как тема называется?

Это не тема, это файл с переменными) вопрос уже не актуален)

Тема редактора

аа

Это же саблайм

знает кто-нибудь, почему все HTML-элементы получают бОльшие размеры, чем я им задаю в пикселях? Задам, к примеру, ширину блоку div 1000px, а он не вмещается в экран, хотя у меня разрешение 1920px, при этом зум не включен, проверял во всех браузерах. Ясное дело, что тут где то включено автоматическое скалирование, ибо у меня ноутбук, а с таким разрешением, все сайты были бы слишком "мелкими". Как отключить скалирование?

мета-теги в head

не

атом