Выбирать цсс ин жыес не с рантаймом 🙃
тут смысл в том что этим "perfomance shit" зачастую разумно принебречь - в пользу удобства декларации, единого источника описания, более лаконичной организации исходников - ну и само собой именно рантаймовая рефлексия стилей исходя з контекста JS - это самый главный приоритет
Ilya
Ilya
Я про css in js ничего не говорил
да как-т я не удачно слинковался - там выше началось все с "Есть проект на стайледах..."
Sherzod
Среди ваc, найдется ли люди которые ненавидят Джс?
Bogdan
чем ReactNode отличен от Node. от ComponentType, от JSX.Element. от React.FC, и подобных типов?
Shatalov
Bogdan
чем ReactNode отличен от Node. от ComponentType, от JSX.Element. от React.FC, и подобных типов?
от StytelessFunctionalComponent
Yury
Shatalov
не понял...??
Ilya
чем ReactNode отличен от Node. от ComponentType, от JSX.Element. от React.FC, и подобных типов?
Это разные типы с разным источником происхождения :)
Есть кейсы где все эти типы задействуются так или иначе.
Такой зоопарк родился еще до inference, сейчас с этим попроще.
Bogdan
Это разные типы с разным источником происхождения :)
Есть кейсы где все эти типы задействуются так или иначе.
Такой зоопарк родился еще до inference, сейчас с этим попроще.
нет, какой то из них опишет результут вызова ф-и createElement, какой то опишет именно функу, не могу найти к чему какой нужен
Ilya
нет, какой то из них опишет результут вызова ф-и createElement, какой то опишет именно функу, не могу найти к чему какой нужен
ReactNode - это то что может быть среднерено (т.е. валидные для рендера данные)
JSX.Element это результат рендера в частности с использование JSX если идет его присвоение
ComponentType это декларация именно компонента и т.д.
Ilya
ReactNode - это то что может быть среднерено (т.е. валидные для рендера данные)
JSX.Element это результат рендера в частности с использование JSX если идет его присвоение
ComponentType это декларация именно компонента и т.д.
PS : просмотрите сами эти типы, мне кажется там не очень сложно соориентироваться... ну т.е. пройдите в IDE навигацией "внутрь".
Bogdan
PS : просмотрите сами эти типы, мне кажется там не очень сложно соориентироваться... ну т.е. пройдите в IDE навигацией "внутрь".
https://reactjs.org/docs/glossary.html
вот тут, не знал, как толком различить компонент/елемент, jsx
Alexey
git clone https://github.com/Juriy/pro-react-redux/tree/master/star-db/70-passing-function-as-data-sources
почему я не могу скопировать данный репозиторий?
Ilya
https://reactjs.org/docs/glossary.html
вот тут, не знал, как толком различить компонент/елемент, jsx
оф. документация об этом вам не расскажет так как TS для React это стыковая технология, тут смотреть официально поставляемые типы, они очень не дурно написаны - понятные именования, не особо мозгодробительные дженерики и т.д.
выше @kurzdor уже давал ссылку на https://github.com/typescript-cheatsheets/react-typescript-cheatsheet
это поможет разобраться...
Igor
не то отправляю??
Вы отправляете строку, которая является путем, а нужно отправлять сам файл (у input с типом file есть свойство files, в котором лежит массив выгруженных файлов)
Kurzdor
Но скажу, писать на Тайпскрипте по началу больно, ибо сборка ругается
Artyom
Но скажу, писать на Тайпскрипте по началу больно, ибо сборка ругается
Т.е. ругается сборка? В react-create-app всё предустановлено без warning’ов
Китикет
https://reactjs.org/docs/glossary.html
вот тут, не знал, как толком различить компонент/елемент, jsx
Все просто, нода - это любая штука, которая может быть отрендерена, включая строки, числа и подобные базовые типы, компонент - класс/функция, тем или иным образом рендерющая ноду, элемент - нода, но не включая базовые типы, то есть созданная с помощью jsx
Ilya
Но скажу, писать на Тайпскрипте по началу больно, ибо сборка ругается
ну можно поколдовать с кофигурациями tslint и самого ts - таким образом чтобы снизить требовательность - на "переходном" этапе (когда переписывают на TS) это может пригодиться - ну если только нет конечно явных проблем которые просто не дают TS скомпилироваться.
PS: Иногда когда никаr не удается порешать с типами в сложной части кода, опять таки на переходном этапе, можно просто из ts|tsx ренеймнуть в js|jsx, если код таки валидный... но это только под ToDo чтобы апосля разобраться.
Если что, я вам этого не говорил :) это костыляузы.
Но иногда так можно сделать потому что, чтобы типизировать слождный кусок кода с кучей зависимостей просто невозможно, так как поступательно надо написать 100500 типов для всего что "трогается" а прямо сейчас это overkill
Bogdan
Все просто, нода - это любая штука, которая может быть отрендерена, включая строки, числа и подобные базовые типы, компонент - класс/функция, тем или иным образом рендерющая ноду, элемент - нода, но не включая базовые типы, то есть созданная с помощью jsx
так как таковых елементов нету, потому что компонент сразу попадет в createElement, в нем же нету роазделения неа елементы, тупо обьект, который вернет уже саму ноду, елемент что ли чисто визуально только в jsx увидеть только?
Bogdan
компонент => вернет jsx => вызов createElement => вернет ноду, я же так понял или что то еще тут
Китикет
так как таковых елементов нету, потому что компонент сразу попадет в createElement, в нем же нету роазделения неа елементы, тупо обьект, который вернет уже саму ноду, елемент что ли чисто визуально только в jsx увидеть только?
createElement нельзя вызвать с базовыми типами, это в доке сказано, поэтому он всегда возвращает элемент
Китикет
И то что на выходе, это значение не имеет, разделение важно только для исходного кода
Bogdan
createElement нельзя вызвать с базовыми типами, это в доке сказано, поэтому он всегда возвращает элемент
ну цепочка событий то так выглядит?
Dmitry
компонент => вернет jsx => вызов createElement => вернет ноду, я же так понял или что то еще тут
declare type React$Node =
| null
| boolean
| number
| string
| React$Element<any>
| React$Portal
| Iterable<?React$Node>;
все что нужно знать
в целом все так
jsx -> createElement(): React$Element
сам компонент это просто функция возвращающая React$Node
Bogdan
что за питарские типы через долар, это во флоу так или что жто
Китикет
Упустил где, не добавил где? Я вообще не понимаю о чем ты, у тебя изначально вопрос был про то зачем все эти типы
Китикет
.
jsx это уже элемент, а значит и нода) createElement тоже вернет элемент, это тоже нода. А вот строка "hello" это не элемент, но валидная нода которая может быть зарендерена, и null тоже
i
i
извиняюсь если криво сформулировал вопрос, просто реально не понимаю как диспатч ловит ф-цию, если она передаётся не как объект а как исполняемое выражение, то бишь диспатч то должен лровит уже результат исполения ф-ции
Алексей
Китикет
i
просто к слову
i
о, как, есть какая-нить статься для чаййников по этому вопросу?
Китикет
А получает он экшн как раз, это равноценно коду
const action = echoEventsProfile(channelPublic)
dispatch(action)
444
всем привет! какая либа для графиков под реакт самая горячая?
Stripe
Привет всем у меня есть список такой
export const menuList = [
{
componentName: 'MenuItemLink',
to: '/courses',
primaryText: 'course.name',
leftIcon: <FeaturedPlayListIcon/>
}
]Как мне потом обойти все елементы и создать компонент <MenuItemLink> из строки?
Stripe
const listItems = menuList.map((item) => {
const ComponentName = item.componentName;
return <ComponentName />;
}
);
ТАк не работает, так как должна быть функция а не строка...
Тимофей 🛴
Stripe
Подскажи пожалуйста, как?
Maxim
Kurzdor
Подскажи пожалуйста, как?
Ну жсэкс это функция по сути, а в проперти можно записать функцию, не так ли?)
Shatalov
R
<input
type="file"
name="url"
id="url"
onChange={function(event) {
setFieldValue("url", event.currentTarget.files[0]);
}}
onBlur={handleBlur}
/>
R
let form = new FormData();
form.append("file", values.url);
Китикет
Капец блин, обновил react-scripts вылетает unhandled network error из axios, понятия не имею чо с этим делать
Китикет
А, е мое, я придурок просто
Ostia
Есть ли пакет, который будет автоматически называть мне вторую константу при объявлении хука?
Типа я пишу const [something, setSomething] = useState('');
и вот setSomething он мне сам дописывает
Если что, я все же написал сниппет для этого)
{
"key": "ctrl+alt+t",
"command": "editor.action.insertSnippet",
"when": "editorHasSelection",
"args": {
"snippet": "const [${TM_SELECTED_TEXT}, set${TM_SELECTED_TEXT/(.)/${1:/upcase}/}] = useState($1)"
}
}
Artem
Ostia
Denis 🇺🇦
Ostia
блин, не могу гифку запостить((
Кароче выделаешь текст(мультикурсор тоже пашет) и нажимаешь комбинацию клавишь
Ostia
https://files.catbox.moe/eavxli.gif
Китикет
не получаеться.Ты можешь помочь?)
Зачем тебе файл через аргумент передавать в formLoad? Из стейта бери