Содержание
- 2. React — это JavaScript-библиотека для создания пользовательских интерфейсов. Обратите внимание, что это именно библиотека, а не
- 3. В рамках императивного подхода пошаговые инструкции для создания программы выглядят так: 1. объявляем начальные значения программы:
- 4. Приложение на React — Вызывая функцию React.useState, мы сообщаем React, что собираемся использовать какое-то изменяемое значение.
- 5. В первом случае мы написали алгоритм для работы с элементами, значением и его изменения — шаги,
- 6. Установка фреймворка React Для установки фреймворка понадобятся NodeJS не ниже версии 8.10. Для создания проекта в
- 7. Введение в компонентный подход в React Пусть есть сайт. На этом сайте можно выделить некоторые блоки:
- 8. Макет сайта В папке my-app/public в файле index.html расположен макет сайта. Вы можете размещать в нем
- 9. Язык JSX - это обычный JavaScript, но с некоторыми дополнениями, позволяющими писать теги прямо в коде,
- 10. Верстка в JSX должна быть корректной. В частности, не все теги можно вкладывать друг в друга.
- 11. Практические задачи Функция в вашем основном компоненте сейчас должна выглядеть следующим образом: Поменяйте текст внутри дива.
- 12. Внутри тега, который возвращается через return, может быть сколько угодно вложенных тегов: Открывающий тег обязательно должен
- 13. Через return нельзя возвращать сразу несколько тегов. Чтобы все заработало, нам придется взять наши теги в
- 14. Исправьте ошибку кода вернуть тег ul вернуть сразу два тега ul: вернуть инпут вернуть три инпута
- 15. Вставка значений переменных и констант в JSX Кроме вставки константы в теге может быть еще какой-нибудь
- 16. Внутри фигурных скобок можно не только вставлять переменные и константы, но и выполнять произвольный JavaScript код.
- 17. Можно выполнять вставку не только примитивов, но также массивов и объектов. Сделайте так, чтобы результатом рендеринга
- 18. В переменных и константах можно хранить теги, выполняя затем их вставку в нужное место. результат рендеринга
- 19. Теги, записываемые в константы, не обязательно писать на одной строке. Константы с тегами можно возвращать через
- 20. Вставку переменных и констант можно делать не только в тексты тегов, но и в атрибуты. При
- 21. Применение условий в JSX в зависимости от содержимого константы show на экран вывелся или один, или
- 22. чтобы текст показывался, если в show будет true возврат через return переменной, содержащей тег
- 23. Практические задачи 1. Пусть в константе isAdult содержится true, если пользователю уже есть 18 лет, и
- 24. Тернарный оператор Оператор && Инвертирование
- 25. Использование функций в React Вызов функций внутри тегов
- 26. Навешивание событий в JSX Сделаем так, чтобы по клику на блок выводился алерт с некоторым текстом.
- 27. Объект Event в React Внутри функции, привязанной к обработчику событий, доступен объект Event В переменную event
- 28. Объект Event при передачи параметров Пусть у нас есть некоторая функция func, которую мы хотим использовать
- 29. Пусть теперь кроме параметра мы хотим получить в нашей функции объект Event. Для этого нам нужно
- 30. Массив с тегами можно создать в цикле: Формирование из массива с данными Пусть у нас есть
- 31. Положим каждый элемент этого массива в абзац и выведем эти абзацы в диве. Для этого можно
- 32. Проблема с ключами В предыдущем примере мы формировали абзацы в цикле React требует, чтобы каждому тегу
- 33. Вывод массива объектов в JSX Атрибут key мы добавляли порядковый номер элемента в массиве. На самом
- 34. Вывод массива объектов в виде HTML таблицы Пусть у нас дан наш массив с продуктами: выведем
- 35. Задачи для решения 1. Сделайте так, чтобы метод render вывел на экран следующее: 2. Пусть в
- 36. 5. Пусть в методе render есть переменная attr с текстом 'block'. Сделайте так, чтобы метод render
- 38. Скачать презентацию