Можете кратко пояснить что такое jsx и как его использовать

в проекте? Раньше работал на чистой js+html+css и не понимаю как подключить jsx к уже работающему проекту. Библиотека реакта сама должна его "понять" или его "откомпилировать/преобразовать" сначала нужно?

ok google, “jsx loader”

Синтаксический сахар этот jsx клипать htmlку и да он компилится в createЧтототамЧтотомамElement

Спасибо! А этим JSX вообще пользуются? Уже не первый раз хочу попробовать перейти в реакт и каждый раз руки опускаются на этом месте в учебнике! Поставил перед собой задачу один из небольших своих СТАРЫХ проектов на чистом JS+HTML перевести на реакт... Пользуюсь Notepad++(на порядок шустрее остальных IDE и позволяет легко работать сразу в нескольких слабо-связанных проектах). Какой "разумный минимум" ИНСТРУМЕНТОВ мне понадобиться (прежде чем браться за учебники)?

Конечно пользуются. Если ты про оф.доку не надо её зубрить просто бери и пиши код как в учебнике потом пробуй сам, потом придумай задачу и реши и такими шагами перепишешь своё приложение под react. Но notepad это конечно жёстко VScode попробуй я раньше тоже на sublime сидел.

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

Синтаксическое повидло

Ни разу не пользовался и тебе не советую. Пишу код в блокноте и не знаю проблем.

А что нужно для использования JSX? В учебниках начинают с установки Ноды, Вебпака, создания из ноды нового реакт-проекта... Иногда сразу предглагают правильно VScode натроить... А потом долго и нудно описывают "как крут реакт и насколько он круче всех остальных", а потом быстро начинают строчить малопонятных код! Я же хочу в готовый проект подключить библиотеки реакта и по немногу начать переводить код проекта с "ванилы" на реакт. ...У меня модифицированный Notepad++. С плагинами (включая "самописный") он не сильно от VScode отстает, но работает на порядок быстрее, не пытается привязать меня к "папке проекта" и вообще ограничений поменьше. Да и в раскраске кода поддерживает цвет ФОНА (в отличии от VScode - пожалуй главная причина нежелания переходить на него - сила привычки - глаза "без фокусировки" различают "красное слово на желтом фоне" от "красного на розовом") .

npm create vite@latest И хотя бы разберись как hello world вывести

Такими извращениями я конечно не занимался, но думаю погуглить не помешает 100% такие ещё есть

В готовый проект тебе не надо подключать реакт, в твоем случае проект надо переписывать

В хелпах пишут что реакт можно "подключать в готовые проекты" просто подключив 2 библиотеки и нужный код. Судя по тому что я увидел, это вполне реально... Даже ХелоВорд вроде заработал (без JSX). Теперь хочу начать "усложнять" и по немногу переводить мои ванила-компоненты внутрь реакт-компонент.

Тебе это не стоит делать, либо ванильный js, либо уже реакт. Какой смысл тогда добавлять реакт?

в смысле какой, человек проект мигрирует или ему вечно на ванильном джсе фичи дописывать

Я устанавливал вебпак, прописываешь конфиг, чтобы бабель транспилировал jsx. В общем-то все

Хочу некоторые компоненты "отвязать" от проекта и использовать в нескольких проектах повторно. Насколько я понял, в Реакте это делается проще чем в ваниле. И готовых компонент больше. Да и вообще хочу с Реактом разобраться - нашел как-то исходники простого редактора svg (векторных) картинок на реакте в ОДНОМ файле и запутался в компонентах которые там используются - тяжело читать код, не зная какие классы "где-то рядом поискать надо", а какие "стандартные для реакта".

А ты хоть сам понимаешь, для чего тебе это все?

Примерно... Раньше в основном бэком занимался, а для фронта ванилы хватало. За годы фронт-проекты "раздулись" так что их бы пора начать "нарезать на подпроекты". Написал кучу своих компонет, но их подключение в новый проект происходит не "в одну строчку", а иногда в несколько экранов кода. Для компонент чаще приходится тащить еще и HTML-куски, которые вручную вставляются "в то место где должен быть отображен компонент". Под каждый компонент еще и CSS файлы нужно "пакетом" добавлять. И на каждый проект уровня ToDo надо это все заново с компонентами проделывать... Хочу это хоть как-то упростить! Подозреваю (вычитал) что большая часть всего этого в реакте "из коробки" делается. Все сразу "переписать" - не реально! На не одну неделю придется "все забросить". Хочу "постепенно" это делать по мере изучения возможностей реакт...

Я правильно понял, что ты хочешь перенести проект на реакт, не зная реакт?

Нет, хочу перенести реакт не проект на проект зная

ИЗУЧАЯ реакт в процессе... За одно пойму подходит ли он мне в принципе, или лучше назад в ванилу вернуться и придумать там свои методики для "оформления компонент". Сам по себе реакт мне не нужен - заказов (именно) "под реакт" у меня нет! Просто хочу с его помощью попытаться упростить поддержку своих старых проектов. А если подойдет... то новые можно будет целиком на нем начать писать... посмотрим! Пока что мне предстоит "первый шаг" сделать - понять как компоненты грамотно оформлять и понять каким боком здесь JSX 😀

Так сделай реально первый шаг вместо пятнадцатого и почитай про реакт в целом)

"в целом" все хеплы начинают с "установки IDE и среды работы" и нудного описания насколько это круто и как оно "совместимо с прошлыми версиями". А заодно дают ссылки на ЧАСОВЫЕ видео на английском языке на что-нибудь вроде "мы тут добавили хуки, но сначала посмотрите минут 20 на наши графики как выросла популярность реакта на сайтах заказов работы и в поиске гугла"... Поэтому у меня есть ГОТОВЫЙ проект(максимально простой), и я хочу его ЧАСТИЧНО перевести в реакт! Не "переписать с нуля начав новый в новой папке и среде запуска", а именно "плавно перевести"! Заодно разберусь как можно СОВМЕЩАТЬ в проекте ванилу и реакт не переходя целиком в реакт!

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

Слышали про "круглого коня в вакууме"? Ну научусь я "туду" писать на реакте, ну формочки сделаю, ну кнопочкой научусь счетчик увеличивать. Круто конечно - даже в резюме можно написать "выучил реакт". Я же хочу не выбрасывая ванилу, ЧАСТЬ функционала переложить в реакт. Причем для меня важно чтобы мои компоненты можно было не "переупаковывывая" в реакт научить совмещать с компонентам на реакт. И хорошо отлаженная логика не на одну сотню килобайт ванилы должна просто "начать выводить данные на реакт-компоненты". И "ползунок" который на ваниле оформлялся в страницу кода должен быть переписан на 3-4 строчки в реакте, но обрабатываться в старых многоэкранных компонентах с логикой. Например для страницы только "попап с настрйками" на реакте сделать не трогая все остальное... И при этом никакой новой IDE с "подсветкой ошибок"

Я бы забил на старые проекты, и просто писал на реакте с Vite

Это лишь значит что у вас лишь "одноразовые" проекты! А у меня проекты "на многолетней поддержке" в которые время от времени дополнения нужно вносить и ошибки (логические) исправлять.

А почему чтобы писать новые, обязательно должен подойти сначала к старым ?

это примерно как «вот у меня куча чертежей на бумаге, я тут наслушался про ваш этот крутой автокад, но осваивать его отдельно не хочу, хочу сразу встроить работу с ним в свои чертежи. И чертежи с бумаги должны легко интегрироваться с чертежами в автокаде и обратно, и при этом никакой сторонней помощи от автоматики я не приму» то есть вместо осваивания системы, где и так сложно сделать правильно, и не поотстреливать себе ноги, и куча холиваров идет по этому поводу сразу начинать интегрировать ее и всю ее экосистему с тем, с чем она совместима прям оч сильно со скрипом, абсолютно не понимая ее принципов работы и возможных проблем (там все слегка сложнее, чем кнопочка со счетчиком) и при этом осознанно обрезать себе автоматическую проверку ошибок в этом нелегком деле ну кхе флаг в руки, барабан на шею, что могу сказать

Не путайте автокад с БИБЛИОТЕКОЙ реакт! Реакт это не "среда работы", а "подключаемый фреймворк". И даже с автокадом "сразу взять и все чертежи перевести в автокад" не реально (иногда эти архивы чертежей занимают небольшое 2-3х этажное здание). Но надо например "новый фасад к старому зданию" с нуля спроектировать (типа моего "попапа с настройками к сайту) - вот эту "примочку" можно уже на автокаде, а не "на бумажке". Принципы работы должны быть хорошо описаны в хелпах и самоучителях! На любую ошибку есть гугл "по названию ошибки", а не "подсветка в IDE" Планирую (сейчас в процессе) сначала в проект добавить эту самую "кнопку со счетчиком" (но оформленную в виде реакт-компонента) и научиться манипулировать этой кнопкой "снаружи" (из ванилы) и снаружи ловить "нажатия кнопки в реакте". Много лет работаю в Notepad++ с ошибками в консоли (веб или ноде) и не пользуюсь "подсветкой ошибок в IDE". Ошибки чаще в логике а не в "не закрытой скобке". А ради реакта переучиваться под неудобный IDE...

реакт это не фреймворк

ну если хочеш то блокнот тебе в помощь, можеш хоть в ньом код писать, всеравно всю работу по компиляции делает вебпак, а там пофиг с консоли или с IDE npm start делать

то, что вы пишите про иде, как раз и показывает, что вы ими не пользовались отсюда и примитивное представление о них как о искателях незакрытых скобок современные нормальные иде тяжеловесны не просто потому что их авторы кодить не умеют там идет анализ не только синтаксически, но и по смыслу самого кода пример с бэкенда из реальной жизни в джаве у стримов (похоже на map и filter в жс) есть метод peek что-то типа forEach по внешнему виду и многие новички его начинают использовать, удобно же и только иде им подсветит, что этот метод предназначен только для дебага и в рантайме может спокойно пропускать часть элементов стрима (например, массива) и применяться не ко всем то есть, логику писать в нем нельзя эта ошибка не вывалится сразу, она выстрелит в один прекрасный день, когда рантайму захочется более того, эта ошибка вообще не вывалится, она молча превратит часть элементов в мусор каков шанс, что это заметит в коде человек, проштудировавший всю доку языка и знающий этот прикол? И не просто заметит, а обратит внимание а иде это сразу желтым подсвечивает и в подсказке пишет, типа внимание, возможен отстрел ноги и это пример из строго типизированного языка надо ли говорить про жс? иде нужны, чтобы находить такое ДО запуска потому что эти ошибки могут выстрелить через месяц и молча

Почти все хелпы начинают обучения с установки IDE, а реакт довольно настойчиво навязывает VScode. А сюда я пришел потому что не понял как в старый проект прикрутить JSX и что это вообще такое... находил примеры которые вообще JSX файлы прямо в HTML "подключают". Толи бабель сам все проводит на стороне клиента, толи за это сервер отвечает в момет передачи в HTML... У меня пока не получилось JSX использовать.

jsx ради jsx?

установи себе next js и постепенно туда переноси , это самый простой способ

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

не ну "бабль" то тулза чтогбьі jsx в js превратить и идт в вебпаке, и исполняется при билде

я это полчаса назад предлагал уже, не сработало)

Много лет проработал в IDE и знаю их плюсы и минусы. В JS предпочел отказаться от него. Что в Ноде, что в браузере. IDE тяжеловесны потому что мультиОСные и мультиЯЗЫЧНЫЕ. А через плагины там можно даже подключить ЧатГПТ прямо к коду. Смысл кода обычно ТОЛЬКО у меня в голове. И чем сложнее архитектура проекта, тем сложнее ее к IDE подключить. А уж когда одновременно приходится настраивать и фронт(нода) и несколько ЗВЕНЬЕВ в системе микросервисов - ни одна IDE просто не справляется, хотя для этого хватает открыть 3-5 файлов в блокноте++ и обрабатывать НЕ СЛОЖНЫЕ ошибки "в голове". Вы описываете ЛОГИЧЕСКИЕ ошибки, а меня интересует реакт не с точки зрения логики программирования, а только как "отрисовщик HTML". Для логических ошибок у меня свои средства отладки. А функциональное программирование предпочитаю вообще обходить стороной - там вероятность не заметить ошибку (вроде описанной вами) на порядок выше.

Нет! Потому что в большинстве хелпов с этого начинают. А я еще не знаю с какой стороны этого реакт-слона надо начинать кушать ))

начинай не с хелпов 5 летней давности а сразу с некста , знание дрвених технологий в 2023 тебе не сильно поможет)

React.dev удачи

А что это еще за некст и какое он имеет отношение к реакт?

npm create vite@latest Уже в десятый раз

Интересно какими ide ты пользовался, потому что те проблемы о которых ты пишешь, успешно решены в современных ide. А обработка ошибок в голове, не лучше чем их обработка в чат гпт

npx create-next-app@latest

Советчики в чате как всегда нажигают

это штука превращающая волшебным образом реакт компоненты (которые гугл не понимает и не будет индексировать ваш сайт) в статику генерируя реальные страници

Еще раз... многозвеньевая архитектура из нескольких докеров. Любая модификация в одном из них рано или позно дойдет до фронта и там тоже надо менять. По сути "цепочка" изменений коснется 4-5 файлов из РАЗНЫХ проектов, которые проще открыть ОДНОВРЕМЕННО и править в соседних "закладках". Ни одна IDE их не "увязывает", а большинство наоборот пытается и ругается на несостыковку переменных из РАЗНЫХ проектов.

так а на чем ты работаешь? с чем у тебя больше всего опыта

Волшебства никакого нет, про все методы и как это работает можно почитать, это все существовало ещё до некста

Может виноваты не ide? А просто ты делаешь дичь? Если то, что ты делаешь является стандартной практикой в разработке, ide должны это поддерживать

Ну поставил! И что с этим дальше делать????? Ни в одном хепле даже нет описания как это в браузере показать! Пытается отобразить как "корневой" веб-сервер, но с "node ." Не запускается. npm i тоже ошибку выдает. В браузере ругается что xml не знает чем открывать.

теперь пиши npm run dev

5 файлов проще всего открыть в Notepad++ как обычный подкрашенный JS текст.

у тебя вообще есть опыт работы? на чем ты пишешь?

некст я бы сейчас если и советовал, то старый с нового там все на стенку лезут который с appDir куча багов, водопады в 3 раза дольше на загрузке чанков, не работают даже базовые фичи и тд

это да , нужно выбирать pges я забыл упомянуть

Обычно идет деление на нескольких разработчиков - фронта и бэка. Оговаривается стандарт каждого АПИ, тестируется АПИ на каждом выходе. А у меня "а почему бы не переименовать/упростить ветку апи на....", ой при этом и здесь надо менять, и здесь, и здесь "попывет", и здесь не забыть... Всего 4-8 мест в 3-6 файлах, но в РАЗНЫХ проектах. Причем часть отвечают за бэк, а несколько за РАЗНЫЕ "зависимые" проекты фронта. В голове эти "связи" удержать проще чем "прописать" их в IDE

твой путь это php )

Node + ванила во фронет! Сейчас хочу фронт ЧАСТИЧНО перевести на реакт. Не устанавливания никаких новых IDE и не переписывая все мои проекты!

ты хочешь сказать что ты делал бэк на ноде через ноутпад?

да! Noteapad++ c несколькими (самописными) плагинами. Отдельно "сборщики", оптимизаторы, обфускаторы, заливка в релиз и тд...

хз я вебшторм лично юзаю он быстрее лучше , поиск работает , с гитом удобнее , ноутпад последний раз открывал в 2016 , потом был саблайм , вскод , теперь вебшторм)

закат солнца вручную или лепим IDE курильшика из тулзы, которая для этого не предназначена

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

В Ноте тоже поиск шикарный. Гит не особо нужен (я не в команде - только "для архивов"). И раскраска удобная, шустрый (раз в 5 быстрее VScode - он на С++ а не на "JS в оболочке"). Не лезет в проверку орфографии и "совместимость переменных". Если бы у меня был один проект, мне бы не хватало "более плотного контроля" за именами, но учитывая что ОДНОВРЕМЕННО открытых проектов много...

ага, гит не нужен это уже интереснее, а как ты на сервер заливаешь свое чадо?)

ftp.

по ик-порту

вопрос был в скорости открытиях независимых файлов из разных проектов. Включая "ой мне срочно в давно-забытом CSS файле надо кое-что поменять - работы на 15 сек".

у меня вскод за 5 секунд открывается с нуля

Это тот самый видос на Ютубе, где чел просто сравнивал скорость открытия файлов в виме/вскоде и тд?)?)?)

за это специальные сборщики отвечают. Скорость быстрее чем гитом в разы. (многослойная оптимизация и отправка только измененных прямо в докеры)

а как у тебя рефактор в Ноте проходит?