Введение
Компоненты являются независимыми строительными блоками пользовательского интерфейса веб-сайта. Использование компонентов организует код на более высоком уровне. Это может быть связано с шаблонами в 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 />
!
Это так просто!