Цель работы

Научиться устанавливать React-проект, запускать его и выводить базовый компонент.

Теоретическая часть

React — это JavaScript-библиотека с открытым исходным кодом для создания пользовательских интерфейсов. Основные понятия:

• Компоненты — независимые и повторно используемые части интерфейса
• JSX — синтаксис, похожий на HTML, который позволяет описывать структуру интерфейса в JavaScript
• Виртуальный DOM — эффективный способ обновления интерфейса без полной перерисовки

В этой лабораторной работе мы создадим первый React-проект и выведем на экран простой текст.

Задание

Создать проект yazykovoy-portal и вывести на экран фразу: "Добро пожаловать в Языковой портал!"

Пошаговая инструкция

На РедОС терминал можно открыть с помощью сочетания клавиш Ctrl+Alt+T или через меню приложений.

Эта команда создаст новый React-проект с именем yazykovoy-portal. Процесс установки может занять несколько минут.

После запуска проекта в терминале появится сообщение о том, что приложение запущено, и откроется браузер с адресом http://localhost:3000.

Если браузер не открылся автоматически, откройте его вручную и перейдите по адресу http://localhost:3000.

Эта команда откроет текущую папку в редакторе VS Code. Если у вас не установлен VS Code, сначала установите его.

В панели слева найдите и откройте файл src/App.js.

Замените содержимое функции return() на следующий код:

Нажмите Ctrl+S для сохранения файла. Страница в браузере должна автоматически обновиться, и вы увидите новый заголовок.

Ожидаемый результат

После выполнения всех шагов вы должны увидеть в браузере страницу с заголовком "Добро пожаловать в Языковой портал!"

Если вы видите эту фразу, значит, проект создан и работает корректно.

Связь с демонстрационным экзаменом

Эта лабораторная работа связана с профессиональной компетенцией:

• ПК: Создавать программный код на стороне клиента

На демонстрационном экзамене вам потребуется создать базовую структуру React-приложения, что является первым шагом в разработке полноценного веб-приложения.