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-приложение необходимо будет продемонстрировать вместе с его кодом.
|