Откройте в IDE папку, в которой будете выполнять UNIT. Если используете VSCode, то выберите Terminal - New terminal, или нажмите Ctrl ` для открытия терминала. Выполните там команду:
npx create-react-app unit_1
дождитесь окончания установки. Обратите внимание, на то, какие пакеты были установлены.
Зайдите в папку unit_1 - после установки она должна появиться. Для этого наберите команду cd unit_1 и нажмите Enter.
Папка должна содержать папки node_modules, public, src и файлы .gitignore, package-lock.json, package.json, README.md.
Изучите содержимое файлов и папок, как показано в уроке.
Запустите приложение набрав npm start
Изучите как выглядит запущенное приложение в браузере и на каком порту было запущено.
Установите React Developer Tools в браузер - https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Откройте App.js, удалите все содержимое между return(). Т.е. оставьте только строку return () внутри function App(). Обратите внимание, мы все это делаем на запущенном приложении. Сервер сам перезапускает приложение, если видит изменения в файлах. Изучите как поменяется вывод в браузере.
Отлично. Вы увидели ошибку. Ошибка дублируется в консоли, и в браузере. Почему она возникла? Все просто - внутри return должен быть вложенный тег. Мы не будем для вложенного тега использовать div, давайте сделаем так:
function App() {
return (
<>
</>
);
}
реакт перезапустился, и мы увидели пустую страниу. А ошибки исчезли. Также, в консоли есть предупреждение о том, что мы ипортировали logo, но не использовали его. Отлично! Консоль - наш друг!
Создадим заголовок страницы. Поместите внутрь пустого тега заголовок...
Завдання доступні після придбання курсу
Давайте обернем h1 div class = "container". Т.е....
Завдання доступні після придбання курсу
Открываем App.css удаляем все! Пишем туда:
.container {
... Завдання доступні після придбання курсу
Создайте в папке public папку css и в...
Завдання доступні після придбання курсу
Создайте папку images в папке public. Скопируйте туда...
Завдання доступні після придбання курсу
Давайте добавим список на страницу.
<ul>
<li>Hello</li>
<li>hi</li>
</ul>
добавьте список после...
Завдання доступні після придбання курсу
Давайте создадим переменную text = 'test variable'...
Завдання доступні після придбання курсу
Создайте внутри функции переменную text2 = '222';
Измените код...
Завдання доступні після придбання курсу
И последнее. Создадим объект свойств:
const style = {
... Завдання доступні після придбання курсу
