Вы когда-нибудь хотели создать свой собственный веб-сайт с нуля, но чувствовали себя подавленными сложностью и жаргоном веб-разработки? Хотели бы вы, чтобы существовал простой и увлекательный способ научиться основам создания современной и интерактивной веб-страницы?
Если да, то вам повезло! В этой статье я покажу вам, как создать базовый веб-сайт React для начинающих, используя всего несколько строк кода и немного творчества. React — это популярная и мощная библиотека JavaScript, которая позволяет с легкостью создавать динамические пользовательские интерфейсы. Вам не нужен какой-либо предыдущий опыт работы с React или веб-разработкой, чтобы следовать дальше. К концу этой статьи у вас будет работающий веб-сайт, который вы сможете настроить и поделиться им со всем миром. Давайте начнем!
Чтобы создать базовый веб-сайт React, нам нужно выполнить несколько шагов. Во-первых, нам нужно настроить среду и установить необходимые зависимости, такие как react, react-dom и react-router-dom. Однако в этой статье предполагается, что вы уже позаботились об этих вещах.
Если нет, то я более чем счастлив вести вас в правильном направлении, чтобы ускорить эти вещи. Видео YouTube, на которое я дал ссылку ниже, создано ютубером Programming with Mosh, и это фантастический способ настроить все, что необходимо!
Настройка и основы React: Учебник по React (нажмите на эту ссылку!)
Далее нам нужно создать компоненты для каждой части веб-сайта, такие как панель навигации, основное содержимое и нижний колонтитул. Мы будем использовать функциональные компоненты. Функциональные компоненты — это способ создания компонентов React с использованием функций JavaScript. Их проще и легче писать, чем компоненты класса, и они могут использовать хуки React для управления методами состояния и жизненного цикла. Функциональные компоненты принимают реквизиты в качестве аргумента и возвращают код JSX для отображения пользовательского интерфейса. Например, это функциональный компонент, отображающий приветственное сообщение:
function Greeting(props) {
return <h1>Hello, {props.name}</h1>;
}
Затем нам нужно использовать JSX для рендеринга компонентов в файле App.js, который является корневым компонентом нашего веб-сайта. Мы также можем использовать свойства и состояние для передачи данных и управления пользовательским интерфейсом.
Мы можем начать с приведенного ниже кода в файле App.tsx, который всего лишь настраивает наше приложение.
import React from "react";
import "./App.css";
// Define the App component that renders the Header, Main, and Footer components
const App: React.FC = () => {
return (
<div className="App"/>
);
};
export default App;
Объяснение кода следующее:
- Первая строка импортирует React для использования функций JSX и React. Вторая строка импортирует файл App.css для оформления.
- Третья строка определяет компонент App как функциональный компонент, использующий функцию стрелки. Он не требует реквизита.
- Четвертая строка возвращает JSX с элементом ‹div›, имя класса которого равно «App». Это похоже на атрибут class в HTML, но переименованный во избежание путаницы с JavaScript.
- Пятая строка экспортирует компонент приложения как экспорт по умолчанию. Это позволяет импортировать его без фигурных скобок в другие файлы.
Далее мы переходим к созданию панели навигации в верхней части веб-сайта.
Добавьте новую папку под названием «LandingPage», здесь мы разместим панель навигации, а также основную часть вводной страницы.
Хорошей практикой является хранение каждой страницы, которая будет на вашем веб-сайте, в виде отдельной папки, так как это держит все в порядке и не приведет к путанице, когда начнут появляться похожие имена файлов.
Далее создайте файл «Header.tsx». Здесь мы сохраним панель навигации, которая будет находиться вверху страницы.
import {
faHome,
faInfoCircle,
faCog,
faEnvelope,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
// Define an interface for the props of the NavItem component
interface NavItemProps {
icon: any;
link: string;
}
// Define a functional component named NavItem
const NavItem: React.FC<NavItemProps> = ({ icon, link }) => {
// Return a JSX element that renders the icon and link props as a list item with an anchor tag
return (
<li className="nav-item">
<a href={link}>
<FontAwesomeIcon icon={icon} />
</a>
</li>
);
};
// Define an array of objects that represent the navigation items
const navItems = [
{ icon: faHome, link: "#" },
{ icon: faInfoCircle, link: "#" },
{ icon: faCog, link: "#" },
{ icon: faEnvelope, link: "#" },
];
// Define a functional component named Header
const Header: React.FC = () => {
// Return a JSX element that renders the header of the website
return (
<div className="header">
<h1>My Website</h1>
<ul className="nav-list">
{navItems.map((item, index) => (
<NavItem key={index} icon={item.icon} link={item.link} />
))}
</ul>
</div>
);
};
export default Header;
Пояснение к коду:
Во-первых, давайте начнем с импорта. Вам нужно импортировать некоторые модули, чтобы использовать их функции в вашем коде. Например, вам нужно импортировать React, чтобы использовать компоненты JSX и React. Вам также необходимо импортировать некоторые значки из Font Awesome и компонент, позволяющий использовать их в React. Вам нужно будет установить fortawesome модуль. Вот фрагмент кода для импорта:
import React from "react";
import {
faHome,
faInfoCircle,
faCog,
faEnvelope,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
Далее давайте определим компонент NavItem. Этот компонент будет отображать один элемент навигации со значком и ссылкой. Вам нужно определить интерфейс для свойств этого компонента, которые представляют собой данные, которые вы можете передать ему. Интерфейс имеет два свойства: иконку и ссылку. Свойство icon имеет тип any, что означает, что оно может быть любым. Свойство link имеет строковый тип, что означает, что оно должно быть текстовым значением. Вот фрагмент кода интерфейса:
interface NavItemProps {
icon: any;
link: string;
}
Затем вам нужно определить функцию, которая возвращает JSX для компонента NavItem. Функция принимает свойства в качестве параметра и деструктурирует их в переменные значков и ссылок. Функция возвращает элемент JSX, который использует элемент ‹li› с className «nav-item». Атрибут className эквивалентен атрибуту class в HTML, но он переименован, чтобы избежать путаницы с классом ключевого слова JavaScript. Элемент ‹li› содержит элемент ‹a› с атрибутом href, имеющим значение ссылки. Элемент ‹a› также содержит компонент FontAwesomeIcon, у которого есть реквизит значка со значением icon. Вот фрагмент кода для функции:
const NavItem: React.FC<NavItemProps> = ({ icon, link }) => {
return (
<li className="nav-item">
<a href={link}>
<FontAwesomeIcon icon={icon} />
</a>
</li>
);
};
Наконец, давайте определим компонент заголовка. Этот компонент будет отображать заголовок веб-сайта с заголовком и списком элементов навигации. Вам необходимо определить массив объектов, представляющих элементы навигации. Каждый объект имеет значок и свойство ссылки, соответствующие интерфейсу компонента NavItem. Вы можете использовать любые иконки из Font Awesome, которые вам нравятся. Вот фрагмент кода для массива:
const navItems = [
{ icon: faHome, link: "#" },
{ icon: faInfoCircle, link: "#" },
{ icon: faCog, link: "#" },
{ icon: faEnvelope, link: "#" },
];
Затем вам нужно определить функцию, которая возвращает JSX для компонента заголовка. Функция не принимает никаких реквизитов, поэтому у нее пустой список параметров. Функция возвращает элемент JSX, который использует элемент ‹div› с className «header». Элемент ‹div› содержит элемент ‹h1› с текстом «Мой сайт». Элемент ‹div› также содержит элемент ‹ul› с className «nav-list». Элемент ul использует метод map для перебора массива navItems и визуализации каждого элемента как компонента NavItem. Метод карты принимает функцию обратного вызова, которая принимает элемент и индекс в качестве параметров и возвращает элемент JSX. Элемент JSX использует key prop со значением index, чтобы помочь React идентифицировать каждый элемент в списке. Элемент JSX также передает значения item.icon и item.link в качестве свойств компоненту NavItem. Вот фрагмент кода для функции:
const Header: React.FC = () => {
return (
<div className="header">
<h1>My Website</h1>
<ul className="nav-list">
{navItems.map((item, index) => (
<NavItem key={index} icon={item.icon} link={item.link} />
))}
</ul>
</div>
);
};
Вот и все! Вы определили два компонента: NavItem и Header и использовали их для отображения простого заголовка веб-сайта со значками и ссылками. Я надеюсь, что это объяснение поможет вам лучше понять код.
Далее переходим к основному содержимому тела.
Создайте файл с именем: «MainBody.tsx» в папке LandingPage, которую мы создали выше.
Это код, который мы вскоре рассмотрим для файла MainBody.tsx:
import {
faHome,
faInfoCircle,
faCog,
faEnvelope,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const bodyItems = [
{
title: "Home",
icon: faHome,
text: "This is where you can find the main information about my website.",
},
{
title: "About",
icon: faInfoCircle,
text: "This is where you can learn more about me and my background.",
},
{
title: "Services",
icon: faCog,
text: "This is where you can see what I can offer you and how I can help you.",
},
{
title: "Contact",
icon: faEnvelope,
text: "This is where you can get in touch with me and send me your feedback.",
},
];
// Define a functional component named Main
const Main: React.FC = () => {
// Return a JSX element that renders the main content of the website
return (
<div className="main">
<div className="hero">
<h2>Welcome to my website!</h2>
<p>
This is a basic template website made with React TypeScript.
Feel free to use it in any way you wish!
</p>
<button>Learn More</button>
</div>
<div className="features">
<div
className="feature"
style={{ display: "flex", flexDirection: "row" }}
>
{bodyItems.map(({ title, icon, text }) => (
<div
key={title}
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
margin: "10px",
padding: "10px",
}}
>
<FontAwesomeIcon icon={icon} />
<h3>{title}</h3>
<p>{text}</p>
</div>
))}
</div>
</div>
</div>
);
};
export default Main;
Расширение для приведенного выше кода выглядит следующим образом:
Во-первых, давайте начнем с импорта. Вам нужно импортировать некоторые модули, чтобы использовать их функции в вашем коде. Например, вам нужно импортировать некоторые иконки из Font Awesome и компонент, позволяющий использовать их в React. Вот фрагмент кода для импорта:
import {
faHome,
faInfoCircle,
faCog,
faEnvelope,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
Далее давайте определим массив bodyItems. Этот массив содержит некоторые объекты, представляющие основной контент веб-сайта. Каждый объект имеет три свойства: заголовок, значок и текст. Свойство title имеет строковый тип, что означает, что оно должно быть текстовым значением. Свойство icon имеет тип any, что означает, что оно может быть любым. Свойство text имеет строковый тип, что означает, что оно должно быть текстовым значением. Вы можете использовать любые иконки из Font Awesome, которые вам нравятся. Вот фрагмент кода для массива:
const bodyItems = [
{
title: "Home",
icon: faHome,
text: "This is where you can find the main information about my website.",
},
{
title: "About",
icon: faInfoCircle,
text: "This is where you can learn more about me and my background.",
},
{
title: "Services",
icon: faCog,
text: "This is where you can see what I can offer you and how I can help you.",
},
{
title: "Contact",
icon: faEnvelope,
text: "This is where you can get in touch with me and send me your feedback.",
},
];
Затем давайте определим компонент Main. Этот компонент будет отображать основной контент веб-сайта с разделом героя и разделом функций. Вам нужно определить функцию, которая возвращает JSX для основного компонента. Функция не принимает никаких реквизитов, поэтому у нее пустой список параметров. Функция возвращает элемент JSX, который использует элемент ‹div› с className «main». Атрибут className эквивалентен атрибуту class в HTML, но он переименован, чтобы избежать путаницы с классом ключевого слова JavaScript. Вот фрагмент кода для функции:
const Main: React.FC = () => {
return (
<div className="main">
// JSX for the hero section
// JSX for the features section
</div>
);
};
Далее давайте посмотрим на JSX для раздела героя. Раздел героя — это часть веб-сайта, которая показывает приветственное сообщение и кнопку. Вам нужно использовать другой элемент ‹div› с className «hero» внутри основного элемента ‹div›. Элемент hero ‹div› содержит элемент ‹h2› с текстом «Добро пожаловать на мой сайт!». Элемент hero ‹div› также содержит элемент ‹p› с текстом, поясняющим, о чем сайт. Элемент hero ‹div› также содержит элемент ‹button› с текстом «Подробнее». Вот фрагмент кода для JSX для раздела героя:
<div className="hero">
<h2>Welcome to my website!</h2>
<p>
This is a basic template website made with React TypeScript.
Feel free to use it in any way you wish!
</p>
<button>Learn More</button>
</div>
Наконец, давайте посмотрим на JSX для раздела функций. Раздел функций — это часть веб-сайта, которая показывает четыре функции со значками и текстами. Вам нужно использовать другой элемент ‹div› с className «features» внутри основного элемента ‹div›. Элемент functions ‹div› содержит другой элемент ‹div› с className «feature» и некоторыми встроенными стилями, которые задают для его отображения значение flex, а для flexDirection — значение row. Это означает, что он будет размещать свои дочерние элементы горизонтально в ряд. Элемент функции ‹div› использует метод map для итерации по массиву bodyItems и визуализации каждого элемента как другого элемента ‹div› с некоторыми встроенными стилями, которые устанавливают его отображение на flex, его flexDirection на столбец, его alignItems на центр, его поле на 10px, а его отступ — 10px. Это означает, что он расположит свои дочерние элементы вертикально в столбец, отцентрирует их и добавит вокруг них некоторое пространство. Метод карты использует функцию обратного вызова, которая принимает элемент в качестве параметра и деструктурирует его на переменные заголовка, значка и текста. Функция обратного вызова возвращает элемент JSX, который использует ключевую опору со значением title, чтобы помочь React идентифицировать каждый элемент в списке. Элемент JSX также использует компонент FontAwesomeIcon, у которого есть свойство значка со значением значка. Элемент JSX также использует элемент ‹h3› со значением title и элемент ‹p› со значением text. Вот фрагмент кода для JSX для раздела функций:
<div className="features">
<div
className="feature"
style={{ display: "flex", flexDirection: "row" }}
>
{bodyItems.map(({ title, icon, text }) => (
<div
key={title}
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
margin: "10px",
padding: "10px",
}}
>
<FontAwesomeIcon icon={icon} />
<h3>{title}</h3>
<p>{text}</p>
</div>
))}
</div>
</div>
Вот и все! Вы определили один компонент: Main и использовали его для рендеринга простого основного контента веб-сайта с главным разделом и разделом функций.
Наконец, нам нужно создать нижний колонтитул для веб-сайта. Это будет самая простая часть, так что без лишних слов, поехали!
// Define a functional component named Footer
const StandardFooter: React.FC = () => {
// Return a JSX element that renders the footer of the website
return (
<div className="footer">
<p>© 2023 by My Website. All rights reserved.</p>
</div>
);
};
export default StandardFooter;
Объяснение:
Во-первых, давайте определим компонент нижнего колонтитула. Этот компонент будет отображать нижний колонтитул веб-сайта с текстом. Вам нужно определить функцию, которая возвращает JSX для компонента нижнего колонтитула. Функция не принимает никаких реквизитов, поэтому у нее пустой список параметров. Функция возвращает элемент JSX, который использует элемент ‹div› с именем класса «нижний колонтитул». Атрибут className эквивалентен атрибуту class в HTML, но он переименован, чтобы избежать путаницы с классом ключевого слова JavaScript. Элемент ‹div› содержит элемент ‹p› с текстом «© 2023 by My Website. Все права защищены.". Вот фрагмент кода для функции:
const Footer: React.FC = () => {
return (
<div className="footer">
<p>© 2023 by My Website. All rights reserved.</p>
</div>
);
};
Вот и все! Вы определили один компонент: Нижний колонтитул и использовали его для отображения простого нижнего колонтитула веб-сайта с некоторым текстом.
Теперь мы применяем стили CSS для файла App.css, чтобы веб-сайт выглядел так, как мы хотим.
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab&display=swap');
/* Set the color scheme */
:root {
--primary-color: hsl(289, 71%, 49%);
--secondary-color: #a218ec;
--tertiary-color: hsl(289, 71%, 49%);
--quaternary-color: #090404;
--quinary-color: #000000;
--bg-color: #ffffff;
--text-color: #000000;
}
/* Set the body properties */
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
/* Set the App properties */
.App {
display: flex;
flex-direction: column;
min-height: 100vh;
/* background-color: var(--bg-color); */
/* color: var(--text-color); */
}
/* Set the header properties */
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--primary-color);
color: var(--quaternary-color);
}
/* Set the header h1 properties */
.header h1 {
margin-left: 20px;
font-family: 'Roboto Slab', serif;
}
/* Set the nav-list properties */
.nav-list {
display: flex;
list-style-type: none;
}
/* Set the nav-item properties */
.nav-item {
margin-right: 20px;
}
/* Set the nav-item a properties */
.nav-item a {
color: var(--quaternary-color);
text-decoration: none;
}
/* Set the nav-item hover effect */
.nav-item:hover {
background-color: var(--secondary-color);
}
/* Set the main properties */
.main {
flex-grow: 1;
}
/* Set the hero properties */
.hero {
display: flex; /* This makes the hero element a flex container */
flex-direction: column; /* This makes the flex items stack vertically */
align-items: center; /* This makes the flex items align horizontally in the center */
justify-content: space-evenly; /* This makes the flex items distribute evenly along the vertical axis */
height: 80vh;
background-image: url('https://images.unsplash.com/photo-1508615070457-7baeba4003e4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: center;
}
/* Set the hero h2 properties */
.hero h2 {
color: var(--quaternary-color);
font-family: 'Roboto Slab', serif;
}
/* Set the hero p properties */
.hero p {
color: var(--quaternary-color);
}
/* Set the hero button properties */
.hero button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: var(--secondary-color);
color: var(--quaternary-color);
}
/* Set the hero button hover effect */
.hero button:hover {
transform: scale(1.1);
}
/* Set the features properties */
.features {
display: grid;
grid-template-columns: repeat(4, auto);
}
/* Set the feature properties */
.feature {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
/* Set the feature icon properties */
.feature svg {
font-size: 40px;
color: var(--primary-color);
}
/* Set the feature h3 properties */
.feature h3 {
margin-top: 10px;
}
/* Set the feature p properties */
.feature p {
text-align: center;
}
/* Set the footer properties */
.footer {
background-color: var(--primary-color);
color: var(--quaternary-color);
text-align: center;
}
Объяснение:
Во-первых, давайте посмотрим на оператор импорта. Это заявление импортирует некоторые шрифты из Google Fonts, службы, предоставляющей бесплатные шрифты для вашего веб-сайта. Вы можете использовать правило @import для импорта шрифтов или других файлов CSS в ваш файл CSS. Вот фрагмент кода для оператора импорта:
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab&display=swap');
Далее, давайте посмотрим на корневой селектор. Этот селектор нацелен на корневой элемент документа, которым обычно является элемент ‹html›. Вы можете использовать селектор :root для определения переменных, которые можно использовать в вашем файле CSS. Переменные — это способ хранения значений, которые можно повторно использовать или изменить позже. Вы можете использовать функцию var() для доступа к переменным в вашем файле CSS. В этом случае корневой селектор определяет некоторые переменные для цветовой схемы вашего веб-сайта. Для указания цветов можно использовать различные цветовые форматы, например шестнадцатеричный, RGB, HSL или ключевые слова. Вот фрагмент кода корневого селектора:
/* Set the color scheme */
:root {
--primary-color: hsl(289, 71%, 49%);
--secondary-color: #a218ec;
--tertiary-color: hsl(289, 71%, 49%);
--quaternary-color: #090404;
--quinary-color: #000000;
--bg-color: #ffffff;
--text-color: #000000;
}
Затем давайте посмотрим на селектор тела. Этот селектор нацелен на элемент ‹body› документа, который содержит весь видимый контент вашего веб-сайта. Вы можете использовать селектор body, чтобы установить некоторые глобальные стили для вашего веб-сайта, такие как поля, семейство шрифтов, цвет фона или цвет. Свойство margin устанавливает пространство вокруг границы элемента. Свойство font-family устанавливает шрифт, который используется для текста в элементе. Свойство background-color устанавливает цвет, заполняющий фон элемента. Свойство color устанавливает цвет текста в элементе. Вот фрагмент кода для селектора тела:
/* Set the body properties */
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
Далее давайте посмотрим на селектор приложений. Этот селектор нацелен на элемент с className «App». Атрибут className эквивалентен атрибуту class в HTML, но он переименован, чтобы избежать путаницы с классом ключевого слова JavaScript. Вы можете использовать точку (.) перед именем класса, чтобы выбрать элементы с этим именем класса в CSS. В этом случае селектор приложений нацелен на элемент ‹div›, который используется в качестве контейнера для вашего приложения React. Вы можете использовать React для создания компонентов, которые могут отображать данные, обрабатывать события и управлять состоянием на вашем веб-сайте. React использует JSX, расширение синтаксиса, похожее на HTML, но на самом деле являющееся JavaScript. Селектор приложений устанавливает некоторые стили для вашего контейнера приложений, такие как отображение, направление гибкости и минимальная высота. Свойство display определяет способ отображения элемента на экране. Свойство flex-direction задает способ размещения flex-элементов в flex-контейнере. Flex-контейнер — это элемент, который использует display: flex или display: inline-flex для гибкого размещения своих дочерних элементов. Flex-элемент — это дочерний элемент flex-контейнера. Свойство min-height устанавливает минимальную высоту элемента. Вот фрагмент кода для селектора приложений:
/* Set the App properties */
.App {
display: flex;
flex-direction: column;
min-height: 100vh;
}
Далее, давайте посмотрим на селектор заголовка h1. Этот селектор нацелен на элемент ‹h1›, который является потомком элемента с className «header». Вы можете использовать пробел между двумя селекторами для выбора элементов, которые являются потомками другого элемента в CSS. Потомок — это элемент, вложенный в другой элемент в структуре HTML. В этом случае селектор заголовка h1 нацелен на элемент ‹h1›, который находится внутри элемента ‹div› с className «header». Селектор заголовка h1 устанавливает некоторые стили для заголовка заголовка, такие как margin-left и font-family. Свойство margin-left устанавливает отступ слева от границы элемента. Свойство font-family устанавливает шрифт, который используется для текста в элементе. Вот фрагмент кода для селектора заголовка h1:
/* Set the header h1 properties */
.header h1 {
margin-left: 20px;
font-family: 'Roboto Slab', serif;
}
Затем давайте посмотрим на селектор навигационного списка. Этот селектор нацелен на элемент с className «nav-list». Селектор списка навигации нацелен на элемент ‹ul›, который используется в качестве компонента для списка навигации вашего веб-сайта. В списке навигации отображаются четыре элемента со значками и ссылками на ваш сайт. Селектор nav-list задает некоторые стили для вашего компонента навигационного списка, такие как display и list-style-type. Свойство display определяет способ отображения элемента на экране. Свойство list-style-type задает стиль маркеров элементов списка в списке. Вот фрагмент кода для селектора навигационного списка:
/* Set the nav-list properties */
.nav-list {
display: flex;
list-style-type: none;
}
Далее, давайте посмотрим на селектор элементов навигации. Этот селектор нацелен на элемент с className «nav-item». Селектор nav-item нацелен на элемент ‹li›, который является дочерним элементом элемента с className «nav-list». Вы можете использовать знак «больше» (›) между двумя селекторами, чтобы выбрать элементы, которые являются прямыми дочерними элементами другого элемента в CSS. Прямой дочерний элемент — это элемент, который находится на один уровень ниже другого элемента в структуре HTML. В этом случае селектор nav-item нацеливается на элемент ‹li›, который находится внутри элемента ‹ul› с className «nav-list». Селектор элементов навигации устанавливает некоторые стили для вашего компонента элемента навигации, например, margin-right. Свойство margin-right устанавливает пространство справа от границы элемента. Вот фрагмент кода для селектора элементов навигации:
/* Set the nav-item properties */
.nav-item {
margin-right: 20px;
}
Затем давайте посмотрим на селектор элемента навигации. Этот селектор нацелен на элемент ‹a›, который является потомком элемента с className «nav-item». Вы можете использовать пробел между двумя селекторами для выбора элементов, которые являются потомками другого элемента в CSS. Потомок — это элемент, вложенный в другой элемент в структуре HTML. В этом случае селектор nav-item a нацелен на элемент ‹a›, который находится внутри элемента ‹li› с className «nav-item». Селектор элемента навигации устанавливает некоторые стили для компонента ссылки элемента навигации, такие как цвет и оформление текста. Свойство color устанавливает цвет текста в элементе. Свойство text-decoration задает способ оформления текста в элементе, например добавление или удаление подчеркивания. Вот фрагмент кода для селектора элемента навигации:
/* Set the nav-item a properties */
.nav-item a {
color: var(--quaternary-color);
text-decoration: none;
}
Далее, давайте посмотрим на эффект наведения на элемент навигации. Этот эффект изменяет внешний вид элемента, когда вы наводите на него курсор мыши. Вы можете использовать двоеточие (:), за которым следуют псевдоклассы, для выбора элементов на основе их состояния или положения в CSS. Псевдокласс — это ключевое слово, представляющее особое состояние или положение элемента. В этом случае вы можете использовать :hover для выбора элементов при наведении на них курсора мыши. Селектор nav-item:hover нацеливается на элемент с className «nav-item», когда на него наводится курсор мыши. Селектор nav-item:hover устанавливает некоторые стили для компонента элемента навигации при наведении на него курсора, например background-color. Свойство background-color устанавливает цвет, заполняющий фон элемента. Вот фрагмент кода для эффекта наведения на элемент навигации:
/* Set the nav-item hover effect */
.nav-item:hover {
background-color: var(--secondary-color);
}
Затем давайте посмотрим на основной селектор. Этот селектор нацелен на элемент с className «main». Основной селектор нацелен на элемент ‹div›, который используется в качестве компонента основного контента вашего веб-сайта. В основном контенте отображается раздел героя и раздел функций для вашего веб-сайта. Основной селектор устанавливает некоторые стили для основного компонента содержимого, например flex-grow. Свойство flex-grow устанавливает, насколько может увеличиваться flex-элемент относительно остальных flex-элементов в flex-контейнере. Flex-элемент — это дочерний элемент flex-контейнера. Flex-контейнер — это элемент, который использует display: flex или display: inline-flex для гибкого размещения своих дочерних элементов. Вот фрагмент кода основного селектора:
/* Set the main properties */
.main {
flex-grow: 1;
}
Далее давайте посмотрим на селектор героев. Этот селектор нацелен на элемент с className «hero». Селектор героя нацелен на элемент ‹div›, который используется в качестве компонента для раздела героя вашего веб-сайта. В разделе героя отображается приветственное сообщение и кнопка для вашего веб-сайта. Селектор героя устанавливает некоторые стили для вашего компонента героя, такие как display, flex-direction, align-items, justify-content, height, background-image, background-size и background-position. Свойство display определяет способ отображения элемента на экране. Свойство flex-direction задает способ размещения flex-элементов в flex-контейнере. Flex-контейнер — это элемент, который использует display: flex или display: inline-flex для гибкого размещения своих дочерних элементов. Flex-элемент — это дочерний элемент flex-контейнера. Свойство align-items устанавливает способ выравнивания flex-элементов вдоль поперечной оси в flex-контейнере. Поперечная ось — это ось, перпендикулярная главной оси во гибком контейнере. Главная ось — это ось, вдоль которой flex-элементы размещаются во flex-контейнере. Свойство justify-content устанавливает, как flex-элементы распределяются вдоль главной оси в flex-контейнере. Свойство height устанавливает высоту элемента. Свойство background-image устанавливает изображение, которое заполняет фон элемента. Свойство background-size устанавливает способ изменения размера фонового изображения в соответствии с размерами элемента. Свойство background-position устанавливает, как фоновое изображение должно располагаться в границах элемента. Вот фрагмент кода для селектора героев:
/* Set the hero properties */
.hero {
display: flex; /* This makes the hero element a flex container */
flex-direction: column; /* This makes the flex items stack vertically */
align-items: center; /* This makes the flex items align horizontally in the center */
justify-content: space-evenly; /* This makes the flex items distribute evenly along the vertical axis */
height: 80vh;
background-image: url('https://images.unsplash.com/photo-1508615070457-7baeba4003e4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: center;
}
Затем давайте посмотрим на селектор h2 героя. Этот селектор нацелен на элемент ‹h2›, который является потомком элемента с className «hero». Вы можете использовать пробел между двумя селекторами для выбора элементов, которые являются потомками другого элемента в CSS. Потомок — это элемент, вложенный в другой элемент в структуре HTML. В этом случае селектор h2 героя нацеливается на элемент ‹h2›, который находится внутри элемента ‹div› с className «hero». Селектор h2 героя устанавливает некоторые стили для заголовка вашего героя, такие как цвет и семейство шрифтов. Свойство color устанавливает цвет текста в элементе. Свойство font-family устанавливает шрифт, который используется для текста в элементе. Вот фрагмент кода для селектора h2:
/* Set the hero h2 properties */
.hero h2 {
color: var(--quaternary-color);
font-family: 'Roboto Slab', serif;
}
Селектор кнопки героя нацелен на элемент ‹button›, который является потомком элемента с className «hero». Вы можете использовать пробел между двумя селекторами для выбора элементов, которые являются потомками другого элемента в CSS. Потомок — это элемент, вложенный в другой элемент в структуре HTML. В этом случае селектор кнопки героя нацелен на элемент ‹button›, который находится внутри элемента ‹div› с className «hero». Селектор главной кнопки задает некоторые стили для компонента главной кнопки, такие как отступы, граница, радиус границы, цвет фона и цвет. Свойство padding устанавливает пространство вокруг содержимого элемента. Свойство border устанавливает ширину, стиль и цвет границы вокруг элемента. Свойство border-radius определяет, насколько скруглены углы элемента. Свойство background-color устанавливает цвет, заполняющий фон элемента. Свойство color устанавливает цвет текста в элементе. Вот фрагмент кода для выбора главной кнопки:
/* Set the hero button properties */
.hero button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: var(--secondary-color);
color: var(--quaternary-color);
}
Далее, давайте посмотрим на эффект наведения на кнопку героя. Этот эффект изменяет внешний вид элемента, когда вы наводите на него курсор мыши. Вы можете использовать двоеточие (:), за которым следуют псевдоклассы, для выбора элементов на основе их состояния или положения в CSS. Псевдокласс — это ключевое слово, представляющее особое состояние или позицию элемента. В этом случае вы можете использовать :hover для выбора элементов при наведении на них курсора мыши. Селектор hero button:hover нацеливается на элемент ‹button› с className «hero», когда на него наводится курсор мыши. Селектор hero button:hover устанавливает некоторые стили для компонента главной кнопки при наведении на него курсора, например, преобразование. Свойство преобразования применяет преобразование к элементу, например масштабирование, вращение, наклон или перемещение. В этом случае свойство преобразования увеличивает размер элемента на 10%. Вот фрагмент кода для эффекта наведения на кнопку героя:
/* Set the hero button hover effect */
.hero button:hover {
transform: scale(1.1);
}
Вот и все! Вы определили два селектора: кнопка героя и кнопка героя: наведение, и использовали их для стилизации и добавления эффекта к кнопке в разделе героя вашего веб-сайта. Я надеюсь, что это объяснение поможет вам лучше понять код.
Последнее, что нам нужно сделать, это пойти и изменить файл App.tsx, чтобы отразить новые компоненты, которые у нас есть:
import React from "react";
import "./App.css";
import Main from "./LandingPage/MainBody";
import Header from "./LandingPage/Header";
import StandardFooter from "./StandardFooter";
// Define the App component that renders the Header, Main, and Footer components
const App: React.FC = () => {
return (
<div className="App">
<Header />
<Main />
<StandardFooter />
</div>
);
};
export default App;
И с этим мы закончили!
Наш сайт выглядит так
С этого момента вы можете использовать этот шаблон любым удобным для вас способом.
Я надеюсь, что помог вам в вашей карьере веб-разработчика React, и надеюсь, что вы добьетесь многого благодаря тому, чему мы научились сегодня.
Спасибо и удачи!
