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

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

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

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

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

1. Функциональные компоненты — это обычные функции JavaScript, которые принимают props и возвращают элементы React.
2. Классовые компоненты — это классы ES6, которые могут иметь состояние и методы жизненного цикла.

С выходом хуков (hooks) в React 16.8 функциональные компоненты стали более мощными и теперь могут управлять состоянием и побочными эффектами, что делает их предпочтительным вариантом для большинства разработчиков.

Установка окружения

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

Шаг 1: Установка Node.js и npm

Если у вас еще не установлен Node.js, скачайте и установите его с официального сайта. Установка Node.js включает в себя менеджер пакетов npm, который нам понадобится.

Шаг 2: Создание нового приложения

После установки Node.js откройте терминал (или командную строку) и выполните следующую команду для создания нового приложения на React:

npx create-react-app my-first-app

Здесь my-first-app — это имя вашего приложения. Вы можете заменить его на любое другое имя.

Шаг 3: Запуск приложения

Перейдите в созданную директорию и запустите приложение:

cd my-first-app

npm start

После выполнения этой команды ваше приложение будет доступно по адресу http://localhost:3000.

Теперь, когда у нас есть рабочее приложение, давайте создадим наши первые компоненты!

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

Шаг 1: Структура проекта

В вашем проекте на React есть папка src, в которой находятся все файлы, относящиеся к вашему приложению. В этой папке вы можете создавать компоненты.

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

Давайте создадим простой функциональный компонент, который будет отображать приветственное сообщение.

1. Откройте папку src и создайте новый файл с именем Greeting.js.
2. В этом файле напишите следующий код:

import React from 'react';



function Greeting(props) {

  return <h1>Привет, {props.name}!</h1>;

}



export default Greeting;

В этом коде мы создали функциональный компонент Greeting, который принимает props и отображает приветственное сообщение с использованием свойства name.

Шаг 3: Использование компонента

Теперь давайте использовать наш компонент Greeting в приложении. Откройте файл src/App.js и внесите следующие изменения:

import React from 'react';

import Greeting from './Greeting';



function App() {

  return (

    <div className="App">

      <Greeting name="Мир" />

    </div>

  );

}



export default App;

Теперь, когда вы запустите приложение, вы увидите сообщение «Привет, Мир!».

ПрProps в компонентах

Что такое props?

Props (свойства) — это способ передачи данных от родительского компонента к дочернему. Они являются неизменяемыми и передаются как атрибуты, когда компонент вызывается.

Передача данных через props

Давайте немного усложним наш компонент, чтобы он мог отображать приветственное сообщение с разными именами. Измените файл Greeting.js следующим образом:

import React from 'react';



function Greeting(props) {

  return <h1>Привет, {props.name}!</h1>;

}



export default Greeting;

Теперь, когда вы используете компонент в App.js, вы можете передавать разные имена:

import React from 'react';

import Greeting from './Greeting';



function App() {

  return (

    <div className="App">

      <Greeting name="Мир" />

      <Greeting name="Девушка" />

      <Greeting name="Парень" />

    </div>

  );

}



export default App;

После этого вы увидите три приветственных сообщения на экране.

Управление состоянием в компонентах

Теперь давайте добавим возможность управления состоянием в нашем приложении. Для этого мы будем использовать хук useState.

Шаг 1: Импорт useState

Откройте файл Greeting.js и импортируйте useState из React:

import React, { useState } from 'react';

Шаг 2: Создание состояния

Теперь добавим состояние для хранения имени, а также функцию для его обновления:

function Greeting() {

  const [name, setName] = useState('Мир');



  return (

    <div>

      <h1>Привет, {name}!</h1>

      <button onClick={() => setName('Девушка')}>Сменить имя</button>

    </div>

  );

}

Здесь мы создали состояние name и функцию setName для его обновления. При нажатии на кнопку имя изменится на «Девушка».

Шаг 3: Использование состояния в App.js

Теперь обновите файл App.js, чтобы использовать новый компонент Greeting:

import React from 'react';

import Greeting from './Greeting';



function App() {

  return (

    <div className="App">

      <Greeting />

    </div>

  );

}



export default App;

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

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

Что такое жизненный цикл компонентов?

Жизненный цикл компонентов — это последовательность методов, которые вызываются в разные моменты времени во время существования компонента. Они позволяют управлять состоянием и выполнять действия в определенные моменты времени.

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

Пример использования useEffect

Давайте добавим к нашему компоненту Greeting логирование в консоль, когда компонент монтируется и размонтируется:

import React, { useState, useEffect } from 'react';



function Greeting() {

  const [name, setName] = useState('Мир');



  useEffect(() => {

    console.log('Компонент смонтирован');



    return () => {

      console.log('Компонент размонтирован');

    };

  }, []);



  return (

    <div>

      <h1>Привет, {name}!</h1>

      <button onClick={() => setName('Девушка')}>Сменить имя</button>

    </div>

  );

}



export default Greeting;

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

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

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

Пример классового компонента

Создадим классовый компонент, который будет выполнять те же функции, что и наш компонент Greeting:

import React, { Component } from 'react';



class Greeting extends Component {

  constructor(props) {

    super(props);

    this.state = {

      name: 'Мир',

    };

  }



  changeName = () => {

    this.setState({ name: 'Девушка' });

  };



  render() {

    return (

      <div>

        <h1>Привет, {this.state.name}!</h1>

        <button onClick={this.changeName}>Сменить имя</button>

      </div>

    );

  }

}



export default Greeting;

Здесь мы создали классовый компонент Greeting, который имеет состояние и метод для его обновления. Используйте этот компонент так же, как и функциональный компонент, в App.js.

Применение компонентов в проектах

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

Структура проекта

Хорошая структура проекта — это ключ к его успешной поддержке и расширению. Вы можете организовать свои компоненты следующим образом:

my-first-app/

├── src/

│   ├── components/

│   │   ├── Greeting.js

│   │   ├── Header.js

│   │   └── Footer.js

│  



 ├── App.js

│   └── index.js

└── ...

Создание дополнительных компонентов

Добавим еще несколько компонентов для создания простого приложения. Создайте файлы Header.js и Footer.js в папке components.

Header.js:

import React from 'react';



function Header() {

  return (

    <header>

      <h1>Добро пожаловать в мое приложение!</h1>

    </header>

  );

}



export default Header;

Footer.js:

import React from 'react';



function Footer() {

  return (

    <footer>

      <p>© 2024 Мое приложение</p>

    </footer>

  );

}



export default Footer;

Обновление App.js

Теперь обновите App.js, чтобы использовать новые компоненты:

import React from 'react';

import Greeting from './components/Greeting';

import Header from './components/Header';

import Footer from './components/Footer';



function App() {

  return (

    <div className="App">

      <Header />

      <Greeting />

      <Footer />

    </div>

  );

}



export default App;

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

Заключение

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

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