• Компоненты React.
  
• Рендеринг ReactDOM.
  
• Классы компонентов и функциональных компоненты.
  
• JSX.
  
• Состояние (state).
  
• Обработка событий.
  
• Асинхронный метод setState.
  
• Свойства (props).
  
• Ссылки (refs).
  

Чек-лист

1. Getting started with React

1.1 Методы добавления React

1. С помощью тэга <script />
2. С помощью create-react-app

1.2 Выбор метода добавления

1.2.1 Добавление React с помощью тэга <script />

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Babel не является обязательным для использования React, но полезным для написания кода UI, с помощью JSX.

"Разработчик – это человек, который переводит мысли заказчика на язык машины"
@mikita_du

Идея статьи появилась год назад, думал назвать «Вёрстка в 2021», но как-то затянулось… Весной 2021 года Microsoft объявила, что с 15 июня 2022 года прекращается поддержка IE11 (да, не для всех версий Win 10, но всё же), а значит, к выходу статьи уже останется менее полугода до знаменательного события, когда не придётся верстать под IE.

Для меня же это значит, что можно будет по полной использовать новые стандарты браузеров, в частности – css-variables, grid layout.

Statoscope — это инструмент для анализа webpack-бандлов, а я его автор и мейнтейнер. Он зародился в далеком 2016 году как эксперимент, а теперь это полноценный тулкит для просмотра, анализа и валидации сборки.

В ноябре на конференции HolyJS я выступил с докладом о Statoscope и провёл воркшоп по его использованию. Зрителям понравилось, так что мы с организаторами HolyJS решили, что доклад может пригодиться и читателям Хабра — поэтому сделали текстовую версию. Видеозапись тоже прилагаем.

Эта статья для тех, кто только начинает свой путь в написании больших React приложений, но все еще использует только console.log для их дебага. Мы с вами рассмотрим работу с расширением для браузера "React Developer Tools" на простом примере, который в дальнейшем вы сможете применить в своих проектах. Это расширение дает возможность просмотра дерева компонентов, их props, состояния и контекста. Также достаточно просто отловить неэффективные компоненты, которые подвергаются повторному рендерингу, посмотреть сколько на это уходит времени и построить графики для визуализации эффективности компонентов. Благодаря этой информации вы не только сможете оптимизировать ваше приложение, но и более глубоко изучить React и понять все тонкости работы с ним.

Коллекция советов и приёмов вёрстки с сайта HTMHell.

Этой публикацией я открываю серию переводов раздела "Продвинутые руководства" (Advanced Guides) официальной документации библиотеки React.js.

JSX — подробности

Фундаментально, JSX является синтаксическим сахаром для функции React.createElement(component, props, ...children).

Привет, Хабр! Меня зовут Максим Васянович, я спикер курса “Веб-верстка” в Skillbox. Сегодня поговорим о верстке, а точнее - о нюансах работы с псевдоэлементами before и after. Статья будет полезна, прежде всего, начинающим верстальщикам. Но, возможно, и профи будет интересно освежить эти моменты в памяти. 

Псевдоэлементы - мощный инструмент для создания дополнительной стилизации элементов. В этой статье посмотрим, для чего их можно использовать и как.

→ Ссылка на github

Здесь я поделюсь своим опытом и постараюсь максимально подробно рассказать все основные фитчи которые есть в вашем javascript для обработки прикосновение к дисплею. touchstart и т.д.

htmx — инструмент для создания сложных и интерактивных веб-приложений на HTML, альтернатива клиентскому рендерингу на Javascript. В этой статье рассказываем, как библиотека помогает переиспользовать элементы на сервере, сократить объем кода на Javascript и отказаться от сборки.

Мы уже писали о том, как запустить Python в браузере, а сегодня к старту флагманского курса по Data Science расскажем, как привычные для Python задачи решаются на JavaScript. Если вы знакомы только с JS и хотите попробовать Data Science, не покидая зону комфорта, (или, наоборот, хотите познакомиться с JS), просто хочется необычных экспериментов или нужно интегрировать небольшую управляемую визуализацию о статистике на сайт, читайте подробности под катом.

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

Знакомство с Brython

Эта статья — перевод оригинальной статьи Ben Lesh “Learning Observable By Building Observable”.

Ben Lesh рассказывает как создать свой observable и сравнивает его работу с observable из RxJs.

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

Я считал, что главный в мире 1С – программист. Позже в жёлтый мир пришли новые профессии, из большой разработки – аналитики, архитекторы, разработчики, даже тестировщики. Но я, как упрямый баран, называл эти профессии ненужными, вынужденными. Это просто неудавшиеся программисты, говорил я. Не можешь программировать – иди в аналитики. Боишься разговаривать с директором – иди в разработчики. Вообще ничего не умеешь – иди в тестировщики.

Но даже такая картина мира 1С не могла до конца объяснить происходящего. Аналитиков, архитекторов, разработчиков, сервис-инженеров и даже программистов в нашей отрасли – мало. А людей – много. Кто они?

За два с лишним года наблюдений, исследований и выращивания 1Сников я понял, что подходящего названия их профессии сейчас просто нет. Оттого постоянно возникает путаница, завышенные ожидания, неверные направления подготовки. Поэтому пришлось придумать название профессии самостоятельно.

Разрешите представить: Слесарь 1С. Без стёба. Статья – абсолютно серьёзная.