Загрузка...
Загрузка...
React — это библиотека JavaScript для создания быстрых и интерактивных пользовательских интерфейсов (UI). Она помогает разработчикам создавать современные веб и мобильные приложения.
React использует декларативный подход в программировании. Если в императивном программировании необходимо задать каждое действие, то в декларативном достаточно описания конечного результата и реакции на действия.
Проще говоря, разработчик при создании кода указывает, как должен себя повести интерфейс при получении определенных данных или наступлении событий.
Библиотека позволяет оптимизировать процесс разработки за счет того, что программисту не нужно описывать подробности. React.js самостоятельно будет обновлять элементы, ориентируясь на условия. Задача программиста — грамотно описать их.
Использование этого подхода позволяет создавать приложения на React максимально быстро.
Компоненты — это основа любого React-приложения. Они представляют собой небольшие части интерфейса, которые можно использовать повторно.
Каждый компонент — это независимый блок, который сам управляет своими данными и поведением. Это похоже на маленький "кирпичик", из которого строится весь интерфейс.
Инкапсуляция
Компоненты содержат всё, что нужно для их работы: данные, логику и внешний вид.
Это позволяет изолировать компоненты друг от друга и упрощает их тестирование и отладку.
Повторное использование
Один и тот же компонент можно использовать в разных частях приложения, что экономит время и упрощает код.
Например, кнопку с одинаковым стилем можно применить на разных страницах.
Композиция
Компоненты можно вкладывать друг в друга, создавая сложные интерфейсы из простых блоков.
Например, список вкладок (TabList) может состоять из нескольких вкладок (Tab), каждая из которых является отдельным компонентом.
Факт:
Компоненты — это сердце React. Они позволяют создавать масштабируемые и удобные в поддержке приложения.
Компоненты бывают двух типов:
function Welcome(props) {
return <h1>Привет, {props.name}!</h1>;
}
function App() {
return (
<div>
<Welcome name="Иван" />
<Welcome name="Анна" />
</div>
);
}
Классовые компоненты были основным способом создания компонентов до появления хуков. Сейчас их реже используют, но важно знать, как они работают.
import React, { Component } from "react";
class Welcome extends Component {
// Внутреннее состояние компонента
constructor(props) {
super(props);
this.state = {
message: "Добро пожаловать!",
};
}
// Метод для изменения состояния
changeMessage = () => {
this.setState({ message: "Спасибо за посещение!" });
};
// Метод render отвечает за отрисовку
render() {
return (
<div>
<h1>{this.state.message}</h1>
<p>Привет, {this.props.name}!</p>
<button onClick={this.changeMessage}>Нажми меня</button>
</div>
);
}
}
export default Welcome;