Лабораторная работа №12. Node.
js, React
Подготовка:
• Редактор WebStorm.
• Данная инструкция.
В целях профилактики нарушения правила академической этики и пособничества обхода правил
академической этики при совпадении двух и более работ всем обучающимся, представившим (вне
зависимости от порядка) одинаковые работы, представленные работы не зачитываются.
Цели работы:
− Установка [Link]
− Разработка React-приложения
− Рассмотрение структуры каталогов и файлов
− Удаление ненужных элементов приложения
− Создание компонента и изменение структуры приложения
Ход работы:
1. Создать проект в папке «lab12»:
Проверка установленного ПО:
• в Windows: Поиск – cmd или [Win + R] - cmd – OK
• node -v, npm -v
Или в терминале webStorm:
• node -v, npm -v
Пояснение: npm - Node Package Manager - менеджер пакетов, который управляет модулями
2. Установите [Link] (см. инструкцию по установке)
[Link]
3. Установите React
− в терминале: npm install --global create-react-app
Для Mac OS добавить везде префикс sudo:
sudo npm install --global create-react-app
− проверка: node -v, npm -v
− Наберите команду: create-react-app lab12
4. Перейти в папку lab12 и запустить React:
− cd lab12
− npm start # запуск в режиме разработки
5. Далее проверять результат работы можно по ссылке:
[Link] или
Mayer S. F. Have a nice day
[Link]
6. Открыть проект и рассмотреть структуру папок (public и src – основные для работы папки)
Примечание: [Link] – основной документ для загрузки в браузер пользователя. Наиболее важный
для нас элемент - <div id="root"></div>
7. Убрать из проекта лишние файлы (с помощью Delete в контекстом меню, убрать галочки с safe
delete).
Оставшиеся файлы:
[Link] – основной файл (шаблон приложения), <div id="root"></div> - его главный элемент
Mayer S. F. Have a nice day
[Link] – "входная точка" JavaScript, связь элемента root с каким-либо компонентом, по умолчанию с
компонентом [Link].
Эти файлы удалять нельзя.
[Link]-компонент – это компонент с функцией, которая возвращает html-код.
Примечание: Вебпак обрабатывает только файлы, находящиеся в директории src.
• Запустить проект в браузере (будет ошибка, так как файлы некоторые удалены).
Задание: переименовать компонент App в Body, создать папку для компонента и перенести его в данную
папку.
8. Добавить в папку src следующие папки: css, media (в ней videos, audios, pics) и elements (в ней body).
• src
• css
• media
o videos
o audios
o pics
• elements
o body
9. Перенести файл [Link] в папку body (F6 - Refactor)
Примечание: в нашем проекте файл [Link] – это компонент, который будет встраиваться в
[Link] в его тег div id=”root”
10. Стереть возвращаемое значение функции App :
− Оставить только тег параграфа, который находится в теге div .
− Написать в теге параграфа текст «Привет, Мир!».
− Убрать ненужные импорты (import logo from './[Link]'; import './[Link]';).
− Заменить название функции на Body и возвращаемое по умолчанию значение – тоже Body (export
default Body;).
11. Изменить название файла с [Link] на [Link] (Refactor - Rename).
12. Почистить файл [Link], оставив следующий код:
Примечание: файл [Link] – это основной файл, связывающий и импортирующий все компоненты и
элементы.
13. В файле [Link] импортировать элемент Body (import Body from "./elements/body/[Link]";) и
заменить <App /> на <Body />.
14. Изменить [Link] , убрав ненужные теги, и подстроив под наш шаблон:
Mayer S. F. Have a nice day
15. В терминале можно запустить приложение:
npm start
16. Скопировать из предыдущих лабораторных файл [Link] в папку css и создать в папке css пустой
файл [Link]. Подключить (импортировать) оба css-файла в файле [Link]:
import './css/[Link]';
import './css/[Link]';
17. Добавить в стилевой файл правило для изменения цвета параграфа. Запустите приложение, чтобы
протестировать результат.
18. Добавить в качестве элемента Body содержимое лабораторной работы № 10.
19. Обратите внимание, что все незакрывающиеся теги должны быть закрытыми следующим образом:
20. В терминале:
npm run build # производственная сборка
21. Продемонстрировать рабочий сайт.
Mayer S. F. Have a nice day
