React — это популярная библиотека на Javascript, которая позволяет разработчикам создавать гибкие и интерактивные пользовательские интерфейсы. React реализует использование одностраничных приложений, обеспечивая более плавный переход между веб-контентом. Многостраничные приложения, похожие на пользовательский интерфейс на Amazon и ebay, загружают свои страницы каждый раз, когда пользователь нажимает на разные ссылки. Существует несколько популярных современных приложений, созданных с использованием React, таких как Twitter, Facebook, Netflix, Tesla, Github, Codeacdemy и Paypal. Содержимое этих веб-приложений отображается динамически. Эти динамические приложения React структурированы в так называемые компоненты.
Что такое компоненты в React?
Компоненты являются строительными блоками веб-приложений. Компоненты разделяют пользовательский интерфейс на многократно используемые и независимые части, импортируя и экспортируя различные компоненты. Компоненты также являются функциями или классами, которые имеют возможность передавать различные данные дочерним компонентам в качестве параметров.
Преимущества использования компонентов:
Повышение производительности
Повторное использование
Разработка веб-приложений стала проще
Многие преимущества компонентов помогают создавать эффективные приложения. Компоненты могут содержать несколько компонентов внутри себя. Это также помогает в создании более сложного дизайна и взаимодействия в приложениях. То, что компоненты имеют возможность получать свойства, помогает писать более чистый код.
Что такое реквизит?
Props — это сокращение от свойств и свойств, и мы можем думать о нем как об объекте, который несет с собой данные, которые можно использовать в нашем функциональном компоненте. Родительские компоненты передают данные в виде реквизита своему дочернему компоненту в качестве аргумента. Теперь давайте поговорим немного больше о том, как мы можем использовать свойства в наших компонентах.
Как использовать свойства в компоненте:
Как показано на изображении, данные, извлеченные из родительского компонента ListingsContainer, передаются в качестве реквизита. ListingsContainer теперь может передавать список данных, который является реквизитом {listings}, компоненту ListingCard. Затем компонент ‹ListingCard /› получит итерированный список исходных данных. Опора списка {списков} станет параметром компонента ListingCard. Теперь компонент карточки листинга может отображать любые данные из реквизита для отображения в карточке каждого листинга.
Свойства, передаваемые дочернему компоненту в качестве параметра:
Как показано ниже,с помощью реквизита {listing} мы можем создать отдельную карточку, которая отображает изображение, описание и местоположение объявления.
Вывод:
Подводя итог, компоненты и реквизиты работают рука об руку в приложениях React. Компоненты имеют возможность передавать свойства дочерним компонентам. Реквизиты используются в нескольких компонентах наших приложений, что помогает поддерживать чистоту нашего кода.
