React: Как создать компонент

[kirilljsx]

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

1. Определение функционального компонента
   Функциональный компонент в React — это функция JavaScript, которая принимает props (свойства) и возвращает JSX (JavaScript XML). Эти компоненты не имеют состояния и полагаются на props для ввода данных. Функциональные компоненты лаконичны, легко читаемы и могут использовать перехватчики React для управления состоянием и побочными эффектами.

2. Создание функционального компонента
   Чтобы создать функциональный компонент в React, выполните следующие шаги:

Создайте приложение React:

npx create-react-app my-app

Перейдите в папку проекта:

cd my-app

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

import React from 'react';

function GeeksforGeeks() {
  return (
    <div>
      <h2>Как создать функциональный компонент в React?</h2>
      <p>GeeksforGeeks - это портал по информатике для гиков.</p>
    </div>
  );
}

export default GeeksforGeeks;

В этом примере компонент GeeksforGeeks возвращает HTML-разметку с заголовком и абзацем текста.

3. Использование функционального компонента
   Чтобы использовать функциональный компонент, его нужно импортировать и вызвать в другом компоненте. Вот пример использования функционального компонента:

import React from 'react';
import GeeksforGeeks from './GeeksforGeeks';

function App() {
 return (
   <div className="App">
     <h2 style={{ color: 'green' }}>GeeksforGeeks</h2>
     <GeeksforGeeks />
   </div>
 );
}

export default App;

В этом примере компонент App импортирует компонент GeeksforGeeks и вызывает его внутри своего JSX-кода.

4. Оптимизация функциональных компонентов
   Функциональные компоненты можно оптимизировать с помощью хука React.memo(), который помогает избежать ненужных повторных отрисовок. Вот пример использования React.memo():

import React, { memo } from 'react';

const GeeksforGeeks = memo((props) => {
 return (
   <div>
     <h2>Как создать функциональный компонент в React?</h2>
     <p>GeeksforGeeks - это портал по информатике для гиков.</p>
   </div>
 );
});

export default GeeksforGeeks;

В этом примере компонент GeeksforGeeks оптимизирован с помощью React.memo(), что позволяет избежать ненужных повторных отрисовок при изменении props.

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