И через вебпак лоадер сбандлить

Нужно сохранить подсветку кода

import foo from 'foo'; foo.someParam // должен саджеститься в редакторе // foo.js const foo = { a: true; } modify(foo); export default foo;

Когда соберете вкбпаком джсон в джс файл

Он трансформирует его в объект

И ваша иде будет способна его саджестить

Требование все равно дичь

Задача в том что получить данные из process.env сконфигурировать на основе этих параметров объект и его положить в бандл.

new webpack.DefinePlugin({ 'process.env': { DC_SERVER: JSON.stringify(process.env.DC_SERVER), } })

А какую задачу-то решаете ?

Дмитрий

Вы о главном

Требовании забываете

Саджест иде

Чтобы прокинуть данные из process.env в бандл можно действовать вот так

А как же подсветка

))

Вот вот)) Через DefinePlugin можно но тогда не будет подсветки

Так соберите файл хоть через дефайн

Получите джс

Его импортите

Все работает

Оно должно быть и для server части тоже один импорт на всех

Только если собирать этот файл отдельно перед запуском сборки и сервера

Ну для сервер тоже собирайте

Я об этом же

У вас в любом случае билд данных пакетов будет происходить до основного билда

Иначе весь код будет выполнятся на клиенте / сервере

Как вариант, спасибо за идею

Гайз, а подскажите какой-нибудь крутой React + React Native + Git сетап и плагины для VS Code ?

Можно даже в https://t.me/ide_ru ответить

Mark , я использую LESS (тот же SASS\SCSS, только другого цвета) и тоже задействовал второй html проект для верстки. Но там только layout-верстка, т.к. переходил с самопального js-лэйаута на css-flexbox и проще было на "чистом листе" реализовать всё. А всякое оформление/шрифты/раскраска можно и на основном проекте прямо как есть фигачить. Разделение кода и верстки - оно на уровне файловой системы же. Дерево каталогов и файлов с less расширением почти 1-в-1 совпадает с деревом сорцов, т.е. проблемы тут не вижу. Хотелось бы чуть поподробнее про профит от JSS...

Mark , я использую LESS (тот же SASS\SCSS, только другого цвета) и тоже задействовал второй html проект для верстки. Но там только layout-верстка, т.к. переходил с самопального js-лэйаута на css-flexbox и проще было на "чистом листе" реализовать всё. А всякое оформление/шрифты/раскраска можно и на основном проекте прямо как есть фигачить. Разделение кода и верстки - оно на уровне файловой системы же. Дерево каталогов и файлов с less расширением почти 1-в-1 совпадает с деревом сорцов, т.е. проблемы тут не вижу. Хотелось бы чуть поподробнее про профит от JSS...

Самое большоепреимущество (или быстрая выгода) в SSR и оптимизированного Critical CSS. Другой пункт - это в контроле стилей. Максимум, что можно получить от CSS - это управление на уровней классов, в то время, как в JSS полный контроль до значения свойства. Также важный пункт - сокращение порога входа для разработчиков (мысли в горизонте пары лет, когда новые разработчики будут приходить и им либо придётся, либо не придётся учить LESS).

А лесс надо учить? Если знаешь css и показали, документация в одной вкладке и вперед, ошибки в консоли научат за день всему.

@dkdfdz ну лесс за пол часа учится, совсем не сложный.

Stylus, saas, а вот postcss сложнее изза плагинов

Самое большоепреимущество (или быстрая выгода) в SSR и оптимизированного Critical CSS. Другой пункт - это в контроле стилей. Максимум, что можно получить от CSS - это управление на уровней классов, в то время, как в JSS полный контроль до значения свойства. Также важный пункт - сокращение порога входа для разработчиков (мысли в горизонте пары лет, когда новые разработчики будут приходить и им либо придётся, либо не придётся учить LESS).

Первое это самая большая обманка jss. Не профит это пока, а только потеря в производительности Будьте бдительны : )

Есть пруф бенчмарки? :)

@dkdfdz ну лесс за пол часа учится, совсем не сложный.

LESS тут был для поддержания контеста в исходном сообщении) Разумеется имел ввиду SASS/PostCSS стили в развесистых проектах.

Мне так нравится stylus, не могу себя заставить перейти на postcss

Stylus со скобочками

Мне так нравится stylus, не могу себя заставить перейти на postcss

а какое отношение стилус имеет к постцсс?

а какое отношение стилус имеет к постцсс?

PostCSS перекрывает фичи всяких LESS, SASS, Stylus и тоже умеет в это.

https://github.com/axept/prejss will help you :)

Городить огород пакетов в разработке плохо, либо постцсс и тогда без стайлуса, но подсветка не будет работать не всегда

Вопрос философский, надо пробовать каждому

Городить огород пакетов в разработке плохо, либо постцсс и тогда без стайлуса, но подсветка не будет работать не всегда

где не будет работать подсветка?

В редакторах

Плагином миллион, как ему понять возможности

всем доброе утро! подскажите как тут правильно в пропс передать данные? мне нужно, чтобы в button пришел класс button-search https://jsfiddle.net/69z2wepo/73782/ на jsfiddle немного не так, так как ругается компилятор, но суть та же. В коде пишу <Button className={ `${styles['button-search']} }> {this.props.children} </Button>`

<Button className='button-search' >

так тоже не срабатывает(

Ну так у тебя CSS не подключен

у меня с одной кнопкой работает, с другой - нет( хотя делаю все так же

в файле подключен

Хм

ты передаешь Button в props className ='button-search' и потом нигде его не используешь

использую в арр, я же его экспортирую

использую в арр, я же его экспортирую

я говорю про реализацию компонента Button в jsfiddle

`ReactDOM.render( <SearchButton />, document.getElementById('container') );`

использую)

<Button className='button-search'>

ERROR: S client not available

но в самом Button нигде не используется полученный props className

и как это исправить?

ты в Button хочешь получить класс 'button button-search'?

да

но там будет немного другая структура, в button чтобы пришел 1 класс который передаю, то есть button-search

то есть только кнопке задать 1 класс

return <div className=``button ${this.props.className}``> либо просто return <div className={this.props.className}>, т.к. требования у тебя какие-то расплывчитые

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

а зачем у тебя в конструкторе this.className = 'button'?

то есть мне он по сути не нужен? `constructor(props){ super(props); this.className='button'; }`

вот это

я с примерапыталась композицию сделать

да там простой функции хватит, зачем класс

const Button = props => ( <div className={button ${props.className}}> <button> {props.children} </button> </div> );

+

Охренеть че в старой спецификации javascript когда-то было: https://developer.mozilla.org/en-US/docs/Archive/Web/E4X_tutorial/Introduction

Почти jsx :)

Причём даже сразу с computed attributes )) а мы это только ждём

чтобы можно было по ним грепать и искать ответы на любые вопросы

Не найдешь решений, только срачи узкоспециализированные к конретному кейсу проекта вопросы. Есть, конечно, вероятность, что подойдет тебе, но искать и отсеивать будет сложнее чем задать вопрос на so или погуглить

да не.. зачастую я нахожу полезные вещи просто скроллируя чатик вверх. Вон про формы посоны рассказывают интересно и полезно

просто хотелос бы просто иметь в компе оффлайновый файл лога. и может из него извлекать инфу по мере необходимости

кто-то решал проблему с axios - если не найден редюсер - не выбрасывает никакой ошибки, но приложение валится

подскажите, для react есть server rendering? что стоит почитать на эту тему?

и общий вопрос, он нужен только для рендера первой страницы?

есть ли что-то вроде синхронизации состояния сервера и клиента?

есть ли что-то вроде синхронизации состояния сервера и клиента?

если найдешь информацию. Скинь в общий чат, что нашел. Я вот по этому мануалу делал: https://reacttraining.com/react-router/web/guides/server-rendering

По поводу синхронизации, пока не понял, можно ли этим как-то управлять. После того, как сгенерировал статику - там появляются атрибуты data-reactroot="" data-reactid="1" data-react-checksum="1111804751" но как понять, чему равны эти же атрибуты при обычном рендеринге, и как они сравниваются - я не знаю

и общий вопрос, он нужен только для рендера первой страницы?

он нужен для СЕО. Боты пока не научились ждать контент, который подгружается динамически

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

он нужен для СЕО. Боты пока не научились ждать контент, который подгружается динамически

Для яндекса*