src/App.jsx - master - drndsv/react

src/App.jsx
52 строки2 KB
drndsv
ввводит с бэка данные
28 апр 2025, 16:02
28 апр 2025, 16:0211f3df5
import Header from "./components/Header/Header";
import TeachingSection from "./components/TeachigSection";
import DifferencesSection from "./components/DifferencesSection";
import IntroSection from "./components/IntroSection";
import TabsSection from "./components/TabsSection";
import FeedbackSection from "./components/FeedbackSection";
import { useState } from "react";
import EffectsSection from "./components/EffectsSection";
// import { Fragment } from "react";

export default function App() {
  const [visible, setVisible] = useState(true);
  const [tab, setTab] = useState("effect");

  // setTimeout(() => {
  //   setVisible(false);
  // }, 3000);

  return (
    // при использовании jsx нам всегда нужно иметь корневой элемент
    // самый просто варинт это тег div
    // если мы удалим корневой элемент и попроубем возвращать
    // несколько одинаковых детей в jsx,
    // то по факту это не теги, а результат работы этих функцих
    // однако в react есть способы збавлять от лишних тегов, т.к. это лишняя нагрузка
    // поэтому мы можем импортировать из react Fragment
    // Fragment дает нам корневой элемент, но в коде мы уже видим что например,
    // div, который был до этого пропал (не идет в DOM-дерево)
    // нам не обязательно импортировать Fragment, а можно описать просто как
    // пустой тег <></>
    <>
      {visible && <Header />}
      <main>
        <IntroSection />

        <TabsSection active={tab} onChange={(current) => setTab(current)} />

        {tab === "main" && (
          <>
            <TeachingSection />
            <DifferencesSection />
          </>
        )}
        {tab === "feedback" && <FeedbackSection />}

        {tab === "effect" && <EffectsSection />}
      </main>
    </>
  );
}

// 2:25