sunmeat

App.jsx:

import { useState } from 'react';
import './App.css';

function App() {
    const [activeSection, setActiveSection] = useState('home');

    // обработка плавной прокрутки
    const handleNavClick = (e, targetId) => {

sunmeat

App.jsx:

import {useState} from 'react';
import {
    Navbar,
    Nav,
    Container,
    Button,
    Carousel,
    Card,

sunmeat

App.scss:

// ---------------------------------------------------------------
// переменные
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
$themes: dark, light, neutral;

// ---------------------------------------------------------------

sunmeat

App.sass:

// ---------------------------------------------------------------
// переменные
$primary-color: #3498db
$secondary-color: #2ecc71
$font-stack: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
$themes: dark, light, neutral

// ---------------------------------------------------------------

sunmeat

App.less:

// переменные
@primary-color: #007acc;
@secondary-color: lighten(@primary-color, 20%);
@text-color: #fff;
@padding: 16px;

// миксин (переиспользуемый блок), что-то вроде функции
.box-shadow(@color) {

sunmeat

файл стилей Button.css:

.button {
  background-color: #00cc99;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}

sunmeat

файл стилей Button.module.css:

в названии файла конечно не обязательно использовать расширение .module для работы с CSS-модулями,
но! это общепринятая конвенция в React и других фреймворках (например, Next.js),
которая помогает инструментарию (например, Webpack, Vite) распознать файл как CSS-модуль.

если название содержит .module.css, система автоматически генерирует уникальные имена классов, и импортирует стили как объект JavaScript
без .module (например, просто .css) файл будет рассматриваться как обычный CSS-файл с глобальными стилями,
если не настроен специальный плагин или конфигурация!

sunmeat

function Greeting() {
  const styles = {
    color: 'blue',
    backgroundColor: 'lightgray',
    padding: '10px',
    borderRadius: '5px',
  };

  return <div style={styles}>Привет, мир!</div>;
}

sunmeat

App.jsx:

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(false); // начальное состояние авторизации
    const [isReady, setIsReady] = useState(false); // состояние готовности компонента

    // имитация загрузки данных, тут может быть прелоадер

sunmeat

src / components / List.jsx:

import React from 'react';

// компонента для одного элемента списка
function ListItem({ person }) {
    return (
        <li>
            {person.firstName} {person.lastName} - {person.phoneNumber}
        </li>