Тема 14. React.js Components
Створення цікавих компонентів
Створення React.js додатку, введення команд в консоль
D: або C: - переключення між дисками
cd - переходимо в необхідну вам папку
npx create-react-app назва додатку - створення нового React.js проєкту
npx create-react-app - сама команда створення
назва додатку - назва папки в якій буде додаток
cd назва додатку - переходимо в створену папку
Видаляємо непотрібні файли, чистимо index.js та App.js від непотрібних команд
Видаляємо файли: setupTests.js,repor,WebVitals.js,logo.svg,index.css,App.test.js
З файлу index.js видаляємо такі рядки
import './index.css'; import reportWebVitals from './reportWebVitals'; reportWebVitals();
Та коментарі: // If you want...
З файлу App.js видаляємо import logo from './logo.svg';
Тег <div className="app"> і все що всередині нього
В папці src залишаємо лише такі файли:
App.js, App.css, index.js
Одразу можете створити папку Components - папка для компонентів наших файлів
Завдання 1
На цьому завданні маємо 3 елементи, при наведенні на які задіяний 'Blur ефект'. Ваше завдання створити компонент, в якому будуть такі блоки та добавити стилізацію самостійно.
Готові картинки вам надані нижче.
Необхідні фото для завдання
Завдання 2
На цьому завданні маємо слайдер виконаний в стилі прокрутки за допомогою миші.
Фото можете добавити свої - скачати з інтернету або ж взяти посилання на фото.
Завдання 3
На цьому завданні маємо елемент, який автоматично відтворює анімацію всередині кожної букви.
Ваше завдання виконати такий ефект, та добавити можливість додаткової зміни при проведенні мишою по буквах.
Старайтесь виконати усі завдання, пізніше вони будуть добавленні у ваш фінальний додаток, так само як і деякі завдання із попередніх тем, для створення вашого унікального проекту на React.js