При создании современных веб-приложений React и Next.js являются двумя популярными вариантами. Но в чем разница между ними? Давайте рассмотрим React 19 и Next.js 14 в простых терминах.
React — это библиотека JavaScript для создания пользовательских интерфейсов, и ее основой являются компоненты. В React существует концепция "жизненного цикла компонентов", которая описывает различные этапы, через которые проходит компонент с момента создания до удаления. Для функциональных компонентов в React введены новые возможности с появлением хуков в React 16.8.
В этом видео я как фронтенд-разработчик со стажем расставлю современные javascript-фреймворки в порядке их "крутости".
Чистая организация кода важна в React как по практическим причинам, так и из-за ее визуального воздействия. Хорошо продуманная и хорошо организованная кодовая база может быть визуально привлекательной, что делает ее более удобной для работы и понимания.
Опять же, когда код чистый и хорошо организованный, легче увидеть взаимосвязи между различными элементами, понять, как они взаимосвязаны, и вносить изменения по мере необходимости.
Холодным субботним днем провели в Берлине конференцию React Day Berlin 2017. Прошло все гладко – слушатели довольны. Только мне вот показалось, что мало супа было на обед.
Фотографии из твиттера за авторством разных людей.
Иногда сделать простые вещи очень непросто. Например, добавить условный комментарии для IE в html. Этим я сегодня и занимался.
В моем текущем проекте нам нужно было поддерживать css медиа-запросы в IE9. Для этого было решено использовать библиотеку media-match.
Что может быть проще? Пара строк кода с условным комментарием:
<!--[if lte IE 9]>
<script src="/public/media.match.js">
<![endif]-->Но все оказалось намного сложнее, так как мы используем React.js и делаем изоморфное одностраничное приложение. Кто бы знал, что React не рендерит на странице комментарии, помещенные в .jsx-файлы. Показынный ниже способ не работает:
renderHead: function() {
return (
<head>
<!--[if lte IE 9]>
<script src="/public/media.match.js"/>
<![endif]-->
</head>
);
}Единственный способ, который мне удалось найти – dangerouslySetInnerHTML для head, внутрь которого я поместил комментарий и все заработало:
renderHead: function() {
return (
<head dangerouslySetInnerHTML={{__html: '<!--[if lte IE 9]><script src="/public/media.match.js"></script><![endif]-->'}}>
</head>
);
}Следует также отметить, что тэг script должен быть закрыт отдельно <script></script>, так как сокращение <script /> не работает в React.
Последняя, но, при этом, большая проблема – если надо поместить несколько таких комментариев в head. Конечно, можно все просто написать в одну строку, но это выглядит «убого».
Поэтому я, да простят меня парсерсы HTML в браузерах, положил условные комментарии внутри тэга meta:
renderHead() {
return (
var comment = '<!--[if lte IE 9]><script src="/public/media.match.js"></script><![endif]-->';
<head>
<title>Website title</title>
<meta name="react-comment-hack"
dangerouslySetInnerHTML={{__html: comment}}>
</meta>
</head>
);
}Успешного «реакта».
© Автор Maks Nemisj
7.8 тыс.
2.2 тыс.
2.4 тыс.
2.7 тыс.
2.4 тыс.