#День 2 изучения React JS с [Scratch]

После продуктивного дня 1 , я смог разместить скелетный проект react на localhost.

Теперь, пришло время узнать больше о сочных вещах, День 2 изучения работы с файловой структурой React.

JSX

Рассмотрим это объявление переменной:
const element = <h1>Hello, world!</h1>;

Этот забавный синтаксис тегов не относится ни к JavaScript, ни к HTML.

Он называется JSX, синтаксическое расширение JavaScript.

JSX создает "элементы" React.

Проще говоря, мы можем хранить UI в переменной и использовать эту переменную для отображения UI без копирования и вставки того же HTML-кода.

Официальные док-ты : https://reactjs.org/docs/introducing-jsx.html

Компоненты

Компоненты похожи на функции JS, они принимают параметры, называемые "реквизитами".

Это самая лучшая часть, потому что здесь мы деструктурируем пользовательский интерфейс на более мелкие части, например: навигационная панель, футер, карточки, боковая панель, разделы и т.д.

Все эти мелкие части оформляются в собственный файл .js, и при необходимости эти файлы вызываются в основной файл App.js для рендеринга мелких сегментов с целью создания полного пользовательского интерфейса.

Пример: Рассмотрим пользовательский интерфейс мобильной версии Instagram.

У нас есть:

Заголовок, содержащий [логотип, значок создания поста, значок DM],

Истории, содержащие [Фотографии профиля, имя пользователя].

Лента, содержащая [сообщение соответствующего типа, имя пользователя, изображение профиля, like, share, comment, save, caption, add comment etc].

Нижний колонтитул, содержащий [Главная, поиск, ролики, уведомления, профиль].

Эти разделы создаются в собственном .js файле Header.js и импортируются в App.js, чтобы отобразить заголовок для пользователя.

Реквизиты

Реквизиты - это объекты/параметры, передаваемые компонентам.

Обычно используются для динамического рендеринга некоторых вещей.

Его использование аналогично использованию и доступу к объектам.

Например: массив под названием student содержит список студентов с их именем, возрастом, классом. Мы можем получить доступ к отдельному атрибуту как prop.student.name.

Это все для второго дня, спасибо, что заглянули ❤.