Поэтому в этой серии я решил следовать порядку объяснения концепций, указанному в собственном руководстве по документации React. После основного введения вводится идея JSX.
JSX — это, по сути, код, который создает компоненты React и, следовательно, пользовательский интерфейс приложения/веб-сайта, который вы создаете. JSX используется для объединения реализации как логики приложения (функций), так и разметки (внешнего вида), поскольку он очень похож на HTML, но используется в среде Javascript и с функциональностью Javascript.
const element = ‹h1›Привет, мир!‹/h1›;
Похоже, вы только что поместили HTML в Javascript, верно? И это, по сути, то, что JSX. Идентичен HTML, с небольшими изменениями, о которых мы поговорим позже.
Чтобы использовать JSX в выражениях Javascript, вам просто нужно убедиться, что каждый элемент HTML закрыт, и тогда он будет функционировать как значение переменной. Чтобы использовать значения Javascript в JSX, вы заключаете имена переменных и логику в фигурные скобки в разделе HTML.
const name = ‘Джош Перес’;
const element = ‹h1›Привет, {name}‹/h1›;
JSX должен стать объектом javascript. Это означает, что в Javascript вы можете использовать JSX, как обычные объекты в Javascript.
return ‹h1›Привет, Незнакомец.‹/h1›;
Тонкие различия между HTML и JSX проявляются, когда вы пытаетесь добавить атрибуты к элементам HTML.
Основное различие заключается в том, как вы указываете классы. Вместо того, чтобы использовать это:
‹div class="message"›Это сообщение‹/div›
В JSX вы используете это.
‹div className="message"›Это сообщение‹/div›
Вы можете заметить разницу? Вместо того, чтобы назначать классы через «класс», вы просто используете «имя_класса». Вот и все, довольно просто. Верблюжий регистр применяется к большинству имен атрибутов, поэтому «tabindex» становится «tabIndex».
Вот и все, самые фундаментальные концепции JSX. В следующий раз мы начнем изучать рендеринг, так что следите за обновлениями!
