Изменил(а) на 'lwF1/README.md'
This commit is contained in:
Vladislav Moiseev
parent
80f3582c69
commit
a0b5b35e0c
@ -4,11 +4,11 @@
|
|||||||
|
|
||||||
Освоение среды локальной фронтенд-разработки на базе NodeJS.
|
Освоение среды локальной фронтенд-разработки на базе NodeJS.
|
||||||
Освоение языка программирования TypeScript.
|
Освоение языка программирования TypeScript.
|
||||||
Освоение библиотеки для построения одностраничных приложений: React, Vue, Angular или другой.
|
Освоение библиотеки для построения одностраничных приложений: React, Vue или другой.
|
||||||
|
|
||||||
## Ход работы
|
## Ход работы
|
||||||
|
|
||||||
1. Развернуть локальную среду разработки для создания SPA-приложений.
|
1. Развернуть локальную среду разработки для создания одностраничных (SPA) приложений.
|
||||||
2. Создать шаблон приложения на выбранной технологии с использованием языка TypeScript.
|
2. Создать шаблон приложения на выбранной технологии с использованием языка TypeScript.
|
||||||
3. Изменить шаблон, добавив несколько компонентов различного назначения.
|
3. Изменить шаблон, добавив несколько компонентов различного назначения.
|
||||||
|
|
||||||
@ -24,46 +24,67 @@
|
|||||||
|
|
||||||
Всё представленное ПО является бесплатным и свободным для некоммерческого использования.
|
Всё представленное ПО является бесплатным и свободным для некоммерческого использования.
|
||||||
|
|
||||||
Чтобы проверить установку NodeJS, выполните в терминале следующие команды.
|
Чтобы проверить установку NodeJS, выполните в терминале (можно в VS Code) следующие команды.
|
||||||
Вывод должен быть похож на представленный ниже.
|
Вывод должен быть похож на представленный ниже.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ node --version
|
$ node --version
|
||||||
v16.13.2
|
v20.11.0
|
||||||
$ npx --version
|
$ npx --version
|
||||||
8.1.2
|
10.2.4
|
||||||
```
|
```
|
||||||
|
|
||||||
> Если при выполнении команды отображается номер версии - всё хорошо.
|
> Если при выполнении команды отображается номер версии - всё хорошо.
|
||||||
> Если нет, то, возможно, необходимо перезагрузить ПК и попробовать ещё раз.
|
> Если нет, то, возможно, необходимо перезагрузить ПК и попробовать ещё раз.
|
||||||
|
|
||||||
## Создание первого React-приложения
|
## Создание первого SPA-приложения
|
||||||
|
|
||||||
Для создания первого React-приложения выполните следующую команду: `npx create-react-app lwF1 --template=typescript`.
|
Для создания первого SPA-приложения создайте пустую папку, откройте её в VS Code и во встроенном терминале выполните следующую команду: `npm create vite@latest ip-lw-f01`.
|
||||||
Она запускает создание простейшего React-приложения с использованием TypeScript в папке lwF1.
|
Она запускает процесс создания простейшего SPA-приложения в папке _ip-lw-f01_.
|
||||||
Собственно, приложение также будет называться lwF1.
|
Для использования React выберите `React` → `TypeScript`.
|
||||||
|
|
||||||
В конце должно возникнуть сообщение `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` - изображения, манифесты и прочие статические файлы, которые необходимо для отображения нашего веб-приложения. Также содержит основной документ, куда будет внедряться наше React-приложение: `index.html`.
|
- `public` - изображения, манифесты и прочие статические файлы, которые необходимо для отображения нашего веб-приложения.
|
||||||
- `src` - таблицы стилей и компоненты, связанные с нашим React-приложением.
|
- `src` - весь наш исходных код, в т.ч. подключаемые динамически стили и изображения, связанные с нашим React-приложением.
|
||||||
- `package-lock.json` - связь библиотек из `node_modules` с нашим приложением.
|
- `index.html` - основной файл для внедрения нашего одностраничного приложения.
|
||||||
- `package.json` - конфигурация приложения.
|
- `package.json` - конфигурация приложения.
|
||||||
|
- `package-lock.json` - связь библиотек из `node_modules` с нашим приложением.
|
||||||
- `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>.
|
||||||
@ -87,8 +108,6 @@ 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>
|
||||||
@ -108,7 +127,6 @@ export default Counter;
|
|||||||
Также сразу заиспользуем переменную с состоянием в разметке нашего компонента:
|
Также сразу заиспользуем переменную с состоянием в разметке нашего компонента:
|
||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
import React from 'react';
|
|
||||||
import { useState } from 'react'; // Подключаем ссылку на useState.
|
import { useState } from 'react'; // Подключаем ссылку на useState.
|
||||||
|
|
||||||
var Counter = () => {
|
var Counter = () => {
|
||||||
@ -182,8 +200,6 @@ var Counter = (props: CounterProps) => {
|
|||||||
Допустим, заглушка для кнопки будет такая:
|
Допустим, заглушка для кнопки будет такая:
|
||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
interface ButtonProps {
|
interface ButtonProps {
|
||||||
text: string;
|
text: string;
|
||||||
onClick: () => any; // TODO: Что это за пропс?
|
onClick: () => any; // TODO: Что это за пропс?
|
||||||
@ -204,14 +220,11 @@ 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.
|
||||||
Поэтому React-приложение необходимо будет продемонстрировать вместе с его кодом.
|
Поэтому SPA-приложение необходимо будет продемонстрировать вместе с его кодом.
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user