Создаём первый сайт с Claude Desktop и узнаем 50 основных фронтенд-компонентов

Значимый прорыв формирует отрасль ИИ: bitrix24 только что Создаём первый сайт с Claude Desktop и узнаем 50 основных фронтенд-компонентов Простой 7 мин 11 Блог компании Битрикс24 Искусственный интеллект Привет! Начинаем серию статей-туториалов по видео Александра Сербула, руководителя больших данных, высоконагруженных систем и машинного обучения в компании Битрикс24. Видео и статьи записаны и написаны специально для вайбкодеров без технического бэкграунда, которые хотят создавать надёжные веб-приложения.

В туториалах мы будем использовать ИИ-агента для работы с приложениями на React. Сегодня разберём основы работы с Claude Desktop и коротко расскажем про основные фронтенд-технологии. Специально для этого мы подготовили сайт-библиотеку с основными визуальными компонентами сайтов: app-117900122a91.

Технические детали

tech/Сами программировать не будем — всю работу проводит ИИ-агент, а мы пишем запросы и контролируем результат. Простыми словами: что такое фронтенд, сайт и компонентыЧтобы было немного проще работать и не путаться в похожих вещах, сначала введём несколько базовых определений. Запоминать их необязательно, но если в середине статьи вам захочется внести ясность, можно вернуться сюда и перечитать.

Сайт — это набор связанных между собой страниц в браузере. На сайте пользователь может читать информацию, нажимать кнопки, переходить между разделами и выполнять другие действия. Сайт состоит из страниц, интерфейсных элементов и кодаФронтенд — это только видимая часть сайта или веб-приложения.

То есть страницы, кнопки, меню, формы для заполнения, с которыми может взаимодействовать пользователь — это всё фронтенд. Бэкенд — внутренняя часть сайта или веб-приложения, которая не видна пользователю напрямую. Бэкенд отвечает за данные, регистрацию, вход, сохранение настроек.

Отраслевые последствия

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

Разработчик может использовать один и тот же готовый компонент в нескольких местах сайта. Мы сегодня сделаем простой сайт. В нём будет только фронтенд и некоторые компоненты, которые мы подсмотрим на другом сайте-библиотеке.

Некоторые технические подробности: что такое JavaScript, React, Vite, Tailwind и TypeScriptВажен не только внешний вид визуальных компонентов. Внутри них реализована поддержка также мобильных устройств (в том числе жестов), а также возможность использования людьми с ограниченными возможностямиНиже — краткое описание нескольких основных технологий, которые часто используют при разработке фронтенда. JavaScript — язык программирования, который помогает делать страницы интерактивными.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.