Телеграмм чат группы react

Тимофей 🛴 in React — русскоговорящее сообщество

13:52пожаловаться #1

Т

Andrey

Указал id для body его будет использовать ReactDOM.render для вставки содержимого
Но если вставляю туда компоненты без родительского элемента, получаю ошибку, что для JSX нужен обязательно родительский элемент.
Не пойму как сделать такую структуру, чтобы не было лишних div
<body>
. . <header></header>
. . <main></main>
. . <footer></footer>
</body>

Fragment почитай в доке

Andriy Dudariev in React — русскоговорящее сообщество

13:52пожаловаться #2

AD

точнее масштабирование и размерные линии

масштабирование при помощи d3-zoom

HTML/CSS — русскоговорящее сообщество

13:53пожаловаться #3

GO

Green Orange in React — русскоговорящее сообщество

Andrew Revinsky

И еще вопрос в программирующую вселенную: какой библиотекой воспользоваться, чтобы без влезания в css, флексы и гриды, получить панельно-плашечный интерфейс без прокрутки, aka винда 8 (забыл, как это уродство официально называлось). Мне нужно, чтобы это было веб-приложение, шириной и высотой с вьюпорт, независимо от десктоп/мобилок, чтобы кнопки с иконками, автоувеличение кнопок.. Типа, как если бы для смарт Тв что-то сделать. Подскажете - ?

https://t.me/css_ru

Возникли проблемы с HTML или CSS? – пиши сюда, обсудим и предложим самое лучшее решение.
@javascript_ru
@js_noobs_ru
@frontend_ru
@css_ru_jobs
Каналы:
@defront
@frontendnoteschannel
@htmlshit

ВАЖНО: http://nometa.xyz

Andriy Dudariev in React — русскоговорящее сообщество

13:53пожаловаться #4

AD

точнее масштабирование и размерные линии

сохраняешь в стейт текущую размерность, и в зависимости от нее показывешь текущие цифры

Andrew Revinsky in React — русскоговорящее сообщество

13:54пожаловаться #5

AR

Green Orange

https://t.me/css_ru

HTML/CSS — русскоговорящее сообщество

Возникли проблемы с HTML или CSS? – пиши сюда, обсудим и предложим самое лучшее решение.
@javascript_ru
@js_noobs_ru
@frontend_ru
@css_ru_jobs
Каналы:
@defront
@frontendnoteschannel
@htmlshit

ВАЖНО: http://nometa.xyz

Я спрашивал про возможно уже написанную библиотеку для подобных нужд.

13:54пожаловаться #6

GO

Green Orange in React — русскоговорящее сообщество

Andrew Revinsky

Я спрашивал про возможно уже написанную библиотеку для подобных нужд.

причем тут реакт?

Тимофей 🛴 in React — русскоговорящее сообщество

13:54пожаловаться #7

Т

Andrew Revinsky

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

http://flexboxgrid.com/

https://roylee0704.github.io/react-flexbox-grid/

roylee0704.github.io

React Flexbox Grid

React Flexbox Grid is a set of React components implementing flexboxgrid with the power of CSS Modules.

13:54пожаловаться #8

Z

масштабирование при помощи d3-zoom

хотелось бы узнать логику и как реализовано. хотел самостоятельно реализовать только на реакте

Andriy Dudariev in React — русскоговорящее сообщество

13:54пожаловаться #9

AD

хотелось бы узнать логику и как реализовано. хотел самостоятельно реализовать только на реакте

загугли. там библиотека сама возвращает правильные координаты после подписки на событие. Координаты только в css transform подставить надо

13:56пожаловаться #10

Z

масштабирование при помощи d3-zoom

подписка на scroll и менять scaling?

Andrew Revinsky in React — русскоговорящее сообщество

13:56пожаловаться #11

AR

Слушайте, да вы глухи, похоже. Простите, конечно. Но я спросил не про грид-систему, а про плашечную систему. Чтобы вьюпорт, квадратные кнопки и тп. Без пролитывания. Рил-эстейт, чтобы по вертикали тоже был отмерен.

13:56пожаловаться #12

Z

загугли. там библиотека сама возвращает правильные координаты после подписки на событие. Координаты только в css transform подставить надо

а как там сетка уменьшается как бы "в себя" при уменьшении и увеличивается.

Andriy Dudariev in React — русскоговорящее сообщество

13:57пожаловаться #13

AD

а как там сетка уменьшается как бы "в себя" при уменьшении и увеличивается.

да.
https://reactflow.dev/examples/ - вот пример того, как масштабирование работает

reactflow.dev

React Flow - Overview Example

13:57пожаловаться #14

Z

да.
https://reactflow.dev/examples/ - вот пример того, как масштабирование работает

reactflow.dev

React Flow - Overview Example

спасибо

Andrey in React — русскоговорящее сообщество

13:58пожаловаться #15

A

Тимофей 🛴

Fragment почитай в доке

👍

14:01пожаловаться #16

SM

Soltukiev Malik in React — русскоговорящее сообщество

Перешел с компонентов на useFormik, и зачем я спрашивается страдал до сих пор с этими компонентами.

Almaz Kham in React — русскоговорящее сообщество

14:02пожаловаться #17

AK

всем привет. существует компонент (код на картинке), который состоит из 2 основных компонент - InvoiceForm и InvoiceTable. Нужно создать такой же, только без InvoiceForm. Копировать все заново не хочется, несмотря на то что это очень просто. Есть ли решение с HOC? И если да то каким образом?

Viktor Stepanov in React — русскоговорящее сообщество

14:10пожаловаться #18

VS

Almaz Kham

всем привет. существует компонент (код на картинке), который состоит из 2 основных компонент - InvoiceForm и InvoiceTable. Нужно создать такой же, только без InvoiceForm. Копировать все заново не хочется, несмотря на то что это очень просто. Есть ли решение с HOC? И если да то каким образом?

https://reactpatterns.com/#container-component

Reactpatterns

React Patterns

React patterns from beginners to advanced developers. Simple examples, short descriptions, and quality advice.

Andriy Dudariev in React — русскоговорящее сообщество

14:11пожаловаться #19

AD

Almaz Kham

всем привет. существует компонент (код на картинке), который состоит из 2 основных компонент - InvoiceForm и InvoiceTable. Нужно создать такой же, только без InvoiceForm. Копировать все заново не хочется, несмотря на то что это очень просто. Есть ли решение с HOC? И если да то каким образом?

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