26 звёзд, 1 форк

Хайп-дривен девелопмент))

не знаю насколько это ценно

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

Извиняюсь, но что такое хоки?

Так подумает каждый, и все пройдут мимо >_>

Извиняюсь, но что такое хоки?

загугли HOC или "компоненты высшего порядка реакт"

Спасибо

Подскажите, пожалуйста. Вынес react из бандла. Подключил до бандла с cdn используя тег скрипт без аттрибута async (блокирующая загрузка) <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script type="text/javascript" src="/client.bundle.js"></script> Но всё равно получаю ncaught TypeError: Cannot read property 'createElement' of undefined at eval (patch.dev.js:176) at Object../node_modules/react-hot-loader/lib/patch.dev.js (client.bundle.js:9207) at webpack_require (client.bundle.js:712) Или, если билд без dev-server и реловада Uncaught Error: ReactDOM was loaded before React. Make sure you load the React package before loading ReactDOM. Начало загрузки вроде бы последовательное, но загрузка бандла банально заканчивается раньше. Совсем последовательной её делать определенно не хочется. (сначал одно затем начинаем другое) Можно конечно включить link rel="preload", а потом по загрузке добавлять script, но меня не оставляет ощущение что всё оверкомпликейтед и я что то делаю не так Как это правильно делать?

очевидно react-dom ты не вынес?)

сделай аналогично

пробовал, был тот же баг, решил по очереди. сейчас верну и дам подтверждение

а как именно ты "вынес" реакт?

externals: { react: { root: 'React', commonjs2: 'react', commonjs: 'react', amd: 'react', umd: 'react', }, 'react-dom': { root: 'ReactDOM', commonjs2: 'react-dom', commonjs: 'react-dom', amd: 'react-dom', umd: 'react-dom', }, },

в конфиге

Вынес, теперь ошибка Uncaught TypeError: Cannot read property 'Component' of undefined

Причем трейс странный: AppContainer.prod.js:15 Uncaught TypeError: Cannot read property 'Component' of undefined at eval (AppContainer.prod.js:15) at Object../node_modules/react-hot-loader/lib/AppContainer.prod.js (client-18417e3b0d6f4f32ff8b.bundle.js:2561) at r (client-18417e3b0d6f4f32ff8b.bundle.js:1) at eval (AppContainer.js:6) at Object../node_modules/react-hot-loader/lib/AppContainer.js (client-18417e3b0d6f4f32ff8b.bundle.js:2557) at r (client-18417e3b0d6f4f32ff8b.bundle.js:1) at eval (index.prod.js:3) at Object../node_modules/react-hot-loader/lib/index.prod.js (client-18417e3b0d6f4f32ff8b.bundle.js:2569) at r (client-18417e3b0d6f4f32ff8b.bundle.js:1) at eval (index.js:6)

Странный так как там нет hot-loaderа

@artalar ты про обёртку типа reducer(initialState) .action(someAction) .reducer(state => newState) ?

Чет не понял.

запуск через экспресс-сервер

@everdimension какие то очевидные глупости видишь в том что я делаю?

@everdimension какие то очевидные глупости видишь в том что я делаю?

неа

Подскажите, пожалуйста. Вынес react из бандла. Подключил до бандла с cdn используя тег скрипт без аттрибута async (блокирующая загрузка) <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script type="text/javascript" src="/client.bundle.js"></script> Но всё равно получаю ncaught TypeError: Cannot read property 'createElement' of undefined at eval (patch.dev.js:176) at Object../node_modules/react-hot-loader/lib/patch.dev.js (client.bundle.js:9207) at webpack_require (client.bundle.js:712) Или, если билд без dev-server и реловада Uncaught Error: ReactDOM was loaded before React. Make sure you load the React package before loading ReactDOM. Начало загрузки вроде бы последовательное, но загрузка бандла банально заканчивается раньше. Совсем последовательной её делать определенно не хочется. (сначал одно затем начинаем другое) Можно конечно включить link rel="preload", а потом по загрузке добавлять script, но меня не оставляет ощущение что всё оверкомпликейтед и я что то делаю не так Как это правильно делать?

А зачем, если не секрет?)

А зачем, если не секрет?)

мож для кеширования

А зачем, если не секрет?)

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

ну и клиент уже может прийти так с кешированным реактом

это идеальный вариант

звучит круто, надо себе в туду добавить )

а при использовании styled-сomponent принятно при билде для продакшена билдть css файл?

а при использовании styled-сomponent принятно при билде для продакшена билдть css файл?

Нет, ты кажись сути не понял

Нет, ты кажись сути не понял

и в чем суть?)

и в чем суть?)

В том, что создаётся необходимое условно на лету

а при использовании styled-сomponent принятно при билде для продакшена билдть css файл?

Нет Запрещено законом

В том, что создаётся необходимое условно на лету

получается что никакого кеширования для стилей не будет?

получается что никакого кеширования для стилей не будет?

Не будет

У меня на сервере кешируется ссрные стили например

ну то что самому на сервере можно навернуть что-нибудь эдакое это понятно.

получается что никакого кеширования для стилей не будет?

Будет кеширование JS

получается что никакого кеширования для стилей не будет?

А стили от SC лежат в JS

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

но если ssr то придется что-нибудь придумывать еще.

но если ssr то придется что-нибудь придумывать еще.

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

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

тоже верно

Никаких идей куда мне стоит копать?

Никаких идей куда мне стоит копать?

А какой вопрос был?

@artalar Подскажите, пожалуйста, где я не прав: решил вынести реакт и реакт дом из бандла и грузить их с cdn: externals: { react: { root: 'react', commonjs2: 'react', commonjs: 'react', amd: 'react', umd: 'react', }, 'react-dom': { root: 'ReactDOM', commonjs2: 'react-dom', commonjs: 'react-dom', amd: 'react-dom', umd: 'react-dom', }, }, в конце файла: <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <script async src="/client-2bb593ab57065d662f04.bundle.js"></script> Но я получаю в консоли: Router.js:100 Uncaught TypeError: Cannot read property 'Component' of undefined at eval (Router.js:100) at Object../node_modules/react-router/es/Router.js (client-2bb593ab57065d662f04.bundle.js:2713) at r (client-2bb593ab57065d662f04.bundle.js:1) at eval (MemoryRouter.js:10) at Object../node_modules/react-router/es/MemoryRouter.js (client-2bb593ab57065d662f04.bundle.js:2697) at r (client-2bb593ab57065d662f04.bundle.js:1) at eval (index.js:2) at Object../node_modules/react-router/es/index.js (client-2bb593ab57065d662f04.bundle.js:2725) at r (client-2bb593ab57065d662f04.bundle.js:1) at eval (index.jsx:15) при том что я роутер сейчас убрал из кода с целью упрощения

>Подскажите, пожалуйста, где я не прав: >решил вынести реакт и реакт дом из бандла и грузить их с cdn:

>Подскажите, пожалуйста, где я не прав: >решил вынести реакт и реакт дом из бандла и грузить их с cdn:

нет

Привет. Как идеоматично делать такой переход: есть что-то вроде ArticleCard с кнопкой Read - при нажатии на кнопку Read нужно поменять url и перейти на чтение статьи? Пока придумал так: в store в поле currentArticle буду менять/хранить текущую статью на чтение и передовать через пропсы в Article, а Article показывать с помощью роутинга. Так норм?

Привет. Как идеоматично делать такой переход: есть что-то вроде ArticleCard с кнопкой Read - при нажатии на кнопку Read нужно поменять url и перейти на чтение статьи? Пока придумал так: в store в поле currentArticle буду менять/хранить текущую статью на чтение и передовать через пропсы в Article, а Article показывать с помощью роутинга. Так норм?

Роутер возьми братан

А, не дочитал

Роутер возьми братан

Я уже. да )

@artalar Подскажите, пожалуйста, где я не прав: решил вынести реакт и реакт дом из бандла и грузить их с cdn: externals: { react: { root: 'react', commonjs2: 'react', commonjs: 'react', amd: 'react', umd: 'react', }, 'react-dom': { root: 'ReactDOM', commonjs2: 'react-dom', commonjs: 'react-dom', amd: 'react-dom', umd: 'react-dom', }, }, в конце файла: <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <script async src="/client-2bb593ab57065d662f04.bundle.js"></script> Но я получаю в консоли: Router.js:100 Uncaught TypeError: Cannot read property 'Component' of undefined at eval (Router.js:100) at Object../node_modules/react-router/es/Router.js (client-2bb593ab57065d662f04.bundle.js:2713) at r (client-2bb593ab57065d662f04.bundle.js:1) at eval (MemoryRouter.js:10) at Object../node_modules/react-router/es/MemoryRouter.js (client-2bb593ab57065d662f04.bundle.js:2697) at r (client-2bb593ab57065d662f04.bundle.js:1) at eval (index.js:2) at Object../node_modules/react-router/es/index.js (client-2bb593ab57065d662f04.bundle.js:2725) at r (client-2bb593ab57065d662f04.bundle.js:1) at eval (index.jsx:15) при том что я роутер сейчас убрал из кода с целью упрощения

root: 'React'

Я уже. да )

Ты про стор, тогда, я бы все хранил

root: 'React'

А у тебя с маленькой буквы

Это же не мессаги которые инвалидировать надо

Потом по айди вытягивай из массива

Ты про стор, тогда, я бы все хранил

То есть не все, а при переходе на каждую статью докидывать в массив

То есть не все, а при переходе на каждую статью докидывать в массив

Ок, спасибо

нет

Что нет?

Что нет?

вынести вендорную библиотеку в cdn - это хорошая идея

Правда, в текущих реалиях, это нужно делать хитрыми фолбеками

вынести вендорную библиотеку в cdn - это хорошая идея

Зачем?

ERROR: S client not available

Зачем?

Цдн рассчитаны на то, чтобы доставлять статику быстрее, будучи географически распределенными по миру(обычно). Т.е. должно ускорить загрузку сайта, в нашем случае, вендорных скриптов

Зачем?

Подумай. Погугли, почитай в интернете

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

Цдн рассчитаны на то, чтобы доставлять статику быстрее, будучи географически распределенными по миру(обычно). Т.е. должно ускорить загрузку сайта, в нашем случае, вендорных скриптов

нет

Точнее это вторично

нет

Что первично же?

Добрый вечер. Помогите разобраться. Вот пишут/говорят что Base аутентификация при которой логин:пароль просто кодируютя base64 и передаются в header'е запроса не безопасна на http соединениях. Лучшим вариантом предлагается jwt тоокен для реализации аутентификации. И вот у меня вопрос: на http соединении юзеру чтобы получить токен от сервера все равно приходится один раз незашифрованный пароль пересылать??

А первично выходит, что благодаря единому cdn, на который все должны ссылаться, статика достается из кеша, что, минуточку, считай мгновенно

Расчет именно на это

А первично выходит, что благодаря единому cdn, на который все должны ссылаться, статика достается из кеша, что, минуточку, считай мгновенно

>статика достается из кеша Тебя понял

Добрый вечер. Помогите разобраться. Вот пишут/говорят что Base аутентификация при которой логин:пароль просто кодируютя base64 и передаются в header'е запроса не безопасна на http соединениях. Лучшим вариантом предлагается jwt тоокен для реализации аутентификации. И вот у меня вопрос: на http соединении юзеру чтобы получить токен от сервера все равно приходится один раз незашифрованный пароль пересылать??

Нет

Подумай. Погугли, почитай в интернете

А шуму-то было

Jwt декодирует клиент

Jwt декодирует клиент

А откуда он сикретКей берет?

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

Адекват

Решил немного покопаться в редуксе и наткнулся на несколько библиотек выполняющих примерно одну и ту же функцию: redux-thunk, redux-saga, redux-pack. Может еще какие есть, но интересно узнать в чем их основное отличие и какие еще есть типы библиотек?

А откуда он сикретКей берет?

Ну ты можешь его зашифровать

Хотя все равно ключ надо тогда на клиенте хранить

Херня

Ну ты можешь его зашифровать

Замкнутый круг какойто))

Ну https в помощь тогда

Ни у кого случайно не было проблем с фокусом инпута? Делаю this.refs.input.focus(), триггерится onFocus, но курсор в инпуте не появляется и :focus стили не отображаются. При этом в document.activeElement лежит как раз этот инпут. Пока в голове вариант решить через стейт

А первично выходит, что благодаря единому cdn, на который все должны ссылаться, статика достается из кеша, что, минуточку, считай мгновенно

че-то ты "вторично/первично" от балды определил все эти факторы важны

А первично выходит, что благодаря единому cdn, на который все должны ссылаться, статика достается из кеша, что, минуточку, считай мгновенно

это утопия

Решил немного покопаться в редуксе и наткнулся на несколько библиотек выполняющих примерно одну и ту же функцию: redux-thunk, redux-saga, redux-pack. Может еще какие есть, но интересно узнать в чем их основное отличие и какие еще есть типы библиотек?

Если коротко - разные подходы

Надо было добавить в output опцию webpack-конфига libraryTarget: 'umd'.

Внимательно рассмотри человека на прилагающейся фотографии. Можешь ли ты представить себе, как этот мужчина плачет и набирает дрожащими пальцами телефон какой-то невнятной бляди, чтобы рассказать о своих чувствах к ней? Можешь представить, что он пропускает в очереди жирную мамашу с выблядком на руках? А то, что он работает полгода, раздавая листовки, чтобы купить себе айфон? Ты видишь в нем человека, который стесняется сказать родителям, что на свой двадцать четвертый день рождения он хочет выпить с друзьями? Теперь посмотри на него еще раз. Видишь ли ты на нём стильные брендовые вещи? Может он покрыт вздувшимися мускулами и толстыми венами? Он обладает внешностью киноактера или мужчины-модели? Сзади него стоит дорогой автомобиль? Посмотри снова на этого мужчину и спроси самого себя, что с ним не так? Почему в его взгляде — железо, в его осанке — сталь, а вместо кожи — свинец?

Вася перлогинься

Ни у кого случайно не было проблем с фокусом инпута? Делаю this.refs.input.focus(), триггерится onFocus, но курсор в инпуте не появляется и :focus стили не отображаются. При этом в document.activeElement лежит как раз этот инпут. Пока в голове вариант решить через стейт

попробуй после установки фокуса с setSelectionRange поиграться