https://gtmetrix.com/
lighthouse
Это если тебе реальную ситуацию нужно увидеть.
Потому что гугл пейдж может показывать 3% страничке что за 0.5sec отрисовывается
Гугл спид даже на Ютубе показывет 60 на мобиле, а деск около 80
Igor
Dmitriy
Ну так и есть
Oleg
Гугл спид даже на Ютубе показывет 60 на мобиле, а деск около 80
потому что плеер ютуба весит примерно 3 мб 🙂
Igor
Значит они считают это приемлемым?
Dmitriy
потому что плеер ютуба весит примерно 3 мб 🙂
Потому что пейдж спид не для спид а для ранжирования. А ютуба угроза такая не светит так что ...
Андрей
потому что плеер ютуба весит примерно 3 мб 🙂
Любой видос, который будет проигран через этот плеер будет гораздо тяжелее. К чему экономия*
Oleg
Любой видос, который будет проигран через этот плеер будет гораздо тяжелее. К чему экономия*
чтобы запустить видео быстрее?
Иван
Как в react-alert капс убрать?
Seva
Johny
Всем привет. У вас тоже eslint ругается так?
Cannot read property 'forEach' of undefined
при билде проекта
arthur
не ругается
Victor
Всем привет. У вас тоже eslint ругается так?
Cannot read property 'forEach' of undefined
при билде проекта
Eslint? Такое обычно в runtime вываливается, когда пытаешься методы массива у Undefined вызвать
Johny
Eslint? Такое обычно в runtime вываливается, когда пытаешься методы массива у Undefined вызвать
https://github.com/facebook/create-react-app/issues/7753
Oruj
Rustem
Victor
Rustem
ну ты похож на того кто еще и вьюжс подключает)) ахаха сорри
да не, до меня так написали) сейчас на реакт переписали
Иван
Artur
Можешь показать во что превращается этот код на выходе?
например,
import styled from 'reshadow'
const App = ({disabled, color, styles}) => styled(styles)`
button {
color: ${color};
}
`(
<button disabled={disabled} use:theme="normal" />
)
превратится во что-то типа такого (упрощенно)
import styled, {set, map, __css__} from 'reshadow'
const styles_a1b0 = css(`
.button_a1b0 {
color: var(--_a1b0-0);
}
`, 'a1b0')
const App = ({disabled, color, styles}) => styled((set(styles, styles_a1b0.with(color)), (
<button {...map('button', {disabled}, use({root: true, theme: 'normal'})} />
))
по сути мерж пропсов на элементе заменяется на мерж + подстановку нужных классов, цсс-переменные с хешами сетятся на рутовые ноды компонентов, а определения стилей выносятся наверх, в дальнейшем их можно экстрактить в отдельные файлы
Андрей
Иван
стилем, прост я думал может есть встроенный конфиг
Artur
нет, у них хеши уникальные
Андрей
нет, у них хеши уникальные
Т.е. класс в одном проекте будет 100% отличаться от класса в другом?
Maxim
Конфига у них никакого нету, только стилем text-transform: none;
Artur
Т.е. класс в одном проекте будет 100% отличаться от класса в другом?
const MyButton = (...) => styled`
button { ... }
`(
<button />
)
const MyOtherButton = (...) => styled`
button { ... }
`(
<button />
)
классы в данном случае будут разные
а вот здесь будут общие, так как реиспользуется общий стайлщит:
const commonStyles = css`
button { ... }
`
const MyButton = (...) => styled(commonStyles)(
<button />
)
const MyOtherButton = (...) => styled(commonStyles)(
<button />
)
Johny
как-то можно поменять версию eslint которую использует cra при билде?
no
Кто знает, почему выдаёт ошибку Cannot find module 'react-icons' при попытке импорта import { IconContext } from 'react-icons'?
Когда импортирую иконки таким образом -- import { FaVk } from 'react-icons/fa' -- ошибки нету
P.S. использую nextJS
Serega
Как можно получить список своих роутов?
Aidyno
Как можно получить список своих роутов?
https://stackoverflow.com/questions/37800296/react-router-get-all-routes-as-array
Bohdan
Если в компоненте рендерится всегда один див, может ли реакт поменять дом ноду этого дива при каком-то рендере?
oneonwar
как в лефлете покрасить геоджейсонку градиентом от атрибута?(
Stepan
Привет, по какой логике разделять редьюсеры?
Daniil
Привет, по какой логике разделять редьюсеры?
Логически разделять) Например, у тебя список пользователей - один редюсер, список форм - еще один
Stepan
Логически разделять) Например, у тебя список пользователей - один редюсер, список форм - еще один
Я имею ввиду разделять по файлам, чтобы собрать через combineReducers) Спасибо
Kirill
Добрый день! У меня достаточно слабые познания в React. Однако, стоит следующая задача. Конекретно сейчас мы используем Spring MVC, и как я понял, мы(я) будем переделывать  View с JSP на React. И естественно, у нас нет Node сервера. Такой вопрос, в теории, я могу сделать запустить React App без Node js сервера, мне просто нужно использовать CDNки. Я уже делал так, просто вставлял CDN React и Bable в мой HTML, и в тегах <script> писал мой Реакт код. Так же, мой бос хочет использовать готовые компоненты от Ant design. С ними тоже проблемма, не могу их импортировать  через CDN естественно. 2 -3 месяца назад, я делал демо Реакт + Материал дезайн, без  Нод сервера и оно работало. Сейчас не работает. Прошу совета или комментария. Спасибо!
Артем
renderSession(){
return this.props.sessions.map((session) =>
<button
key={session.session_id}
type="button"
className="btn btn-primary mr-4"
>
{session.session_username}
</button>
);
}
Я отрисовал эту кнопку с данными которые берутся с редукса, но там еще есть session_id. Как мне при нажатии на кнопку вывести session_id именно этой кнопки на которую я нажал? к примеру в console.log()
Max
onClick
Артем
onClick
я писал онкликл,передавал туда айдишник,но оно выводила в консоль без моего нажатия эти айдишники,и сразу все
activeAcc = (session_id) => {
console.log(session_id,"session_id")
}
renderSession(){
return this.props.sessions.map((session) =>
<button
key={session.session_id}
type="button"
className="btn btn-primary mr-4"
onClick={this.activeAcc(session.session_id)}
>
{session.session_username}
</button>
);
} оно в console.log выводит сразу все айдишники,и без моего нажатия
Костян
Добрый день! У меня достаточно слабые познания в React. Однако, стоит следующая задача. Конекретно сейчас мы используем Spring MVC, и как я понял, мы(я) будем переделывать  View с JSP на React. И естественно, у нас нет Node сервера. Такой вопрос, в теории, я могу сделать запустить React App без Node js сервера, мне просто нужно использовать CDNки. Я уже делал так, просто вставлял CDN React и Bable в мой HTML, и в тегах <script> писал мой Реакт код. Так же, мой бос хочет использовать готовые компоненты от Ant design. С ними тоже проблемма, не могу их импортировать  через CDN естественно. 2 -3 месяца назад, я делал демо Реакт + Материал дезайн, без  Нод сервера и оно работало. Сейчас не работает. Прошу совета или комментария. Спасибо!
https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html
Max
onClick={() => this.activeAcc(session.session_id)}
Max
ты её сразу вызывал
Kirill
https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html
Спасибо большое за ответ. Делаю так же, и оно работает. Но когда подключаю, Material Ui via CDN и хочу использовать компонент, например <Button />, консоль выдает что компонент "не определен"(перевел с английского как мог). Я щас быстро набросаю код и сброшу скриншотом сюда, можно?
Костян
Нужно! Может и помогут, я всегда так делаю) И тоже стараюсь помогать чем могу
Kirill
Нужно! Может и помогут, я всегда так делаю) И тоже стараюсь помогать чем могу
Костян
Костян
Посмотри как ипортируют в документации
Konstantin
Invariant failed: You should not use <NavLink> outside a <Router>
Ребят не подскажете в чем трабла? Использую так:
import { Router } from 'react-router';
<Router history={history}>
<Link to="/" activeClassName="active" exact={true}>
Text
</Link>
{routes.map((route: RouteProps, index: number) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.component}
/>
))}
</Router>
Konstantin
это не next
Serik
кто нибудь работал react+graphql. стоит ли юзать или сыровато? есть ли проекты в продакшне? какие подводные камни встречали?
Konstantin
уверен? у меня были проблемы с next. там багов немало
ну конечно))
я точно также использовал react-router + react-router-dom в предыдущем проекте все было ок, а вот сейчас вообще не пойму в чем дело =(
Kirill
Посмотри как ипортируют в документации
Спасибо! Проблемма в том, что браузер не понимае команду require. Requirejs , BrowserFly  должны помочь в жтом
Oleg
ну конечно))
я точно также использовал react-router + react-router-dom в предыдущем проекте все было ок, а вот сейчас вообще не пойму в чем дело =(
а как ты решаешь проблему со стейтом? там рекомендуют использовать свой стейт для каждой страницы. и якобы в этом случае redux не нужен. а если нужно перекинуть стейт с одной страницы на другую? В этом случае, как я понял, стейт передавать нужно через Localstorage
Костян
Konstantin
🦜
ну конечно))
я точно также использовал react-router + react-router-dom в предыдущем проекте все было ок, а вот сейчас вообще не пойму в чем дело =(
Нужно проходить learn и читать документацию. Тогда поймешь.
Dmitry
уверен? у меня были проблемы с next. там багов немало
Какие на пример
Один раз делал проект
Всё быстро вышло и баги в дев со стилями только были
🦜
🦜
Так и ?
🦜
Я не понимаю все равно претензии на счет стейта, когда есть _app.js и React Provider