Компоненти React

Що таке компонент?

Компонент є основним будівельним блоком структури вебсайту. Він зазвичай представляє одну функцію або частину користувацького інтерфейсу і має свою ізольовану структуру. Компоненти приймають різні вхідні дані і генерують специфічні вихідні дані, що робить вебсайт динамічним. Крім того, вони мають модульну структуру і можуть бути багаторазово використані.

Структура JSX

JSX — це структура в JavaScript, яка дозволяє створювати користувацькі інтерфейси, пишучи синтаксис, подібний до HTML. Вона використовується для визначення компонентів React.

function Header(){  
 return(  

 Header Component 
    );   }   export default Header; ```  

У JSX імена компонентів пишуться з великої літери. Це робиться для уникнення плутанини з HTML-тегами при використанні компонента. Основна структура компонента виглядає як вищенаведений приклад. Створюється функція з ім'ям компонента, а вміст компонента визначається у межах оператору return. `export default ComponentName` використовується для того, щоб дозволити його використовувати в інших компонентах. Коли компонент викликається в іншому компоненті, достатньо написати його, як HTML-тег. Оскільки компонент Header не має дочірніх елементів, його можна рендерити просто як `<Header />`.  

function App(){
const name = "Sima"
const isLogged =true;
return(
<>
{name}

{ isLogged && `Hi ${name}`}
{ !isLogged ? `Hi ${name}` : 'Please Log In!'}
    );   

} ```

Ми використовуємо фігурні дужки {} для виклику та використання визначених змінних у JSX. Умовні вирази також можна створювати за допомогою тернарних операторів ? : або логічних операторів, таких як && і ||.

Підсумовуючи, компоненти є важливими будівельними блоками вебсайту чи вебдодатка, представляючи ізольовані, багаторазово використовувані частини користувацького інтерфейсу. JSX надає зручний синтаксис для створення цих компонентів, поєднуючи елементи, схожі на HTML, з логікою JavaScript. Завдяки визначенню компонентів з іменами, що починаються з великої літери, та використанню модульних структур, розробники можуть створювати динамічні, багаторазові та легкі для підтримки користувацькі інтерфейси. За допомогою пропсів (props) та умовного рендерингу компоненти адаптуються до різних станів та виходів, підвищуючи інтерактивність і чуйність вебсайту.

Перекладено з: React Components