ЛР№8

Вступ до React

React — це декларативна, ефективна і гнучка JavaScript-бібліотека, призначена для створення інтерфейсів користувача. Вона дозволяє компонувати складні інтерфейси з невеликих окремих частин коду — “компонентів”. З самого початку React був спроектований так, щоб його можна було впроваджувати поступово. Тобто  ви можете додавати так мало або так багато React-у, як вам потрібно. 

Ви можете додати React до HTML-сторінки лише за хвилину. За бажанням, ви зможете потім поступово поширювати React на сайті або залишити в декількох динамічних віджетах.  Коли стартуєте React-проект, проста HTML-сторінка з script-тегами  , можливо, є найкращим варіантом. Її створення займе лише одну хвилину! Однак для розробки більш складного додатку, можливо, доцільніше розглянути більш інтегрований варіант установки. Ось декілька наборів JavaScript-нструментів, які ми рекомендуємо для розробки більш серйозних React-додатків. Кожен із них є готовим до використання з мінімальними змінами, і дозволяє скористатися всіма перевагами багатої React-екосистеми.

Рекомендований набір інструментів

В першу чергу команда React рекомендує наступні рішення:

  • Якщо ви вивчаєте React або створюєте новий односторінковий додаток, використовуйте Create React App.
  • Якщо ви створюєте серверний сайт з допомогою Node.js, спробуйте Next.js.
  • Якщо ви створюєте статичний контент-орієнтований вебсайт, спробуйте Gatsby.
  • Якщо ви створюєте бібліотеку компонентів або інтегруєте існуючий код, спробуйте більш гнучкий набір інструментів.

Create React App

Create React App — це комфортний осередок для вивчення React, а також це найкращий шлях щоб почати будувати нові односторінкові додатки за допомогою React. Він встановлює осередок для розробки таким чином, щоб ви могли використовувати найновіші можливості JavaScript, робить розробку комфортнішою, а також оптимізує ваш додаток для продакшну. Вам знадобиться Node версії >= 8.10 та npm версії >= 5.6 на вашому комп’ютері. Для створення проекту виконайте 

    
        npx create-react-app my-app
        cd my-app
        npm start

Завдання

  1. Використовуючи Create React App створити проект з назввою simple-react-app.
  2. Використовуючи наданий шаблон створити набор React компонентів. Окремо повинні бути представлені компоненти (Expenses, ExpenseItem, ExpenseDate, Card).
  3. Дані для відображення повинні подаватися у якості статиного масива компоненту Expenses у головному компоненті App. Структура та приклад даних наведено у вкладеному файлі.
  4. Розмістити додаток включаючи директорію dist у каталозі lab-<номер поточної лабораторної роботи>
  5. Оновити посилання на робочий проект на персональній сторінці.

Питання

  1. Поясніть призначення бібліотеки react-doom
  2. Поясніть призначення бібліотеки babel
  3. Наведіть приклади інструментів які є альтернативою Create React App