From a0b5b35e0cc65c103e59f46ae4625b059eae1456 Mon Sep 17 00:00:00 2001 From: Vladislav Moiseev Date: Wed, 17 Apr 2024 10:52:43 +0400 Subject: [PATCH] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB(?= =?UTF-8?q?=D0=B0)=20=D0=BD=D0=B0=20'lwF1/README.md'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lwF1/README.md | 69 ++++++++++++++++++++++++++++++-------------------- 1 file changed, 41 insertions(+), 28 deletions(-) diff --git a/lwF1/README.md b/lwF1/README.md index 474c3be..53ec571 100644 --- a/lwF1/README.md +++ b/lwF1/README.md @@ -4,11 +4,11 @@ Освоение среды локальной фронтенд-разработки на базе NodeJS. Освоение языка программирования TypeScript. -Освоение библиотеки для построения одностраничных приложений: React, Vue, Angular или другой. +Освоение библиотеки для построения одностраничных приложений: React, Vue или другой. ## Ход работы -1. Развернуть локальную среду разработки для создания SPA-приложений. +1. Развернуть локальную среду разработки для создания одностраничных (SPA) приложений. 2. Создать шаблон приложения на выбранной технологии с использованием языка TypeScript. 3. Изменить шаблон, добавив несколько компонентов различного назначения. @@ -24,46 +24,67 @@ Всё представленное ПО является бесплатным и свободным для некоммерческого использования. -Чтобы проверить установку NodeJS, выполните в терминале следующие команды. +Чтобы проверить установку NodeJS, выполните в терминале (можно в VS Code) следующие команды. Вывод должен быть похож на представленный ниже. ```bash $ node --version -v16.13.2 +v20.11.0 $ npx --version -8.1.2 +10.2.4 ``` > Если при выполнении команды отображается номер версии - всё хорошо. > Если нет, то, возможно, необходимо перезагрузить ПК и попробовать ещё раз. -## Создание первого React-приложения +## Создание первого SPA-приложения -Для создания первого React-приложения выполните следующую команду: `npx create-react-app lwF1 --template=typescript`. -Она запускает создание простейшего React-приложения с использованием TypeScript в папке lwF1. -Собственно, приложение также будет называться lwF1. +Для создания первого SPA-приложения создайте пустую папку, откройте её в VS Code и во встроенном терминале выполните следующую команду: `npm create vite@latest ip-lw-f01`. +Она запускает процесс создания простейшего SPA-приложения в папке _ip-lw-f01_. +Для использования 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` - огромный каталог, где содержатся исходные тексты подключаемых библиотек. -- `public` - изображения, манифесты и прочие статические файлы, которые необходимо для отображения нашего веб-приложения. Также содержит основной документ, куда будет внедряться наше React-приложение: `index.html`. -- `src` - таблицы стилей и компоненты, связанные с нашим React-приложением. -- `package-lock.json` - связь библиотек из `node_modules` с нашим приложением. +- `public` - изображения, манифесты и прочие статические файлы, которые необходимо для отображения нашего веб-приложения. +- `src` - весь наш исходных код, в т.ч. подключаемые динамически стили и изображения, связанные с нашим React-приложением. +- `index.html` - основной файл для внедрения нашего одностраничного приложения. - `package.json` - конфигурация приложения. +- `package-lock.json` - связь библиотек из `node_modules` с нашим приложением. - `tsconfig.json` - конфигурация компилятора TypeScript. +- `vite.config.ts` - конфигурация нашего прилжения, основанного на vite. Для запуска приложения необходимо в терминале (возможно запустить его прямо внутри VS Code) команду `npm run start`. Должен открыться браузер с анимированным логотипом реакта. -Не завершая приложения, измените какой-нибудь текст в файле `src/App.tsx`, сохраните файл и убедитесь, что в браузере сайт автоматически изменился. +Не завершая приложения, измените какой-нибудь текст в файле `src/App.tsx`, сохраните файл и убедитесь, что сайт автоматически изменился в браузере без необходимости перезагрузки страницы. ## Изучение TypeScript -TypeScript -- это диалект ECMAScript, в котором добавлена строгая (насколько это возможно) типизация. +TypeScript — это диалект ECMAScript, в котором добавлена строгая (насколько это возможно) типизация. Другими словами, это "JavaScript с типами". Чтобы понять, что это такое, можете посетить официальный сайт технологии: . @@ -87,8 +108,6 @@ TypeScript -- это диалект ECMAScript, в котором добавле Для этого в папке `src` можно добавить файл `Counter.tsx` и написать туда следующий код: ```tsx -import React from 'react'; // Подключение react. - var Counter = () => { return (
Тут будет счётчик.
@@ -108,7 +127,6 @@ export default Counter; Также сразу заиспользуем переменную с состоянием в разметке нашего компонента: ```tsx -import React from 'react'; import { useState } from 'react'; // Подключаем ссылку на useState. var Counter = () => { @@ -182,8 +200,6 @@ var Counter = (props: CounterProps) => { Допустим, заглушка для кнопки будет такая: ```tsx -import React from 'react'; - interface ButtonProps { text: string; onClick: () => any; // TODO: Что это за пропс? @@ -204,14 +220,11 @@ export default Button; Демонстрация работы производится на лабораторном занятии. -Если у Вас есть навык по работе с git, рекомендуется выложить код в публичный репозиторий и тем самым продемонстрировать навык использования этой технологии. -В этом случае добавьте, пожалуйста, файл `.gitignore`, контент которого можно взять [отсюда](https://github.com/github/gitignore/blob/master/Node.gitignore). - -Если же у Вас нет навыка работы с git, то можете сформировать архив с кодом лабораторной работы или напрямую загрузить исходные тексты в облачное хранилище, чтобы потом перенести их на лабораторные компьютеры. +Для того, чтобы запустить код на лабораторных компьютерах, можете сформировать архив с кодом лабораторной работы или напрямую загрузить исходные тексты в облачное хранилище. Однако помните при этом, что **необходимо удалить папку `node_modules`**. -В ней содержатся исходные тексты всех подключённых библиотек (и библиотек, подключённым к библиотекам, и .... и так далее, в общем), которые на проверку отправлять не нужно. +В ней содержатся исходные тексты всех подключённых библиотек (и библиотек, подключённым к библиотекам, и .... и так далее, в общем), которые можно восстановить в любой момент командой `npm install`. ## Сдача лабораторной работы На лабораторных ПК должен быть установлен NodeJS и VS Code. -Поэтому React-приложение необходимо будет продемонстрировать вместе с его кодом. +Поэтому SPA-приложение необходимо будет продемонстрировать вместе с его кодом.