216 lines
13 KiB
Markdown
216 lines
13 KiB
Markdown
# Лабораторная работа №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-приложение необходимо будет продемонстрировать вместе с его кодом.
|