1. Пример компонента StudentInfo:

React-код (JSX):

function StudentInfo({ name, group }) {

return (

<div>

<h2>Студент: {name}</h2>

<p>Группа: {group}</p>

</div>

);

}

function App() {

return (

<StudentInfo

name="Алия"

group="IT-201"

/>

);

}

export default App;

Результат:

Студент: Алия

Группа: IT-201

Данные передаются компоненту через props.

2. Пример отображения сообщения:

React-код (JSX):

import { useState } from "react";

function WelcomeMessage() {

const [visible, setVisible] = useState(false);

return (

<div>

<button onClick={() => setVisible(true)}>

Показать сообщение

</button>

{visible && (

<p>Добро пожаловать на портал!</p>

)}

</div>

);

}

export default WelcomeMessage;

Результат:

До нажатия кнопки сообщение отсутствует.

После нажатия появляется текст:

Добро пожаловать на портал!

Состояние visible управляет отображением абзаца.

3. Пример структуры приложения:

App

|

|-- Header

|

|-- Navigation

|

|-- HomePage

|

|-- NewsPage

|

|-- SchedulePage

|

|-- StudentAccountPage

|

|-- Footer

Предлагаемые маршруты:

/ Главная страница

/news Новости

/schedule Расписание

/account Личный кабинет

Способ формирования страниц:

Главная страница:

Можно использовать статическую генерацию, если содержимое изменяется редко.

Новости:

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

Расписание:

Требует актуальных данных. Их можно загружать с сервера через API.

Личный кабинет:

Содержит персональные данные студента. Доступ должен проверяться сервером, а содержимое формироваться с учётом пользователя.

Результат:

Приложение разделено на самостоятельные компоненты, а для разных разделов выбраны подходящие способы получения и отображения данных.