React JS: Базовые настройки и создание компонентов

Установка расширения React Maker

Для упрощения создания компонентов React, установите расширение «ES7 React/Redux/GraphQL/React-Native snippets» (или аналогичное с названием react maker) в Visual Studio Code. После установки перезапустите редактор.

Создание компонентов Header и Footer

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

Компонент Header

Внутри компонента Header.js замените div на header, содержащий:

div с классом logo, содержащий span с названием сайта («HouseOff» в примере).
div с классом presentation, для размещения баннера (изображения).

import React from 'react';

const Header = () => {
  return (
    <header>
      <div className="logo">
        <span>HouseOff</span>
      </div>
      <div className="presentation"></div>
    </header>
  );
};

export default Header;

Компонент Footer

import React from 'react';

const Footer = () => {
  return (
    <footer>
      <p>Все права защищены &copy;</p>
    </footer>
  );
};

export default Footer;

Объединение компонентов в App.js

В файле App.js импортируйте компоненты Header и Footer и оберните их в div с классом wrapper:

import React from 'react';
import Header from './components/Header';
import Footer from './components/Footer';

const App = () => {
  return (
    <div className="wrapper">
      <Header />
      <Footer />
    </div>
  );
};

export default App;

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

Добавим стили, используя шрифты Montserrat (300 и 600 жирности) из Google Fonts.

Подключение шрифтов

Подключите шрифты через @import в файл index.css. (Ссылка на шрифт должна быть скопирована с Google Fonts)

@import url('ссылка на шрифт Montserrat 300');
@import url('ссылка на шрифт Montserrat 600');

Основные стили, Header (логотип), Presentation (баннер) и Footer стили

В index.css добавьте следующие стили:

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: white;
  color: #333;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
}

.wrapper {
  width: 1280px;
  margin: 50px auto;
}

.logo {
  font-weight: 600;
  font-size: 20px;
}

.presentation {
  padding: 50px 0;
  background: url('./img/digit.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-blend-mode: multiply;
  background-color: #ddd;
  width: 100%;
  height: 500px;
  position: relative; /* Добавлено для корректного позиционирования псевдоэлементов */
}

.presentation::before,
.presentation::after {
  position: absolute;
  content: "";
  text-align: left; /* Добавлено для корректного выравнивания текста */
}

.presentation::before {
  top: 100px;
  left: 50px;
  width: 300px;
  font-size: 40px;
  font-weight: 600;
  color: white;
  content: "Лучшие товары для вашего дома";
}

.presentation::after {
  top: 250px;
  left: 50px;
  width: 300px;
  font-size: 30px;
  font-weight: 600;
  color: white;
  content: "По низким ценам";
}

footer {
  text-align: center;
  padding-top: 100px;
}

Добавьте изображение (src/img/digit.jpeg) в папку src/img.

Добавление меню навигации

Добавьте меню навигации в Header.js:

<nav className="navigation">
  <ul>
    <li>Про нас</li>
    <li>Контакты</li>
    <li>Кабинет</li>
  </ul>
</nav>

Стиль для меню навигации:

.navigation {
  position: absolute;
  right: 0;
}

.navigation ul {
  list-style: none;
  padding: 0; /* Добавлено для удаления лишнего отступа */
  margin: 0; /* Добавлено для удаления лишнего отступа */
}

.navigation li {
  display: inline;
  margin-left: 25px;
  cursor: pointer;
}

.navigation li:hover {
  opacity: 0.5;
  transition: opacity 0.5s ease;
}

В этом уроке создан базовый дизайн веб-сайта с использованием компонентов React и CSS стилей. В следующих уроках работа с React будет продолжена.