Создание компонента Vue и React: основы для начинающих

Создание компонента — это базовый навык во Vue и React. Компонент описывает независимую часть интерфейса, которую можно использовать повторно. В статье разобрано, как создать компонент во Vue и React, передать данные через props и работать с состоянием.

Содержание

1. Что такое компонент
2. Чем отличаются компоненты Vue и React
3. Создание компонента во Vue
4. Создание компонента в React
5. Подключение компонента в приложении
6. Как передавать данные через props
7. Состояние и хуки компонента
8. Частые вопросы о компонентах

Разберём основы создания компонентов по порядку. Материал подойдёт начинающему разработчику.

Что такое компонент

Компонент — это независимая часть интерфейса. Его можно использовать повторно в разных частях приложения. Компонент объединяет разметку, логику и стили в одном месте.

Компоненты дают несколько преимуществ при разработке.

• повторное использование кода в приложениях;
• разделение сложного интерфейса на части;
• простая поддержка и обновление кода;
• понятная структура проекта.

И во Vue, и в React интерфейс собирают из компонентов. Каждый компонент отвечает за свой блок.

Чем отличаются компоненты Vue и React

Vue и React создают компоненты по-разному. Vue использует однофайловые компоненты с тегами template, script и style. React описывает компонент функцией и синтаксисом JSX.

Таблица показывает основные отличия компонентов.

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

Создание компонента во Vue

Во Vue компонент описывают в одном файле. Файл содержит три части: template, script и style. Такой формат называется однофайловым компонентом.

<template>

<div class=»card»>

<h1>{{ title }}</h1>

</div>

</template>

<script setup>

const props = defineProps({ title: String })

</script>

<style scoped>

.card { border: 1px solid; }

</style>

Тег template содержит html-структуру компонента. Блок script задаёт логику и принимает props. Тег style scoped описывает css только для этого компонента.

Создание компонента в React

В React компонент чаще создают функцией. Функция возвращает разметку через return и синтаксис JSX. Любой компонент должен использовать return для вывода разметки. Затем компонент экспортируют через export default.

import React from «react»;

function Card(props) {

return (

<div className=»card»>

<h1>{props.title}</h1>

</div>

);

}

export default Card;

Здесь import подключает react в файл. Функция Card принимает props и возвращает div с заголовком h1. Имя компонента должно начинаться с заглавной буквы.

Важно! Имя компонента всегда пишут с заглавной буквы. Иначе React примет его за обычный html-тег.

Подключение компонента в приложении

Готовый компонент нужно подключить в приложении. Его импортируют из папки components и используют в разметке. В React компонент рендерят в DOM.

import { createRoot } from «react-dom/client»;

import Card from «./components/Card»;

const root = createRoot(document.getElementById(«app»));

root.render(<Card title=»Привет» />);

Здесь import подключает Card из папки components. Метод createRoot находит элемент app в DOM. После этого render выводит компонент на страницу. JSX позволяет использовать JavaScript прямо в разметке.

Как передавать данные через props

Props передают данные от родительского компонента к дочернему. Это делает компоненты гибкими и переиспользуемыми. Значения props доступны только для чтения.

Передача данных немного отличается во Vue и React.

• во Vue props объявляют через defineProps;
• в React props приходят как объект в функцию;
• тип данных можно задать, например string;
• props нельзя изменять внутри компонента.

Такой подход позволяет использовать один компонент много раз. Меняются только переданные данные.

Состояние и хуки компонента

Состояние хранит данные, которые меняются со временем. В React состояние создают хуком useState. Во Vue для этого используют ref и reactive.

Например, кнопка button может менять состояние компонента.

function Counter() {

const [count, setCount] = useState(0);

return (

<div>

<button onClick={() => setCount(count + 1)}>

{count}

</button>

</div>

);

}

Функция Counter использует хук useState. По клику кнопка button меняет значение и обновляет div. Перед return можно добавить обычный код на JavaScript.

Хуки жизненного цикла запускают код в нужный момент. Например, после рендеринга компонента или при его обновлении. В React это useEffect, во Vue — методы жизненного цикла.

Итоги

Создание компонента во Vue и React устроено похоже. Компонент объединяет разметку, данные и логику. С практикой создавать компоненты становится просто.