Откройте в 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 = {
... Задачи доступны после покупки курса
