React JS: Практика работы с компонентами

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

Понимание компонентов проще всего получить на практике. Рассмотрим пример сайта it-prager.com. Если бы он был написан на React, каждый блок являлся бы компонентом: шапка сайта, отдельные статьи, боковая панель и другие блоки — каждый из них был бы отдельным компонентом.

Компонент — это определённый блок сайта, содержащий HTML-код, CSS-стили и функционал (например, JavaScript-код). Шапка сайта — это компонент, обладающий HTML-разметкой, стилями и функционалом (в данном случае, анимацией). В нашем приложении мы создадим один основной компонент, в который будем вкладывать другие, аналогично примеру сайта: основной компонент содержит компоненты «статья» и «боковая часть». Для создания компонентов потребуется создавать новые файлы.

Работа с основным файлом App.js

Основной файл App.js сам по себе является основным компонентом и служит для объединения других компонентов. Представьте, что сайт состоит из множества блоков (компонентов). App.js объединяет эти блоки в единую структуру и выводит её пользователю. В нём можно объединить любое количество компонентов.

В App.js необходимо:

Импортировать объект React из библиотеки React:

import React from 'react';

Это возможно, поскольку библиотека React подключена в index.js.

Создать компонент:

class App extends React.Component {
  render() {
    return (
      <div>
        {/* Здесь будет HTML-разметка */}
      </div>
    );
  }
}

Создаётся класс App, наследующий от React.Component. Метод render() возвращает HTML-разметку. Важно: render() может возвращать только один родительский элемент. Для вывода нескольких элементов, необходимо обернуть их в один родительский, например, <div>. HTML-разметка в React трансформируется в JavaScript-код.

Экспортировать компонент:

export default App;

Теперь компонент App можно импортировать в другие файлы.

Подключение компонента в index.js

В index.js подключаются react, react-dom, стили и компонент App:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM.render() отображает компонент App в элементе с id «root» в index.html.

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

Вместо создания компонентов непосредственно в App.js, лучше создать отдельную папку components. Создадим файл Info.js:

import React from 'react';

class Info extends React.Component {
  render() {
    return (
      <div>
        <h2>Погодное приложение</h2>
        <p>Узнайте погоду в вашем городе</p>
      </div>
    );
  }
}

export default Info;

Этот компонент экспортируется и импортируется в App.js:

import React from 'react';
import Info from './components/Info'; // Путь к новому компоненту

class App extends React.Component {
  render() {
    return (
      <div>
        <Info />
      </div>
    );
  }
}

export default App;

Теперь компонент Info отображается на странице. Таким образом можно создавать и добавлять множество компонентов.

В этом уроке мы познакомились с компонентами, создали свой первый компонент и подготовили основу для дальнейшей работы с API и вводом данных о погоде.