JSS норм или шляпа?

JSS норм или шляпа?

SC пизже

JSS норм или шляпа?

самый нормовский норм из всех нормов

SC пизже

SC +++++

а если валить через HOC - вообще огонь

меня смущает тот факт, что он под каждый компонент создает тег style внутри head

меня смущает тот факт, что он под каждый компонент создает тег style внутри head

а реакт под каждый компонент создает дом элемент, выкидывать реакт?

меня смущает тот факт, что он под каждый компонент создает тег style внутри head

не под каждый

ребят, а как можно проверять, скачался ли pdf файл или нет ?

а реакт под каждый компонент создает дом элемент, выкидывать реакт?

Даже под хоки создает?

Даже под хоки создает?

если из инспектора реакта смотреть - то да) а вообще нет

а реакт под каждый компонент создает дом элемент, выкидывать реакт?

ну опять же не под каждый ?

JSS норм или шляпа?

Styled-JSS

может я просто олдфаг из 2000-х, но это же чистейшее смешивание структуры и оформления

так, лол, а кто смешивает структуру и оформление?

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

то, для чего, собственно, изобретали CSS, в конце 2010-х сломали 19-летние тим-лиды

лол

изоляция - да вот такой пиздец - нет: const Heading = styled.h1` color: red; ` const sheet = new ServerStyleSheet() const jsx = sheet.collectStyles(<Heading>Hello SSR!</Heading>) const stream = sheet.interleaveWithNodeStream(renderToNodeStream(jsx))

эм а ты не делай так а разделяй компоненты и сбор стилей на сервере)

JSS норм или шляпа?

styled-jss норм на чистом jss писать дикая боль, аналогичная css-modules

эм а ты не делай так а разделяй компоненты и сбор стилей на сервере)

это ведь шутка про разделение, да?

это ведь шутка про разделение, да?

…и властвуй да

В formik в одной функции делаю setFieldValue() и сразу же после этого submitForm() И новое значение поля не успевает появиться в submit handler. Как победить? В чем проблема?

В formik в одной функции делаю setFieldValue() и сразу же после этого submitForm() И новое значение поля не успевает появиться в submit handler. Как победить? В чем проблема?

Видимо, setFieldValue асинхронна

https://github.com/facebook/react/issues/11527#issuecomment-360199710

Чет я так и не понял

Почему сет стейт асинкнутый

Что б можно было и родители и ребенку сделать ререндер

За один заход ?

Приветствую! Есть вопрос про простой button. Если я делаю компонент в стиле: class Button extends React.Component { render() { return ( <button className=«button_basic»> {this.props.value} </button> ) } } и хочу этой кнопке добавлять модификатор к классу, к примеру «button_basic _selected», то как правильнее будет это сделать? У тэга button вроде бы нет атрибута «selected» и подобных, то как обычно вы это делаете? Использовать планируется примерно так: <Button value=«хер» selected={true} /> // Понимаю, что можно сделать так <button selected={this.props.selected}> … </button>, и ошибки нигде не появляется, но всё же.

Приветствую! Есть вопрос про простой button. Если я делаю компонент в стиле: class Button extends React.Component { render() { return ( <button className=«button_basic»> {this.props.value} </button> ) } } и хочу этой кнопке добавлять модификатор к классу, к примеру «button_basic _selected», то как правильнее будет это сделать? У тэга button вроде бы нет атрибута «selected» и подобных, то как обычно вы это делаете? Использовать планируется примерно так: <Button value=«хер» selected={true} /> // Понимаю, что можно сделать так <button selected={this.props.selected}> … </button>, и ошибки нигде не появляется, но всё же.

пропсы + classnames

Приветствую! Есть вопрос про простой button. Если я делаю компонент в стиле: class Button extends React.Component { render() { return ( <button className=«button_basic»> {this.props.value} </button> ) } } и хочу этой кнопке добавлять модификатор к классу, к примеру «button_basic _selected», то как правильнее будет это сделать? У тэга button вроде бы нет атрибута «selected» и подобных, то как обычно вы это делаете? Использовать планируется примерно так: <Button value=«хер» selected={true} /> // Понимаю, что можно сделать так <button selected={this.props.selected}> … </button>, и ошибки нигде не появляется, но всё же.

можно без ={true} просто <Button selected />

Приветствую! Есть вопрос про простой button. Если я делаю компонент в стиле: class Button extends React.Component { render() { return ( <button className=«button_basic»> {this.props.value} </button> ) } } и хочу этой кнопке добавлять модификатор к классу, к примеру «button_basic _selected», то как правильнее будет это сделать? У тэга button вроде бы нет атрибута «selected» и подобных, то как обычно вы это делаете? Использовать планируется примерно так: <Button value=«хер» selected={true} /> // Понимаю, что можно сделать так <button selected={this.props.selected}> … </button>, и ошибки нигде не появляется, но всё же.

или по-простому: <button className={`button_basic ${this.props.selected ? 'button_basic_selected': ''}`} >

Благодарю! Попробую.

выполнение сайд-эффектов в рендере в принципе лишает многое смысла

там важный момент — этот сайд эффект должен быть idempotent

Никто не знает, есть ли какой большой опен сорс проект на реакте в связке с питоном?

И в таком случае в принципе нет разницы, делать запрос в рендере или в willReceiveProps (который и хотят скрыть)

Никто не знает, есть ли какой большой опен сорс проект на реакте в связке с питоном?

я слышал есть проекты на реакте в связке с сервером

ну я сервер и имею ввиду

джанго пилоны пирамида

что там еще

фласк какой нибудь

Никто не знает, есть ли какой большой опен сорс проект на реакте в связке с питоном?

не важно на чем там сервер

фласк какой нибудь

торнадо не забывай…

Интересно посмотреть как все сконфигурировано атм

джанго пилоны пирамида

да не важно на питоне пилится rest api или jsonapi а из реакта дергаются эти ручки

Интересно посмотреть как все сконфигурировано атм

независимо можешь спокойно гуглить отдельно api на питоне отдельно работа с апи в реакте

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

никак

> дергаются эти ручки "как узнать яндексоида в толпе"

реакт отдельно

может познал бы что новое для себя

питон отдельно

> дергаются эти ручки "как узнать яндексоида в толпе"

Ыыыы

Всем привет есть кто из Казани?

никак

ну тогда стремно как то(

ну тогда стремно как то(

лол

это самый тру подход

полное разделение бэкенда и фронтенда

ну тогда стремно как то(

Я когда-то лепил такого кадавра, которого ты хочешь. Не рекомендую.

а данные как прокидываются? Или только отдается сначало реакт потом он делает запрос за данными и рендерит их?

а данные как прокидываются? Или только отдается сначало реакт потом он делает запрос за данными и рендерит их?

Второе.

это же долго будет, равзе нет?

А вот вопросик как поприличнее сказать компоненту, что запрос на сущность выдал ошику? Если всё ок, то условно выглядит так: <ConsumerComponent entity={object | null} /> А если фейлд? <ConsumerComponent entity={object | null} failed /> <ConsumerComponent entity={object | null} error /> <ConsumerComponent entity={object | null} entityRequestStatus="failed" /> <ConsumerComponent entity={object | null} entityRequestStatus={{ success: bool, failed: bool }} />

нет

ну ладно ладно убедили

В идеале страница вообще не должна рендериться питоном. Просто nginx (например) отдает твою htmlку. В которую подключен твой бандл с реактом. А дальше происходит все остальное.

а как же серверный рендер?

А вот вопросик как поприличнее сказать компоненту, что запрос на сущность выдал ошику? Если всё ок, то условно выглядит так: <ConsumerComponent entity={object | null} /> А если фейлд? <ConsumerComponent entity={object | null} failed /> <ConsumerComponent entity={object | null} error /> <ConsumerComponent entity={object | null} entityRequestStatus="failed" /> <ConsumerComponent entity={object | null} entityRequestStatus={{ success: bool, failed: bool }} />

наверное всё из этого хрень вот с render props удобно, я бы написал <EntityContainer onError={() => {...}} onLoading={() => {...}} render={() => {...}} />

а как же серверный рендер?

вместо nginx'a ее отдает рендер сервер?

а как же серверный рендер?

Если ты имеешь в виду рендеринг питоном, то не надо. Это возможно, но получается дикое говнище.

и еще мне кажется я видел штуки где то, что когда мы инитим стор то в этот момент кладем туда данные с сервера

как они туда попадают?

наверное всё из этого хрень вот с render props удобно, я бы написал <EntityContainer onError={() => {...}} onLoading={() => {...}} render={() => {...}} />

Ты можешь в render={status =><MyComponent/> }

это все рендер сервер делает?

а как же серверный рендер?

Нода

Ты можешь в render={status =><MyComponent/> }

да я тут с HOC'ами сижу )

как они туда попадают?

на сервере при рендере вьюшки кладем их в window.__INITIAL_STATE__ например

и ее юзаем как инишиал стейт для сторы

да я тут с HOC'ами сижу )

Ну можно и через хок так же сделать

Ну можно и через хок так же сделать

можно, но перед этим надо это как-то назвать :)

на сервере при рендере вьюшки кладем их в window.__INITIAL_STATE__ например

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

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

так также, как и в мелких в чем отличие то? есть рендер сервер, который отдает реакт апп есть апи сервер, который дает клиентской части возможность взаимодействовать с беком

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

Гугли reactdom/server

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

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

Я так с некстом делаю

рендер сервер - 99.9% нода апи сервер - любой, подходящий под стек компании(пхп/питон/etc)

Там сервер тоже обращается к основному апи

А можно v8 в похапе вставить ????

как они туда попадают?

нода делает запрос к апи

А можно v8 в похапе вставить ????

Конечно, вроде такое даже есть уже. А если нет, то можно написать модуль на си для пыхи ?

А можно v8 в похапе вставить ????

там такой ад начинается