Создаем простой React компонент: пошаговое руководство для начинающих

React – это мощная JavaScript-библиотека для создания пользовательских интерфейсов. В основе React лежат компоненты, которые являются строительными блоками любого React-приложения. Понимание того, как создавать и использовать компоненты, является ключевым для успешной разработки на React. В этой статье мы подробно рассмотрим процесс создания простого React компонента, предоставим пошаговые инструкции и объясним каждый шаг, чтобы даже начинающие разработчики могли легко освоить эту фундаментальную концепцию.

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

Прежде чем мы начнем писать код, давайте разберемся, что же такое React компонент. В самом простом определении, React компонент – это независимая, многократно используемая часть пользовательского интерфейса. Компоненты могут быть как простыми (например, кнопка или текстовое поле), так и сложными (например, форма или панель навигации). Основная идея заключается в том, что вы разбиваете пользовательский интерфейс на отдельные, управляемые компоненты, что делает ваш код более модульным, читаемым и поддерживаемым.

В React существует два основных типа компонентов:

• Функциональные компоненты: Это компоненты, которые определяются как JavaScript-функции. Они принимают аргумент `props` (свойства) и возвращают JSX (JavaScript XML), описывающий, как должен выглядеть компонент.
• Классовые компоненты: Это компоненты, которые определяются как JavaScript-классы, расширяющие класс `React.Component`. Они также принимают `props` и имеют метод `render()`, который возвращает JSX.

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

Подготовка к созданию React компонента

Прежде чем приступить к кодированию, нам необходимо настроить окружение для разработки React. Мы предполагаем, что у вас уже установлен Node.js и npm (или yarn). Если нет, то сначала вам нужно их установить. После установки Node.js и npm/yarn вы можете создать React приложение используя Create React App.

Создание нового React приложения

Откройте ваш терминал (или командную строку) и введите следующую команду:

npx create-react-app my-first-component
cd my-first-component

Эта команда создаст новое React-приложение с именем `my-first-component`. После того, как процесс создания будет завершен, перейдите в директорию проекта.

Запуск приложения

Теперь вы можете запустить приложение, выполнив следующую команду:

npm start

Эта команда запустит сервер разработки и откроет ваше приложение в браузере по адресу `http://localhost:3000`. Если все прошло успешно, вы должны увидеть стандартную страницу React.

Создание нашего первого компонента

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

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

Внутри папки `src` вашего проекта создайте новый файл с именем `Greeting.js`. В этот файл мы поместим код нашего компонента.

Код компонента

Откройте файл `Greeting.js` и добавьте следующий код:

import React from 'react';

function Greeting(props) {
  return (
    <div>
      <h1>Привет, {props.name}!</h1>
      <p>Добро пожаловать на наш сайт.</p>
    </div>
  );
}

export default Greeting;

Давайте разберем этот код:

• `import React from ‘react’;`: Эта строка импортирует библиотеку React. Она необходима для использования JSX и других React-специфичных функций.
• `function Greeting(props) { … }`: Это объявление функционального компонента `Greeting`. Компонент принимает аргумент `props`, который содержит свойства, переданные компоненту при его использовании.
• `return ( … );`: Внутри функции `Greeting` используется ключевое слово `return`, которое возвращает JSX, определяющий, как должен выглядеть компонент.
• `<div>…</div>`: Это основной контейнер для нашего компонента. Он использует HTML-подобный синтаксис, который называется JSX.
• `<h1>Привет, {props.name}!</h1>`: Эта строка отображает заголовок первого уровня (h1), используя `props.name` для отображения имени пользователя. Обратите внимание на фигурные скобки `{}`. Они позволяют вставлять JavaScript выражения внутри JSX.
• `<p>Добро пожаловать на наш сайт.</p>`: Эта строка отображает параграф с приветственным сообщением.
• `export default Greeting;`: Эта строка экспортирует компонент `Greeting`, делая его доступным для использования в других частях приложения.

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

Теперь, когда мы создали наш компонент `Greeting`, мы можем использовать его в нашем основном приложении.

Импорт компонента в App.js

Откройте файл `src/App.js` и замените его содержимое следующим:

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

function App() {
  return (
    <div className="App">
      <Greeting name="Иван" />
       <Greeting name="Мария" />
    </div>
  );
}

export default App;

Разберем код:

• `import Greeting from ‘./Greeting’;`: Эта строка импортирует наш компонент `Greeting` из файла `Greeting.js`. Обратите внимание на относительный путь `./Greeting`.
• `<Greeting name=”Иван” />`: Эта строка использует компонент `Greeting` и передает ему свойство `name` со значением `Иван`. Обратите внимание, что для передачи значения свойства используется синтаксис HTML-атрибутов.
• `<Greeting name=”Мария” />`: Эта строка также использует компонент `Greeting`, но передает ему свойство `name` со значением `Мария`.

Просмотр результата

Теперь, если вы вернетесь в свой браузер, где запущено ваше React-приложение, вы увидите, что отображаются два приветственных сообщения, используя наш компонент `Greeting`, один раз для Ивана, а второй раз для Марии.

Добавление стилизации компоненту

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

Создание файла стилей

Создайте файл `Greeting.css` в папке `src` рядом с файлом `Greeting.js`.

Добавление стилей

Откройте файл `Greeting.css` и добавьте следующие стили:

.greeting-container {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
  background-color: #f9f9f9;
  text-align: center;
}

.greeting-container h1 {
  color: #333;
  margin-bottom: 10px;
}

.greeting-container p {
  color: #666;
}

Импорт стилей в компонент

Теперь, чтобы использовать эти стили в нашем компоненте `Greeting`, нам нужно импортировать `Greeting.css` в `Greeting.js` . Обновите файл `Greeting.js` следующим образом:

import React from 'react';
import './Greeting.css';

function Greeting(props) {
  return (
    <div className="greeting-container">
      <h1>Привет, {props.name}!</h1>
      <p>Добро пожаловать на наш сайт.</p>
    </div>
  );
}

export default Greeting;

Изменения включают:

• `import ‘./Greeting.css’;`: Эта строка импортирует CSS-файл. Обратите внимание на относительный путь.
• `<div className=”greeting-container”>`: Эта строка добавляет класс `greeting-container` к главному `div` компонента, чтобы применить к нему стили.

Просмотр результата

После сохранения изменений, вы увидите, что ваш компонент `Greeting` теперь стилизован, согласно нашим CSS правилам.

Понимание Props (свойств)

В нашем примере мы использовали `props`, чтобы передать имя пользователя в компонент `Greeting`. `Props` – это механизм для передачи данных от родительского компонента к дочернему. `Props` неизменяемы (immutable). Это означает, что компонент не должен изменять значения `props`, которые ему были переданы. Вместо этого, при необходимости изменения данных, родительский компонент должен передать новые значения `props`.

Типы Props

`Props` могут быть различных типов, таких как строки, числа, булевы значения, массивы, объекты, функции и даже другие компоненты. Давайте рассмотрим несколько примеров:

// Передача строки
<Greeting name="Алексей" />

// Передача числа
<Component age={25} />

// Передача булевого значения
<Component isActive={true} />

// Передача массива
<Component items={[1, 2, 3]} />

// Передача объекта
<Component user={{ name: 'Анна', city: 'Москва' }} />

// Передача функции
const handleClick = () => { console.log('Кликнули'); };
<Button onClick={handleClick} />

// Передача компонента
<Wrapper header={<h2>Заголовок</h2>} />

Понимание того, как передавать и использовать `props`, является важной частью работы с React.

Заключение

В этой статье мы создали простой функциональный React компонент, изучили основы синтаксиса JSX, научились передавать свойства (props) компоненту и стилизовать его. Мы рассмотрели следующие ключевые моменты:

• Создание функционального компонента.
• Использование JSX.
• Передача и использование props.
• Стилизация компонента с помощью CSS.

Создание компонентов – это фундамент разработки на React. Практикуйтесь в создании различных компонентов и экспериментируйте с передачей свойств, чтобы полностью освоить этот важный концепт. С каждым новым компонентом, который вы создадите, вы будете чувствовать себя более уверенно в своих навыках разработки на React.

Дальнейшие шаги могут включать в себя изучение хуков React, создание более сложных компонентов и изучение управления состоянием приложения. Продолжайте изучать React, и вы сможете создавать мощные и динамичные веб-приложения!