Тег: react

Жизненный цикл компонентов в React: функциональные компоненты

React — это библиотека JavaScript для создания пользовательских интерфейсов, и ее основой являются компоненты. В React существует концепция "жизненного цикла компонентов", которая описывает различные этапы, через которые проходит компонент с момента создания до удаления. Для функциональных компонентов в React введены новые возможности с появлением хуков в React 16.8.

Жизненный цикл компонентов в React: функциональные компоненты

14 февраля 2024
268
3 мин

Самый лучший современный JavaScript-фреймворк – персональный рейтинг

В этом видео я как фронтенд-разработчик со стажем расставлю современные javascript-фреймворки в порядке их "крутости".

25 октября 2023
437
19 сек

Лучшие практики для написания чистого React-кода

Чистая организация кода важна в React как по практическим причинам, так и из-за ее визуального воздействия. Хорошо продуманная и хорошо организованная кодовая база может быть визуально привлекательной, что делает ее более удобной для работы и понимания.

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

Лучшие практики для написания чистого React-кода

12 октября 2023
468
4 мин

React Day Berlin 2017

Холодным субботним днем провели в Берлине конференцию React Day Berlin 2017. Прошло все гладко – слушатели довольны. Только мне вот показалось, что мало супа было на обед.

Фотографии из твиттера за авторством разных людей.

04 декабря 2017
2.6 тыс.
12 сек

Условные комментарии для Internet Explorer в React

Иногда сделать простые вещи очень непросто. Например, добавить условный комментарии для 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

07 мая 2015
3.3 тыс.
1 мин
« Назад
Вперед »