Компоненты в ReactJS

Введение

Компоненты являются независимыми строительными блоками пользовательского интерфейса веб-сайта. Использование компонентов организует код на более высоком уровне. Это может быть связано с шаблонами в Django, где мы обычно создаем базовый шаблон и наследуем его во всех других шаблонах, чтобы не писать один и тот же код снова и снова.

В этом посте вы получите общее представление о том, как создавать компоненты в ReactJS! Продолжая приложение, которое мы создали в предыдущем посте, мы создадим компонент заголовка для веб-сайта.

Начиная

Создайте эту структуру в своем приложении src/components/headerComponent/header.js. Поместите этот код во вновь созданный файл header.js:

import React, { Component } from 'react';
class Header extends Component {
  render() {
    return (
      <div className="header">
        Add Header Code Here
      </div>
    );
  }
}
export default Header;

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

import Header from “./components/headerComponent/header”;

Теперь вы можете разместить шапку на сайте с помощью тега <Header />!

Это так просто!