al-f/intprog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: al-f:main
Branches Tags
al-f:main
al-f:lw06
..
compare: al-f:lw06
Branches Tags
al-f:main
al-f:lw06

No commits in common. "main" and "lw06" have entirely different histories.
main ... lw06

2 changed files with 33 additions and 49 deletions
Show Stats Expand all files Collapse all files

5
README.md
View File

@ -25,7 +25,7 @@
Лабораторные работы на выбор: Лабораторные работы на выбор:
- [Лабораторная работа №F1 - Одностраничное приложение (TypeScript)](./lwF1/README.md) - [Лабораторная работа №F1 - Одностраничное приложение (React)](./lwF1/README.md)
- [Лабораторная работа №F2 - Получение данных через API (Fetch)](./lwF2/README.md) - [Лабораторная работа №F2 - Получение данных через API (Fetch)](./lwF2/README.md)
- [Лабораторная работа №B1 - Создание онлайн-чата при помощи WebSocket](./lwB1/README.md) - [Лабораторная работа №B1 - Создание онлайн-чата при помощи WebSocket](./lwB1/README.md)
- [Лабораторная работа №B2 - Разработка чат-бота для Telegram](./lwB2/README.md) - [Лабораторная работа №B2 - Разработка чат-бота для Telegram](./lwB2/README.md)
@ -35,6 +35,5 @@
Так как у ИСЭ дисциплина идёт всего 1 семестр, то в нём есть элементы как frontend, так и backend. Так как у ИСЭ дисциплина идёт всего 1 семестр, то в нём есть элементы как frontend, так и backend.
Соответственно, и экзамен один, в котором два вопроса: на каждый раздел по одному. Соответственно, и экзамен один, в котором два вопроса: на каждый раздел по одному.
Для допуска к экзамену надо защитить все обязательные работы и любые две из необязательных на выбор. Для допуска к экзамену надо защитить все обязательные работы и две их необязательных на выбор.
Например, из дополнительных можно взять B1 и B2, F1 и B1 или _любые другие комбинации_.
В сумме 8, что соответствует учебному плану. В сумме 8, что соответствует учебному плану.

77
lwF1/README.md
View File

@ -1,18 +1,16 @@
# Лабораторная работа №F1 - Одностраничное приложение (TypeScript) # Лабораторная работа №F1 - Одностраничное приложение (React)
## Цель работы ## Цель работы
Освоение среды локальной фронтенд-разработки на базе NodeJS. Освоение среды локальной фронтенд-разработки на базе NodeJS.
Освоение языка программирования TypeScript. Освоение языка программирования TypeScript.
Освоение библиотеки для построения одностраничных приложений: React, Vue или другой. Освоение библиотеки React.
## Ход работы ## Ход работы
1. Развернуть локальную среду разработки для создания одностраничных (SPA) приложений. 1. Развернуть локальную среду разработки для создания React-приложений.
2. Создать шаблон приложения на выбранной технологии с использованием языка TypeScript. 2. Создать шаблон React-приложения с использованием языка TypeScript.
3. Изменить шаблон, добавив несколько компонентов различного назначения. 3. Изменить шаблон, добавив несколько компонентов с пропсами различного типа.
> Задание описано для React, однако можете исполоьзовать в качестве аналога любую другую похожую технологию.
## Настройка среды разработки ## Настройка среды разработки
@ -24,67 +22,46 @@
Всё представленное ПО является бесплатным и свободным для некоммерческого использования. Всё представленное ПО является бесплатным и свободным для некоммерческого использования.
Чтобы проверить установку NodeJS, выполните в терминале (можно в VS Code) следующие команды. Чтобы проверить установку NodeJS, выполните в терминале следующие команды.
Вывод должен быть похож на представленный ниже. Вывод должен быть похож на представленный ниже.
```bash ```bash
$ node --version $ node --version
v20.11.0 v16.13.2
$ npx --version $ npx --version
10.2.4 8.1.2
``` ```
> Если при выполнении команды отображается номер версии - всё хорошо. > Если при выполнении команды отображается номер версии - всё хорошо.
> Если нет, то, возможно, необходимо перезагрузить ПК и попробовать ещё раз. > Если нет, то, возможно, необходимо перезагрузить ПК и попробовать ещё раз.
## Создание первого SPA-приложения ## Создание первого React-приложения
Для создания первого SPA-приложения создайте пустую папку, откройте её в VS Code и во встроенном терминале выполните следующую команду: `npm create vite@latest ip-lw-f01`. Для создания первого React-приложения выполните следующую команду: `npx create-react-app lwF1 --template=typescript`.
Она запускает процесс создания простейшего SPA-приложения в папке _ip-lw-f01_. Она запускает создание простейшего React-приложения с использованием TypeScript в папке lwF1.
Для использования React выберите `React` → `TypeScript`. Собственно, приложение также будет называться lwF1.
В конце должно возникнуть сообщение: В конце должно возникнуть сообщение `Happy hacking!`.
``` Для выполнения данного желания необходимо перейти в созданный каталог (`cd lwF1`) и запустить VS Code в этой папке (`code .`).
Done. Now run:
cd ip-lw-f01
npm install
npm run dev
```
Выполните указанные команды во встроенном терминале. Если более подробно рассматривать CRA-шаблон, то можно выделить следующие файлы и каталоги:
В конце должны получить похожий вывод:
```
VITE v5.2.9 ready in 601 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
```
Для отображения сайте перейдите по ссылке, которая указана в выводе.
Для остановки отладки нажмите `Ctrl+C`.
Если более подробно рассматривать созданный шаблон, то можно выделить следующие файлы и каталоги:
- `node_modules` - огромный каталог, где содержатся исходные тексты подключаемых библиотек. - `node_modules` - огромный каталог, где содержатся исходные тексты подключаемых библиотек.
- `public` - изображения, манифесты и прочие статические файлы, которые необходимо для отображения нашего веб-приложения. - `public` - изображения, манифесты и прочие статические файлы, которые необходимо для отображения нашего веб-приложения. Также содержит основной документ, куда будет внедряться наше React-приложение: `index.html`.
- `src` - весь наш исходных код, в т.ч. подключаемые динамически стили и изображения, связанные с нашим React-приложением. - `src` - таблицы стилей и компоненты, связанные с нашим React-приложением.
- `index.html` - основной файл для внедрения нашего одностраничного приложения.
- `package.json` - конфигурация приложения.
- `package-lock.json` - связь библиотек из `node_modules` с нашим приложением. - `package-lock.json` - связь библиотек из `node_modules` с нашим приложением.
- `package.json` - конфигурация приложения.
- `tsconfig.json` - конфигурация компилятора TypeScript. - `tsconfig.json` - конфигурация компилятора TypeScript.
- `vite.config.ts` - конфигурация нашего прилжения, основанного на vite.
Для запуска приложения необходимо в терминале (возможно запустить его прямо внутри VS Code) команду `npm run start`. Для запуска приложения необходимо в терминале (возможно запустить его прямо внутри VS Code) команду `npm run start`.
Должен открыться браузер с анимированным логотипом реакта. Должен открыться браузер с анимированным логотипом реакта.
Не завершая приложения, измените какой-нибудь текст в файле `src/App.tsx`, сохраните файл и убедитесь, что сайт автоматически изменился в браузере без необходимости перезагрузки страницы. Не завершая приложения, измените какой-нибудь текст в файле `src/App.tsx`, сохраните файл и убедитесь, что в браузере сайт автоматически изменился.
## Изучение TypeScript ## Изучение TypeScript
TypeScript — это диалект ECMAScript, в котором добавлена строгая (насколько это возможно) типизация. TypeScript -- это диалект ECMAScript, в котором добавлена строгая (насколько это возможно) типизация.
Другими словами, это "JavaScript с типами". Другими словами, это "JavaScript с типами".
Чтобы понять, что это такое, можете посетить официальный сайт технологии: <https://www.typescriptlang.org/docs/handbook/intro.html>. Чтобы понять, что это такое, можете посетить официальный сайт технологии: <https://www.typescriptlang.org/docs/handbook/intro.html>.
@ -108,6 +85,8 @@ TypeScript — это диалект ECMAScript, в котором добавл
Для этого в папке `src` можно добавить файл `Counter.tsx` и написать туда следующий код: Для этого в папке `src` можно добавить файл `Counter.tsx` и написать туда следующий код:
```tsx ```tsx
import React from 'react'; // Подключение react.
var Counter = () => { var Counter = () => {
return ( return (
<div>Тут будет счётчик.</div> <div>Тут будет счётчик.</div>
@ -127,6 +106,7 @@ export default Counter;
Также сразу заиспользуем переменную с состоянием в разметке нашего компонента: Также сразу заиспользуем переменную с состоянием в разметке нашего компонента:
```tsx ```tsx
import React from 'react';
import { useState } from 'react'; // Подключаем ссылку на useState. import { useState } from 'react'; // Подключаем ссылку на useState.
var Counter = () => { var Counter = () => {
@ -200,6 +180,8 @@ var Counter = (props: CounterProps) => {
Допустим, заглушка для кнопки будет такая: Допустим, заглушка для кнопки будет такая:
```tsx ```tsx
import React from 'react';
interface ButtonProps { interface ButtonProps {
text: string; text: string;
onClick: () => any; // TODO: Что это за пропс? onClick: () => any; // TODO: Что это за пропс?
@ -220,11 +202,14 @@ export default Button;
Демонстрация работы производится на лабораторном занятии. Демонстрация работы производится на лабораторном занятии.
Для того, чтобы запустить код на лабораторных компьютерах, можете сформировать архив с кодом лабораторной работы или напрямую загрузить исходные тексты в облачное хранилище. Если у Вас есть навык по работе с git, рекомендуется выложить код в публичный репозиторий и тем самым продемонстрировать навык использования этой технологии.
В этом случае добавьте, пожалуйста, файл `.gitignore`, контент которого можно взять [отсюда](https://github.com/github/gitignore/blob/master/Node.gitignore).
Если же у Вас нет навыка работы с git, то можете сформировать архив с кодом лабораторной работы или напрямую загрузить исходные тексты в облачное хранилище, чтобы потом перенести их на лабораторные компьютеры.
Однако помните при этом, что **необходимо удалить папку `node_modules`**. Однако помните при этом, что **необходимо удалить папку `node_modules`**.
В ней содержатся исходные тексты всех подключённых библиотек (и библиотек, подключённым к библиотекам, и .... и так далее, в общем), которые можно восстановить в любой момент командой `npm install`. В ней содержатся исходные тексты всех подключённых библиотек (и библиотек, подключённым к библиотекам, и .... и так далее, в общем), которые на проверку отправлять не нужно.
## Сдача лабораторной работы ## Сдача лабораторной работы
На лабораторных ПК должен быть установлен NodeJS и VS Code. На лабораторных ПК должен быть установлен NodeJS и VS Code.
Поэтому SPA-приложение необходимо будет продемонстрировать вместе с его кодом. Поэтому React-приложение необходимо будет продемонстрировать вместе с его кодом.