Add lwF1
This commit is contained in:
Vladislav Moiseev
parent
bc3f075c51
commit
b2fa8d2552
@ -24,7 +24,7 @@
|
||||
|
||||
Лабораторные работы на выбор:
|
||||
|
||||
* [Лабораторная работа №F1 - Одностраничное приложение (React)](/TODO/README.md)
|
||||
* [Лабораторная работа №F1 - Одностраничное приложение (React)](/lwF1/README.md)
|
||||
* [Лабораторная работа №F2 - Получение данных через API (Fetch)](/TODO/README.md)
|
||||
* [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/TODO/README.md)
|
||||
* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md)
|
||||
|
||||
215
lwF1/README.md
Normal file
215
lwF1/README.md
Normal file
@ -0,0 +1,215 @@
|
||||
# Лабораторная работа №F1 - Одностраничное приложение (React)
|
||||
|
||||
## Цель работы
|
||||
|
||||
Освоение среды локальной фронтенд-разработки на базе NodeJS.
|
||||
Освоение языка программирования TypeScript.
|
||||
Освоение библиотеки React.
|
||||
|
||||
## Ход работы
|
||||
|
||||
1. Развернуть локальную среду разработки для создания React-приложений.
|
||||
2. Создать шаблон React-приложения с использованием языка TypeScript.
|
||||
3. Изменить шаблон, добавив несколько компонентов с пропсами различного типа.
|
||||
|
||||
## Настройка среды разработки
|
||||
|
||||
Необходимо установить следующий софт:
|
||||
|
||||
1. NodeJS: <https://nodejs.org/en/download/>.
|
||||
2. Visual Studio Code: <https://code.visualstudio.com/download>.
|
||||
3. Google Chrome с расширением React Developer Tools: <https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ru>.
|
||||
|
||||
Всё представленное ПО является бесплатным и свободным для некоммерческого использования.
|
||||
|
||||
Чтобы проверить установку NodeJS, выполните в терминале следующие команды.
|
||||
Вывод должен быть похож на представленный ниже.
|
||||
|
||||
```bash
|
||||
$ node --version
|
||||
v16.13.2
|
||||
$ npx --version
|
||||
8.1.2
|
||||
```
|
||||
|
||||
> Если при выполнении команды отображается номер версии - всё хорошо.
|
||||
> Если нет, то, возможно, необходимо перезагрузить ПК и попробовать ещё раз.
|
||||
|
||||
## Создание первого React-приложения
|
||||
|
||||
Для создания первого React-приложения выполните следующую команду: `npx create-react-app lwF1 --template=typescript`.
|
||||
Она запускает создание простейшего React-приложения с использованием TypeScript в папке lwF1.
|
||||
Собственно, приложение также будет называться lwF1.
|
||||
|
||||
В конце должно возникнуть сообщение `Happy hacking!`.
|
||||
|
||||
Для выполнения данного желания необходимо перейти в созданный каталог (`cd lwF1`) и запустить VS Code в этой папке (`code .`).
|
||||
|
||||
Если более подробно рассматривать CRA-шаблон, то можно выделить следующие файлы и каталоги:
|
||||
|
||||
- `node_modules` - огромный каталог, где содержатся исходные тексты подключаемых библиотек.
|
||||
- `public` - изображения, манифесты и прочие статические файлы, которые необходимо для отображения нашего веб-приложения. Также содержит основной документ, куда будет внедряться наше React-приложение: `index.html`.
|
||||
- `src` - таблицы стилей и компоненты, связанные с нашим React-приложением.
|
||||
- `package-lock.json` - связь библиотек из `node_modules` с нашим приложением.
|
||||
- `package.json` - конфигурация приложения.
|
||||
- `tsconfig.json` - конфигурация компилятора TypeScript.
|
||||
|
||||
Для запуска приложения необходимо в терминале (возможно запустить его прямо внутри VS Code) команду `npm run start`.
|
||||
Должен открыться браузер с анимированным логотипом реакта.
|
||||
|
||||
Не завершая приложения, измените какой-нибудь текст в файле `src/App.tsx`, сохраните файл и убедитесь, что в браузере сайт автоматически изменился.
|
||||
|
||||
## Изучение TypeScript
|
||||
|
||||
TypeScript -- это диалект ECMAScript, в котором добавлена строгая (насколько это возможно) типизация.
|
||||
Другими словами, это "JavaScript с типами".
|
||||
|
||||
Чтобы понять, что это такое, можете посетить официальный сайт технологии: <https://www.typescriptlang.org/docs/handbook/intro.html>.
|
||||
Можно почитать эту страницу и другие до _Type Manipulation_.
|
||||
|
||||
Также рассмотрите файл `src/App.tsx`.
|
||||
Благодаря TypeScript среда Visual Studio Code позволяет подсказывать атрибуты у элементов.
|
||||
Кстати, заметьте, что в tsx-файле (аналог js-файла) прямо внутри JS-кода расположена разметка HTML.
|
||||
Странно, не так ли?
|
||||
|
||||
## Изучение React
|
||||
|
||||
Для понимания того, что такое React, рекомендуется ознакомиться с официальной документацией: <https://ru.reactjs.org/docs/getting-started.html> и <https://ru.reactjs.org/tutorial/tutorial.html>.
|
||||
Знакомство с React очень подробное и понятное.
|
||||
Вам стоит понять, чем разработка на React отличается от той разработки приложений, что была у вас до этого.
|
||||
|
||||
## Создание своих компонентов
|
||||
|
||||
Когда вы разобрались, что такое компоненты, давайте добавим собственный.
|
||||
Предположим, мы хотим добавить компонент, который будет показывать кнопку со счётчиком нажатия.
|
||||
Для этого в папке `src` можно добавить файл `Counter.tsx` и написать туда следующий код:
|
||||
|
||||
```tsx
|
||||
import React from 'react'; // Подключение react.
|
||||
|
||||
var Counter = () => {
|
||||
return (
|
||||
<div>Тут будет счётчик.</div>
|
||||
);
|
||||
};
|
||||
export default Counter;
|
||||
```
|
||||
|
||||
На текущий момент весь компонент - это один статический `<div>`-элемент с текстом "Тут будет счётчик" без какой-либо внутренней логики.
|
||||
Чтобы добавить только что созданный компонент в приложение, в `App.tsx` в начале добавьте ссылку на компонент (`import Counter from './Counter';`) и добавьте в разметку рендер компонента (`<Counter />`).
|
||||
|
||||
Теперь поговорим про состояние нашего компонента.
|
||||
Так как у нас компонент-счётчик, то значение счётчика и есть наше "состояние".
|
||||
|
||||
С состоянием можно работать через хук `useState`.
|
||||
Чтобы объявить состояние-число, необходимо в начале функции в нашем компоненте (до `return (`) объявить переменную счётчик и функцию по обновлению состояния.
|
||||
Также сразу заиспользуем переменную с состоянием в разметке нашего компонента:
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { useState } from 'react'; // Подключаем ссылку на useState.
|
||||
|
||||
var Counter = () => {
|
||||
var [ count, setCount ] = useState(0); // И используем. Значение по умолчанию - 0.
|
||||
return (
|
||||
<div>Значение счётчика: {count}.</div>
|
||||
);
|
||||
};
|
||||
export default Counter;
|
||||
```
|
||||
|
||||
Пока у нас нет логики по изменению состояния, поэтому всегда будет отображаться то число, которое указано в `useState`.
|
||||
|
||||
Добавим же её!
|
||||
|
||||
Сперва добавим кнопку в фукнцию рендера.
|
||||
Сразу установим событие по клику на кнопку:
|
||||
|
||||
```tsx
|
||||
return (
|
||||
<div>
|
||||
<div>Значение счётчика: {count}.</div>
|
||||
<button onClick={handleIncrease}>Прибавить 1</button>
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
Этот код изначально работать не будет, так как не объявлена функция-обработчик `handleIncrease`.
|
||||
Добавим её (до `return (`):
|
||||
|
||||
```tsx
|
||||
var handleIncrease = () => {
|
||||
setCount(count + 1);
|
||||
};
|
||||
```
|
||||
|
||||
Код должен заработать!
|
||||
|
||||
Как видите, компонент в реакте - это функция, которая обычно выполняет какую-либо логику и возвращает разметку (тот самый HTML внутри JS).
|
||||
Сам движок React следит за состояниями компонентов и отрисовку их разметки: элементов.
|
||||
Программирование клиентских приложений превращается от манипуляции с DOM-деревом в манипуляцию с состояниями и пропсами компонентов.
|
||||
А что же такое пропсы?
|
||||
|
||||
## Пропсы
|
||||
|
||||
Давайте изменим пример.
|
||||
Пускай мы можем передать в компонент `Counter` начальное значение счётчика и шаг его изменения.
|
||||
|
||||
Изменим код в `App.tsx`: `<Counter start={10} step={5} />`.
|
||||
Приложение пока не будет запускаться, потому что мы объявили значения атрибутов, которые не описали.
|
||||
|
||||
Опишем же их!
|
||||
В `Counter.tsx` добавим перед объявлением блоков интерфейс и заиспользуем его в описании компонента:
|
||||
|
||||
```tsx
|
||||
interface CounterProps {
|
||||
start: number;
|
||||
step: number;
|
||||
}
|
||||
|
||||
var Counter = (props: CounterProps) => {
|
||||
```
|
||||
|
||||
Теперь код работает, однако значения наших параметров игнорируются, потому что мы их не используем.
|
||||
|
||||
Добавьте использование параметров самостоятельно.
|
||||
|
||||
Теперь создадим отдельный компонент под кнопку.
|
||||
Это нужно, например, если на сайте все кнопки должны иметь одинаковое поведение и одинаковый внешний вид.
|
||||
|
||||
Допустим, заглушка для кнопки будет такая:
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
|
||||
interface ButtonProps {
|
||||
text: string;
|
||||
onClick: () => any; // TODO: Что это за пропс?
|
||||
}
|
||||
|
||||
var Button = (props: ButtonProps) => {
|
||||
return (
|
||||
<button onClick={/* ??? */}>{props.text}</button>
|
||||
);
|
||||
};
|
||||
export default Button;
|
||||
```
|
||||
|
||||
Вам необходимо самостоятельно понять, что за `onClick` и что необходимо прописать в разметке, чтобы оно заработало.
|
||||
Также следует заиспользовать компонент в `Counter.tsx` вместо `<button>...</button>`.
|
||||
|
||||
## Демонстрация работы
|
||||
|
||||
Демонстрация работы производится на лабораторном занятии.
|
||||
|
||||
Если у Вас есть навык по работе с git, рекомендуется выложить код в публичный репозиторий и тем самым продемонстрировать навык использования этой технологии.
|
||||
В этом случае добавьте, пожалуйста, файл `.gitignore`, контент которого можно взять [отсюда](https://github.com/github/gitignore/blob/master/Node.gitignore).
|
||||
|
||||
Если же у Вас нет навыка работы с git, то можете сформировать архив с кодом лабораторной работы или напрямую загрузить исходные тексты в облачное хранилище, чтобы потом перенести их на лабораторные компьютеры.
|
||||
Однако помните при этом, что **необходимо удалить папку `node_modules`**.
|
||||
В ней содержатся исходные тексты всех подключённых библиотек (и библиотек, подключённым к библиотекам, и .... и так далее, в общем), которые на проверку отправлять не нужно.
|
||||
|
||||
## Сдача лабораторной работы
|
||||
|
||||
На лабораторных ПК должен быть установлен NodeJS и VS Code.
|
||||
Поэтому React-приложение необходимо будет продемонстрировать вместе с его кодом.
|
||||
Loading…
Reference in New Issue
Block a user