React: наглядное пособие для начинающих. Создаем свой компонент без знаний JavaScript

[Sano000]

Пособие наглядное, но как создать свой компонент так и осталось непонятным.

Код по ссылке новичок не осилит тем более.

[olepav]

Приветствую. Код по ссылке уже не совсем для новичков, но автор статьи так и говорит)

[jakushev]

Вот только не думайте, что я — тролль. Занимаюсь низкоуровневым программированием железяк на Си и ASM больше 20 лет, а в WEB — максимум простенькая страница, немного JS для размещения внутри железяк. Много слышал про React, но так как не профильное, даже не смотрел. В статье обещали «совсем для маленьких». Но я, посмотрев пример многого не понял. Где выполняется код? Откуда import? Этот код «компилируется» в нативный JS на стороне сервера, или можно получить статически сгенерированный и просто его отдавать из кэша («скомпилированного» файла)? Если компилируется, сколько добавляется оверхеда, можно ли отдельно хранить общие компоненты реакта? Это очень критично, если у тебя объем под страницу — десятки килобайт. Конечно, можно доки почитать, но ответы помогут быстрее понять, надо оно мне в проекте или нет… Тем более, что мои хотелки уже не совсем про «Hello, World».

[SatyrArs]

> Вот только не думайте, что я — тролль.
Только если не будешь троллить, по рукам?

Я понимаю твой ход мыслей, но надо делать поправку на профдеформацию от 20 лет низкоуровневого программирования с: Статья явно не направлена на тех, кто настроился заниматься фронт-эндом профессионально. Наоборот, это такое первое знакомство для тех кто «слышал, но что это такое не знаю». Ну и банально прими во внимание то что цели у таких начинающих Реактёров в большистве несколько иные — особенно если это графические дизайнеры, только-только выходящие на сушу. Куда чаще это будут более 'приземлённые', практические задачки типа «подтянуть данные» или «приделать анимацию» чем оптимизировать килобайты. Так что да, я думаю для твоих аппетитов надо грызть доки с:

Без шуток, повсеместно встречаю как их хвалят и рекомендуют начинающим: reactjs.org/docs/getting-started.html

[jakushev]

Это да, просто прежде чем курить мануалы, хотел понять, стоит ли смотреть в эту сторону или достаточно будет старого доброго натива, без всяких сторонних либ. Как делал, обычные HTML + CSS + JS, потом все это гугловским обфускатором сливал в один HTML, именно для оптимизации размера. Далее все закатывал в самодельную RO ФС, в том числе и картинки и на выходе или массив Сишный или бинарник. Вот интересно, во что превратиться код примера, без картинок, после интеграции Реакт либы… И вообще, можно ли это статически…

[Tolomuco]

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

[jakushev]

Спасибо за ответ. Думаю, в моих простейших задачах от Реакта будет больше вреда, чем пользы…

[prognosis]

Надо или нет — зависит от конкретных хотелок. Для одних реакт — что доктор прописал, с первой строки. Для других — палки в колеса. Совсем для маленьких подразумевает не вникать в специфику, на что статья и упирает. Если хочется понимания, как оно работает — нужно прыгать в кроличью нору. Код компилируется на этапе внедрения и отдается уже скомпилированным, компилировать на лету — экзотика. Код компилируется на стороне локальной машине разработчика или сервера на этапе внедрения. Оверхед самого реакта — условно 50кб в gzip. В реальном проекте ими можно принебречь, остальные библиотеки экосистемы и пользовательские компоненты отъедят значительно больше. Совсем для маленьких подразумевает не вникать в специфику. Те, кто хотят, могут прыгать в кроличью нору. Общие компоненты разбиваются на общие файлы, которые переиспользуются между страницами, это настраиваемо и за это отвечает сборщик (Webpack). Create React App дает вменяемо сконфигурированный проект из коробки. Для тонкой настройки — опять же, в кроличью нору.

[SatyrArs]

извинитите *blush*

[black1277]

У меня такой вопрос: таблица (Table, tr, td) — это цельный один компонент или нужно разбивать её на отдельные компоненты — шапка, тело, футер, строки, ячейки? Если цельный компонент — то выходит громоздко, если нужно разбивать — то каждый отдельный компонент не переиспользуешь без самой таблицы… Короче, непонятно как быть.

[prognosis]

Нет опыта работы с JavaScript? Не беда!

Я помню, что когда-то мне шутка про «программиста на языке jQuery» казалась смешной, но уже не могу вспомнить, почему.