Берлога программиста | Веб и не только
关闭频道
网络:5 000
订阅者
无数据24 小时
-167 天
-13830 天
帖子存档
Почему 🖼️ React, а не "голый" 🖼️ JavaScript + верстка?
В чате мне задали вопрос: "А нафига реакт если можно прекрасно все сверстать на HTML/CSS и добавить немного JS сверху?"
Если Вы делаете статический сайт то... Вы можете и не заметить разницы, НО если речь идет о чем-то большем чем две кнопки то преимущества вылезают сразу:
💡 Компоненты вместо километровых портянок
В реакте можно один раз написать код условной кнопки / карточки / чего угодно, со всеми стилями и параметрами и переиспользовать в коде в духе <Button /> <Card /> <ChtoUgodno /> и воткнуть это в любом месте, а не дублировать здоровенные куски по надцать раз.
🖼️ Минимум ручной работы с DOM
Vanilla JS → "руками" ищем элементы, сами обновляем DOM, сами следим, чтобы всё не сломалось.
React → меняем только состояние, а интерфейс обновляется сам.
Иначе говоря захотели чтобы где-то вылез попап, а потом скрылся - всю работу с DOM реакт делает за Вас, а Вам только управлять состоянием (на практике оооочень удобно)
🖼️ Здоровенная экосистема
Роутинг, готовые UI-библиотеки, менеджеры состояния, серверный рендеринг, Next.js для SSR — всё под рукой. С vanilla всё придётся собирать самому.
⚡️Масштабируемость
Благодаря компонентному подходу код легче организовать, сегментировать над ним работу в команде и делать по-настоящему большие проекты (проверено многолетним опытом)
🧪Тестирование без боли
Компоненты легко покрывать тестами - оно и логично, поскольку весь код разбит на многократно упомянутые компоненты. Vanilla JS часто требует больше костылей.
Хотите изучить Реакт? Ставьте 🔥под постомБерлога программиста | Чат
Отлично, раз прямо 50/50 то буду постить тут, а с задачками, видео и тп соберу на степике, я думаю что в целом на степике целесообразно снова пробежаться по голому JavaScript, а тут пока поведу TypeScript (и начну скоро React) чтобы было взаимосвязанно.
С Вами, дрогоими читателями я хочу договориться о том чтобы под постами всегда были реакции - чем их больше, тем контект лучше 🔥
И в чат вступайте (ссылка ниже)
Берлога программиста | Чат
Отлично! Вот это другой разговор, навалили реакций красиво. Ну что, пока начем не с вайбкодинга, а с одного классного генератора готовых проектов (но на деле лучше его использовать для создания "скелетов" Ваших проектов).
Встречайте - bolt.new 🔥
Просто прописываете промпт и все! Смотрите как генерируется полноценный проект - сайт / приложение или что-то еще. Звучит как сказка... но мы с Вами люди реальные и идеального ничего нет: под капотом все те же нейронки, потому иногда может быть бред, косяки в архитектуре или тупо древние библиотеки.
Как же правильно использовать?
1️⃣ шаг - идете в чатжипити / клод или иной серви который умеет в поиск по интернету и пишете промпт в духе
Напиши one-shot промпт для bolt.new для генерации <описание проекта>, напиши техническое задание для его создания, опиши структуру проекта и зависимости. Убедись что будут использоваться свежие библиотеки - для этого составь предварительный список и проверь их актуальность в сети.
Это ОЧЕНЬ важно, поскольку болт частенько... кладет болт на неоторые момент и тянет старые зависимости, поэтому сначала готопим для него мощный промпт используя другой сервис который еще пробежится по всем пакетам и проверит их актуальность.
2️⃣ шаг - внимательно изучите полученный промпт, не ленитсь ибо косяки в нем равны косякам в Вашем новеньком проекте и Вам же потом это разгребать. "Пуляете" в окно ввода и ждете. Все. Обычно бесплатного лимита хватате даже на несколько проектов сразу, после чего можно подождать сутки до пополнения (1 миллион токенов в месяц дают)
Это кстати еще не все! У болта есть опенсорс версия - bolt.diy ⚠️ https://github.com/stackblitz-labs/bolt.diy котороый можно заставить работать полностью бесплатно (Ollama или бесплатные модели с опенроутера)
Как-то так, наваливайте реакций еще и я поделюсь с Вами новыми крутыми инструментами + буду дальше писать про тайпскрипт... ну и все остальное ♥️Берлога программиста | Чат
А вообще есть инструменты лучше курсора, но про них мало пишут. Потом поделюсь, но вот только пока мне лайки плохо ставите…
Мысли про Cursor и подобное
Безусловно курсор сейчас выдает весьма вменямый код (почти), однако есть пара моментиков:
1️⃣ Если Вы начинающий разработчик то бейте себе по рукам каждый раз когда возникает зуд сгенерировать что-то. Да, звучу как старый дед, НО если у вас в башке нет базы, то то, что вам негенерит нейронка Вы не сможете довести до ума: даже если все алгоритмы оптимальны и код хорош, то не пописав несколько лет код ручками не будет сформировано системного мышления и не получтися создавать архитектуру масштабного ПО. А если нейронка выдаст бред? Как поймете где узкое место кода, почему валятся запросы? И так далее.
Вопрос про бабки: тогда чем Вы отличаетесь просто от примитивного оператора чатжипити и зачем вообще Вас нанимать?
2️⃣ Вы уже умеете (и, возможно, неплохо) писать код, но стали частенько грешить автоматизацией - Выши навки будут отсыхать как виноград на солцне превращается в изюм: если вы не будете 50/50 (хотя бы писать) код ручками - мозг превращается в орешек.
Я сейчас подобное замечаю повсеместно. Мозг потребляет пятую часть энергии (а занимает несколько процентов от всего тела места), его задача при первой же возможности переходить на "пониженные обороты" и меньше жечь ккалорий - это не я Вам говорю, а школьная, блин, биология.
Деньги в Айти платят НЕ по принципу "рубли за строчки", а за то насколько Вы прикладываете способность Вашего "котелка варить" к рабочим задачам.
Резюме поста: нейронки это хорошо. Отдавать работу мозга на аутсорс плохо: если Вы новичок, то Вас никуда такого красивого не возьмут работать, а если даже есть опыт - навыки легко профукать и вылететь из индустрии как пробка из бутылки шампанского.🔥 - жду под постом!!! Берлога программиста | Чат
Отлично, будет! А пока накиньте лайков сюда https://t.me/DeveloperBerloga/4079 - покажите заинтересованность🤣
Кстати можем еще чуть позже AI-агентов пописать, вы как?
TypeScript - введение (Часть 2)
Часть 1 - тут [ссылка]
Так а почему транспилятор-то? Многие называют TypeScript компилятором, но по сути он не компилирует в машинный код, как C++ или Rust. TypeScript транспилирует — то есть переводит один язык в другой: из TS → в JS. Это нужно, потому что браузеры и Node.js понимают только JavaScript.
Ну допустим мы поняли зачем, прикольно... А взять где? Устанавливается он максимально просто:
npm install -g typescripttsc -vЕсли видите версию — поздравляю, всё работает! 🎉 (подразумевается если уж вы пошли заниматься тайпскриптом то уж что такое командная строка и npm знаете, если нет, то как-то дайте понять комментами под постом) Теперь создадим первый файл, допустим hello.ts и напишем:
function greet(name: string) {
return Hello, ${name}!;
}
console.log(greet("Василий"));tsc hello.tsПосле этого появится обычный hello.js, который можно запустить в Node.js или браузере. Примеры базового использования
// примитивные типы
let a: number = 10;
let b: string = "hello";
let c: boolean = true;
let d: null = null;
let e: undefined = undefined;
// функции
function sum(a: number, b: number): number {
return a + b;
}
// интерфейсы
interface User {
id: number;
name: string;
}
const u: User = {
id: 1,
name: "Alex",
};
