Как перестать заниматься рутиной и стать ближе к нормальному фронтэнду
Если вы не умеете верстать — сейчас самое время взять курс по вёрстке
Продолжаем изучать теорию. Практика будет через пару уроков.
Итак, вы верстальщик, но всё чаще стали замечать косые взгляды в свою сторону, да и вообще, понимаете что вёрстка в .html-файлах и потом перегон в Реакт это как-то не очень оптимизировано в рабочих процессах. Что делать?
Во-первых, обязательно изучите Терминал и Гит, если ещё не — они вам понадобятся.
Во-вторых, не бойтесь. Больно не будет. Чтобы верстать на Реакте, даже джаваскрипт особо знать не надо.
Поехали!
Вы знаете, что ХТМЛ это сабсет ХМЛ? XML это формат данных. Формат данных нужен, потому что с жестким форматом легче работать с данными: вы всегда знаете как и до чего достучаться.
JSX это тоже сабсет ХМЛ, он от него отнаследовал открывающие и закрывающие теги, ну и атрибуты в них. В документации Реакта об этом подробно рассказано со всеми примерами.
Скорее всего, вы слышали (или даже использовали) про всякие шаблонизаторы типа pug, haml, Handlebars.js и Джсх может напомнить вам о них, но это не шаблонизатор.
Шаблонизаторы работают достаточно тупо: берётся строка (типа <div>{{title}}</div>), в ней заменяется {{title}} на реальные данные и получается готовый ХТМЛ. Шаблонизаторы заменяют — вот что нужно помнить.
В Джсх важные первые две буквы: это самый настоящий джаваскрипт. То, что вы пишете в джсх, будет отработано как настоящий джаваскрипт и это даёт безграничную мощь — вы можете писать там что угодно и вам не нужно будет подключать какие-нибудь плагины или директивы, чтобы расширить ваш шаблонизатор.
Окей, с фундаменталикой закончили, давайте перейдём к отличиям Джсх от ХТМЛ.
Так как Джсх это Джс, то он немного отличается от ХТМЛ.
Да, если ХТМЛ5 ушёл от <img />, то Джсх к ним вернулся: иначе парсер не поймёт как с этим работать.
Так как в Джсе есть классы, то атрибут class="" нужно использовать как className="". То же самое и с for — это резервное слово для циклов.
data-x или html-for не сработают, все атрибуты должны быть в camelCase варианте. Особенно это заметно в Свг: всякие stroke-width должны быть как strokeWidth.
Забегая чуть вперёд (мы об этом поговорим в следующем уроке), скажу что Реакт построен на компонентах: вы можете писать любые компоненты и их использовать. Нюанс в том, что ваши компоненты должны быть в PascalCase, иначе парсер будет думать что это хтмл-тег и всякие <myComponent /> будут распознаваться как <my-component />, чего в хтмл и не существует.
Это всё! Сегодня мы прошлись ещё немного по теории и изучили Джсх, его отличия от ХТМЛ и, конечно же, обычных шаблонизаторов. Следующий урок — про базовый Джаваскрипт.