React — это библиотека JavaScript, разработанная для создания пользовательских интерфейсов. Она основывается на компонентной архитектуре, что позволяет разбивать интерфейс на независимые и переиспользуемые части, называемые компонентами.

В этой статье мы рассмотрим основные принципы работы с React и его компонентной архитектурой.

Компоненты в React

Компоненты можно рассматривать как строительные блоки вашего приложения. Каждый компонент может содержать как логическую, так и визуальную часть. В React есть два основных типа компонентов:

  • Функциональные компоненты — это функции, которые возвращают JSX (JavaScript XML), что позволяет описать, как будет выглядеть интерфейс.
  • Классовые компоненты — это более сложные компоненты, которые позволяют использовать дополнительные функции, такие как состояние (state) и жизненный цикл (lifecycle).

Создание функционального компонента

Функциональный компонент может выглядеть следующим образом:

function MyComponent() {
    return 
Hello, React!
;
}

Этот компонент возвращает заголовок <h1> с текстом. Чтобы использовать этот компонент, вы можете импортировать его в другой компонент и включить его в JSX:

import MyComponent from './MyComponent';

function App() {
    return ;
}

Создание классового компонента

Классовый компонент создается с использованием классов в JavaScript:

class MyComponent extends React.Component {
    render() {
        return 
Hello, React from Class!
;
    }
}

Чтобы использовать классовый компонент, процесс аналогичен:

import MyComponent from './MyComponent';

class App extends React.Component {
    render() {
        return ;
    }
}

Состояние и свойства компонентов

В React компоненты могут иметь состояние (state) и свойства (props). Свойства — это параметры, которые передаются в компонент извне, а состояние — это данные, которые компонент управляет сам.

Использование состояния в функциональном компоненте

Для работы с состоянием в функциональных компонентах используется хук useState:

import React, { useState } from 'react';

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

    return (
        

            
You clicked {count} times

            
        

    );
}

В данном примере мы создаем состояние count и функцию setCount для его обновления. Каждый раз, когда пользователь нажимает кнопку, состояние обновляется, и компонент перерисовывается.

Использование свойств в компоненте

Свойства передаются компоненту так же, как аргументы функции:

function MyComponent({ message }) {
    return 
{message}
;
}

function App() {
    return ;
}

Жизненный цикл компонента

Классовые компоненты имеют методы жизненного цикла, которые позволяют выполнять действия на различных этапах существования компонента. Основные методы:

  • componentDidMount — вызывается после того, как компонент был добавлен в DOM.
  • componentDidUpdate — вызывается после обновления компонента.
  • componentWillUnmount — вызывается перед удалением компонента из DOM.

В функциональных компонентах для управления жизненным циклом используются хуки, такие как useEffect.

import React, { useEffect } from 'react';

function MyComponent() {
    useEffect(() => {
        console.log('Component mounted');
        return () => {
            console.log('Component unmounted');
        };
    }, []);

    return 
Hello, useEffect!
;
}

Заключение

Работа с React и его компонентной архитектурой может показаться сложной на первом этапе, но с практикой вы сможете создавать мощные и интерактивные приложения. Не забывайте изучать документацию и практиковаться!