React — это библиотека JavaScript для создания пользовательского интерфейса.

Это официальное определение React. Но что если вы не знаете, что такое JavaScript? Что если вы не разработчик? Смогли бы вы тогда понять, что такое React?

Однозначно ДА. Именно поэтому я и написал эту статью на тему: Что такое React на самом деле? Что такое React.js (или ReactJS)? Для чего используется React? Почему React так популярен? Какие проблемы можно решить с его помощью?

Эта статья — введение в React для начинающих. И это первое, с чего стоит начать, прежде чем детально изучить React. Я объясню основные идеи React на пальцах (и с помощью картинок). Нет опыта работы с JavaScript? Не беда! Если у вас есть базовые знания HTML (например, HTML-тегов), эта статья должна вам понравиться.

Это как посмотреть на React с высоты птичьего полета, но я дам вам бинокль. Так что вы не только увидите общую картину того, что делает React таким особенным, но и увеличите изображение, чтобы получить практический опыт написания реального React-компонента. И да, никаких знаний JS не требуется!

Привет! Для начала процитирую страницу из Википедии, да будет здоров Джимми Уэйлс и все редакторы, поддерживающие свободную энциклопедию. Согласно ней, индекс бигмака — это неофициальный способ определения паритета покупательной способности. Если проще, этот индекс довольно наглядно показывает уровень цен в стране, ведь в основе стоимости бигмака: две мясных котлеты гриль, специальный соус, сыр, огурцы, салат и лук, всё на булочке с кунжутом… Кроме этого, конечно же, в ценник заложены аренда помещений и оборудования, рабочая сила и многие другие факторы.

Важно и другое: милые сердцу многих рестораны с желтой буквой «M» имеют обширнейшую сеть, что дает возможность сравнить цены почти по всему миру. Исследования ведутся с 1986 года и постоянно актуализируются журналом «The Economist».

Мы визуализировали имеющиеся в свободном доступе данные и собрали простое приложение, используя React и наш проект Quarkly.

Наш проект Quarkly по-прежнему в открытой бете, мы готовимся к релизу и в хорошем темпе добавляем функционал, который заложен в Roadmap. При этом апдейты апдейтами, а более активно щупать свою аудиторию, да что там щупать – сформировать комьюнити, которое не против таких виртуальных тактильных манипуляций – это большая и важная задача. С ней пока не всё гладко.

– Вот наш проект, он вот для этого и потенциально решает вот такую задачу.
– А есть юзкейсы? Дайте посмотреть.
– Ок, зайдем позже.

Полагаю, знакомая история для многих, кто запускал свои проекты. Тем ценнее, когда use case появляется сам из ниоткуда. Вот вы в бете и объективно понимаете, что нужно сделать, чтобы с помощью вашего продукта люди начали системно решать свои задачи, а они берут и уже сейчас что-то делают не по фану, а даже для прохода в финал крупного хакатона.

© The Host (Stephenie Meyer)

На этот пост меня вдохновила недавняя заметка Александра Pogman25 про боль фронтендеров и непростую историю любви и ненависти между фронтами и дизайнерами интерфейсов. История стара как мир, и основная причина боли действительно в отсутствии диалога и нежелании или неумении оказаться по другую сторону макета. Нежелание может быть следствием профэгоизма, неумение – недостаточным скиллом. И с тем и с другим можно работать.

Думаю, в недалеком будущем No-Code/Low-Code продукты сделают свое дело, и UI/UX и фронтендеры уже не будут знать, что это такое, когда глаз дергается синхронно с кнопкой в веб-версии макета. А что сейчас? Чтобы дизайнеру и фронту было проще ужиться друг с другом, а их совместная работа упростилась, мы придумали Quarkly.

Слышали про такой инструмент, как Airtable, но не знали, с чего начать? Тогда приглашаем в мир визуального программирования построения БД!

Этим постом мы начинаем цикл обучающих статей, в которых будем давать практические примеры работы с нашим инструментом Quarkly. В этом уроке мы сделаем простое веб-приложение, которое будет показывать сотрудников компании. При создании приложения ни один сотрудник РЖД не пострадал.

Фронт будем делать при помощи Quarkly, а данные подтягивать из базы в Airtable. На выходе получим react-приложение, синхронизированное с базой данных.

Всем привет! Идеологически Quarkly – это проект, который призван упростить жизнь веб-разработчикам и веб-дизайнерам. В этом посте я коротко расскажу, за счет чего это возможно.

Прежде всего, давайте посмотрим, как выглядит типичный цикл разработки веб-приложения в 2020 году? Есть команда. В этой команде есть дизайнер и разработчик. Первый создает дизайн-спецификацию в Figma. Второй, на основе дизайн-спецификации, создает компоненты, переносит тему. Результат своей работы программист показывает дизайнеру в Storybook. Дизайнер его проверяет и утверждает проект, если всё хорошо. Далее он начинает создавать макеты, а разработчик верстает их при помощи компонентов из спецификации.

Привет, Хабр! Представляем вашему вниманию перевод статьи фронтенд-разработчика из MediaMonks Рональда Мендеса. Будучи родом из Венесуэлы, Рональд перебрался в Аргентину и построил успешную карьеру, а благодаря своему большому интересу к дизайну и анимации стал одним из членов жюри престижной премии FWA (вручается с 2000 года).

В этой заметке, которая показалась нам интересной, Рональд рассуждает о том, как фронтендеру найти свое место под солнцем и эффективнее взаимодействовать со своей командой.

Рональд Мендес. О роли фронтенд-разработчика

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

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

Оригинальный материал был написан немецким разработчиком Лоренцом Вайсом для личного блога, а позже собрал много позитивных отзывов на dev.to. Переведено командой Quarkly специально для комьюнити на Хабре.

Всем привет! Меня зовут Саша, я сооснователь и по совместительству главный разработчик в Quarkly. В этой заметке я хочу рассказать о том, как концепция атомарного CSS, которой мы придерживаемся, вкупе с недостатками функционала Styled-System (и Rebass, как частного случая использования этой библиотеки) сподвигли нас к созданию своего собственного инструмента, который мы назвали Atomize.