Практическая работа №2. Создание приложений, маршрутов и шаблонов

1

100

Для чего используется тег <div> в HTML?

<div> используется как универсальный блочный контейнер для группировки элементов и построения структуры страницы.

200

Что такое React component?

Это независимая часть интерфейса, которая возвращает UI и может быть переиспользована.

300

Для чего используется Node.js?

Для выполнения JavaScript на сервере и создания backend-приложений.

400

Что такое middleware в Node.js (Express)?

Это функции, которые обрабатывают запрос между получением запроса и отправкой ответа.

500

Создай React-приложение с тремя страницами:

Требования:

• Страницы: Home, About, Contact
• Используй react-router-dom
• Настрой маршруты:
  • / → Home
  • /about → About
  • /contact → Contact

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./pages/Home";

import About from "./pages/About";

import Contact from "./pages/Contact";

import Layout from "./layout/Layout";

import NotFound from "./pages/NotFound";

function App() {

  return (

    <BrowserRouter>

      <Routes>

        <Route path="/" element={<Layout />}>

          <Route index element={<Home />} />

          <Route path="about" element={<About />} />

          <Route path="contact" element={<Contact />} />

          <Route path="*" element={<NotFound />} />

        </Route>

      </Routes>

    </BrowserRouter>

  );

}

export default App;

2

100

Что делает console.log() в JavaScript?

Выводит данные в консоль браузера для отладки и проверки работы кода.

200

Что делает position: absolute в CSS?

Позиционирует элемент относительно ближайшего родителя с позиционированием, либо окна браузера.

300

Что делает useState в React?

Позволяет создавать и изменять состояние компонента.

400

Чем React отличается от обычного JavaScript?

React использует компонентный подход и виртуальный DOM для управления интерфейсом.

500

Создай общий шаблон (Layout).

Требования:

• В Layout добавь меню (ссылки на страницы)
• Используй <Outlet /> для отображения страниц
• Layout должен применяться ко всем маршрутам

import { Link, Outlet } from "react-router-dom";

function Layout() {

  return (

    <div>

      <header>

        <nav>

          <Link to="/">Home</Link> |{" "}

          <Link to="/about">About</Link> |{" "}

          <Link to="/contact">Contact</Link>

        </nav>

      </header>

      <main>

        <Outlet />

      </main>

      <footer>

        <p>Footer content</p>

      </footer>

    </div>

  );

}

export default Layout;

3

100

Что такое CSS и для чего он нужен?

CSS используется для оформления и стилизации HTML-элементов (цвета, размеры, расположение и т.д.).

200

Что такое JavaScript?

Это язык программирования, который делает веб-страницы интерактивными.

300

Что такое MongoDB?

Это NoSQL база данных, которая хранит данные в виде документов (JSON-подобных объектов).

400

Как работает MongoDB в backend-приложениях?

Она хранит данные и позволяет выполнять операции создания, чтения, обновления и удаления (CRUD).

500

Сделай меню навигации.

Требования:

• Используй Link или NavLink
• Переход между страницами без перезагрузки
• Добавь простую активную ссылку (если используешь NavLink)

pages/Home.jsx

function Home() {
  return <h1>Home Page</h1>;
}

export default Home;

pages/About.jsx

function About() {
  return <h1>About Page</h1>;
}

export default About;

pages/Contact.jsx

function Contact() {
  return <h1>Contact Page</h1>;
}

export default Contact;

4

100

Что делает тег <a> в HTML?

Создаёт гиперссылку для перехода на другую страницу или ресурс.

200

Что такое props в React?

Это параметры, которые передаются в компонент для отображения данных.

300

Что такое API?

Это интерфейс для взаимодействия между клиентом и сервером.

400

Что такое REST API?

Это архитектурный стиль для обмена данными между клиентом и сервером через HTTP.

500

Добавь обработку неправильных маршрутов.

Требования:

• Создай страницу NotFound
• Для всех неизвестных путей (*) показывай её
• Выведи сообщение: “Page not found”

pages/NotFound.jsx

function NotFound() {
  return <h1>Page not found</h1>;
}

export default NotFound;