Вітаю, {props.name}!

; 342 | }; 343 | 344 | export default App; 345 | ``` 346 | 347 | У цьому прикладі компонент **Welcome** приймає пропс **name** і використовує його для виведення персоналізованого привітання. Компонент **App** передає значення "Ірина" в пропс **name** компонента **Welcome**. 348 | 349 | Пропси передаються у вигляді об'єкта та доступні як властивості (**props**) всередині дочірнього компонента. 350 | 351 | Використання пропсів дає змогу створювати більш гнучкі та перевикористовувані компоненти, адже можна налаштовувати їхню поведінку та відображення ззовні. 352 | 353 | [⬆ Повернутися до списку](#список-запитань) 354 | 355 | ### У чому різниця між станом і пропсами в React? 356 | 357 | Стан (**state**) і пропси (**props**) - це два основні концепти в React, які використовуються для управління даними в компонентах. Вони мають різні цілі та характеристики: 358 | 359 | #### Стан (state): 360 | 361 | 1. Стан - це внутрішні дані компонента, які можуть змінюватися під час виконання. 362 | 2. Визначається та керується самим компонентом, у якому він знаходиться. 363 | 3. Зміна стану викликає перерендеринг компонента, щоб відобразити новий стан. 364 | 4. Доступно тільки для компонента, у якому було визначено стан. 365 | 5. Оновлюється з використанням методу setState(). 366 | 367 | #### Пропси (props): 368 | 369 | 1. Пропси - це дані, що передаються від батьківського компонента до дочірнього компонента. 370 | 2. Не можна змінити пропси всередині дочірнього компонента. Вони вважаються "тільки для читання". 371 | 3. Пропси слугують для налаштування та передавання даних у компоненти. 372 | 4. Використовуються для зв'язку між різними компонентами та передавання інформації вниз по ієрархії. 373 | 5. Не спричиняють перерендерінг у разі їхньої зміни. 374 | 375 | Коротко кажучи, стан призначений для зберігання та управління даними, що змінюються всередині компонента, тоді як пропси призначені для передачі даних від батьківського компонента до дочірнього. Обидва ці концепти допомагають створювати динамічні та перевикористовувані інтерфейси в React додатках. 376 | 377 | [⬆ Повернутися до списку](#список-запитань) 378 | 379 | ### Як обробляти події в React? 380 | 381 | У React обробка подій відбувається з використанням синтаксису, аналогічного обробці подій у нативному JavaScript, але з деякими відмінностями. Ось як обробляти події в React: 382 | 383 | 1. **Створення методу обробки події:** Створіть метод усередині компонента, який буде виконуватися при виникненні події. Назва методу зазвичай починається з префікса "handle", за яким слідує ім'я події або описове ім'я. 384 | 385 | 2. **Прив'язка методу до елемента:** Прив'яжіть створений метод до елемента, який генеруватиме подію. Це робиться за допомогою JSX, вказавши метод як значення атрибута події. 386 | 387 | 3. **Використання аргументів:** Усередині методу обробки події ви можете отримати доступ до об'єкта події та використовувати його властивості, такі як `target`, щоб отримати інформацію про подію. 388 | 389 | Приклад обробки кліка: 390 | 391 | ```jsx 392 | import React, { Component } from "react"; 393 | 394 | class Button extends Component { 395 | handleClick = () => { 396 | console.log("Кнопка була натиснута"); 397 | }; 398 | 399 | render() { 400 | return ; 401 | } 402 | } 403 | 404 | export default Button; 405 | ``` 406 | 407 | У цьому прикладі метод `handleClick` викликається при кліці на кнопку, виводячи повідомлення в консоль. 408 | 409 | Важливо зауважити, що під час передачі методу обробки події як атрибута JSX, не слід викликати його за допомогою круглих дужок (наприклад, не пишіть `onClick={this.handleClick()}`), адже це викличе виконання методу одразу під час рендерингу. 410 | 411 | [⬆ Повернутися до списку](#список-запитань) 412 | 413 | ### Що таке умовний рендеринг у React? 414 | 415 | Умовний рендеринг у React - це підхід, за якого вирішується, чи повинен компонент або його частина відображатися на основі будь-якої умови. Це дає змогу динамічно контролювати, які елементи інтерфейсу будуть показані або приховані залежно від стану застосунку або інших чинників. 416 | 417 | Приклад умовного рендерингу: 418 | 419 | ```jsx 420 | import React, { Component } from "react"; 421 | 422 | class Greeting extends Component { 423 | render() { 424 | const isLoggedIn = this.props.isLoggedIn; 425 | 426 | if (isLoggedIn) { 427 | return

Вітаємо вас на нашому сайті!

; 428 | } else { 429 | return

Будь ласка, увійдіть до системи!

; 430 | } 431 | } 432 | } 433 | 434 | export default Greeting; 435 | ``` 436 | 437 | У цьому прикладі компонент Greeting залежно від значення пропса isLoggedIn рендерить різні заголовки. Якщо isLoggedIn дорівнює true, відображається привітання, в іншому разі - запрошення до входу в систему. 438 | 439 | Умовний рендеринг можна реалізувати також за допомогою тернарного оператора: 440 | 441 | ```jsx 442 | class Greeting extends Component { 443 | render() { 444 | const isLoggedIn = this.props.isLoggedIn; 445 | 446 | return ( 447 |

448 | {isLoggedIn ? ( 449 |

Привіт, Сергій!

450 | ) : ( 451 |

Будь ласка, авторизуйтеся на сайті.

452 | )} 453 |

454 | ); 455 | } 456 | } 457 | ``` 458 | 459 | Умовний рендеринг особливо корисний, коли потрібно адаптувати інтерфейс на основі динамічних даних або станів, таких як авторизація користувача, наявність даних та інші умови. 460 | 461 | [⬆ Повернутися до списку](#список-запитань) 462 | 463 | ### Як передати дані між компонентами вгору та вниз за ієрархією? 464 | 465 | У React дані можуть передаватися між компонентами вгору та вниз по ієрархії з використанням пропсів (props) і колбеків (callback функцій). Ось як це працює: 466 | 467 | #### Передача даних вниз за ієрархією (від батька до дочірнього компонента): 468 | 469 | Пропси (props): Батьківський компонент передає дані своєму дочірньому компоненту через пропси. Дочірній компонент може отримати доступ до цих даних як властивості (props). 470 | 471 | Приклад: 472 | 473 | ```jsx 474 | // Батьківський компонент 475 | import React from "react"; 476 | import ChildComponent from "./ChildComponent"; 477 | 478 | const ParentComponent = () => { 479 | const data = "Дані для дочірнього компонента"; 480 | 481 | return ; 482 | }; 483 | 484 | // Дочірній компонент 485 | import React from "react"; 486 | 487 | const ChildComponent = (props) => { 488 | return

{props.dataProp}

; 489 | }; 490 | 491 | export default ChildComponent; 492 | ``` 493 | 494 | #### Передавання даних вгору за ієрархією (від дочірнього компонента до батька): 495 | 496 | Колбеки (callback функції): Батьківський компонент передає функцію як пропса дочірньому компоненту. Дочірній компонент може викликати цю функцію, передаючи їй дані назад вгору по ієрархії. 497 | 498 | Приклад: 499 | 500 | ```jsx 501 | // Батьківський компонент 502 | import React, { useState } from "react"; 503 | import ChildComponent from "./ChildComponent"; 504 | 505 | const ParentComponent = () => { 506 | const [receivedData, setReceivedData] = useState(""); 507 | 508 | const handleDataChange = (data) => { 509 | setReceivedData(data); 510 | }; 511 | 512 | return ( 513 |

514 |

Отримані дані: {receivedData}

515 | 516 |

517 | ); 518 | }; 519 | 520 | // Дочірній компонент 521 | import React from "react"; 522 | 523 | const ChildComponent = (props) => { 524 | const sendDataToParent = () => { 525 | props.onDataChange("Дані від дочірнього компонента"); 526 | }; 527 | 528 | return ; 529 | }; 530 | 531 | export default ChildComponent; 532 | ``` 533 | 534 | Це дає змогу дочірньому компоненту впливати на дані та стан батьківського компонента. 535 | 536 | Використовуючи цей підхід, ви можете ефективно передавати й оновлювати дані між компонентами вгору та вниз по ієрархії. 537 | 538 | [⬆ Повернутися до списку](#список-запитань) 539 | 540 | ### Як виконати HTTP-запити в React? 541 | 542 | Для виконання HTTP-запитів у React зазвичай використовують бібліотеки, такі як axios або вбудований fetch. Ось як виконати GET-запит з використанням бібліотеки axios: 543 | 544 | 1. Встановіть бібліотеку axios за допомогою npm або yarn: 545 | 546 | ``` 547 | npm install axios 548 | ``` 549 | 550 | або 551 | 552 | ``` 553 | yarn add axios 554 | ``` 555 | 556 | 2. У компоненті, де ви хочете виконати HTTP-запит: 557 | 558 | ```jsx 559 | import React, { useState, useEffect } from "react"; 560 | import axios from "axios"; 561 | 562 | const DataFetching = () => { 563 | const [data, setData] = useState(null); 564 | const [isLoading, setIsLoading] = useState(true); 565 | const [error, setError] = useState(null); 566 | 567 | useEffect(() => { 568 | axios 569 | .get("https://api.example.com/data") 570 | .then((response) => { 571 | setData(response.data); 572 | setIsLoading(false); 573 | }) 574 | .catch((error) => { 575 | setError(error.message); 576 | setIsLoading(false); 577 | }); 578 | }, []); // Порожній масив залежностей, щоб запит виконався тільки один раз 579 | 580 | if (isLoading) { 581 | return

Завантаження...

; 582 | } 583 | 584 | if (error) { 585 | return

Error: {error}

; 586 | } 587 | 588 | return ( 589 |

590 |

Fetched Data

591 |

{JSON.stringify(data, null, 2)}

592 |

593 | ); 594 | }; 595 | 596 | export default DataFetching; 597 | ``` 598 | 599 | У цьому прикладі ми використовуємо хук useState для управління станом даних, завантаження та помилок. Хук useEffect використовується для виконання HTTP-запиту під час монтування компонента. Залежно від результату запиту, ми оновлюємо стан для відображення даних, завантаження або помилки. 600 | 601 | [⬆ Повернутися до списку](#список-запитань) 602 | 603 | ### Що таке контекст (context) у React і для чого він використовується? 604 | 605 | Контекст (context) у React - це механізм, який дає змогу передавати дані глибоко вниз по ієрархії компонентів, минаючи пропси (props). Він використовується, коли певні дані потрібні в безлічі компонентів, і передача через кожен компонент стає незручною. 606 | 607 | Контекст дає змогу створити «контекстне» оточення, в якому компоненти можуть отримувати доступ до даних без необхідності явно передавати їх через пропси. Це особливо корисно для глобальних даних, таких як дані автентифікації, теми оформлення та інші загальні стани. 608 | 609 | Для створення контексту використовуються два елементи: провайдер (Provider) і споживач (Consumer). 610 | 611 | Приклад використання контексту: 612 | 613 | ```jsx 614 | import React, { createContext, useContext } from "react"; 615 | 616 | // Створюємо контекст 617 | const UserContext = createContext(); 618 | 619 | // Компонент, який постачає дані 620 | const UserProvider = ({ children }) => { 621 | const user = { name: "Serhii", role: "developer" }; 622 | 623 | return {children}; 624 | }; 625 | 626 | // Компонент, що використовує контекст 627 | const UserInfo = () => { 628 | const user = useContext(UserContext); 629 | 630 | return ( 631 |

632 |

Name: {user.name}

633 |

Role: {user.role}

634 |

635 | ); 636 | }; 637 | 638 | // Головний компонент, який обертає додаток у провайдер даних 639 | const App = () => { 640 | return ( 641 | 642 | 643 | 644 | ); 645 | }; 646 | 647 | export default App; 648 | ``` 649 | 650 | У цьому прикладі контекст UserContext використовується для передачі інформації про користувача від UserProvider до UserInfo, минаючи пропси. Компонент UserInfo використовує хук useContext, щоб отримати доступ до даних контексту. 651 | 652 | Контекст слід використовувати обережно та тільки там, де це справді необхідно, оскільки це може ускладнити розуміння взаємодії компонентів та ускладнити налагодження. 653 | 654 | [⬆ Повернутися до списку](#список-запитань) 655 | 656 | ### Як реалізувати PureComponent? 657 | 658 | Щоб створити **PureComponent** у React, ви можете використовувати класи або функціональні компоненти з хуками. 659 | 660 | 1. З використанням класів: 661 | 662 | ```jsx 663 | import React, { PureComponent } from "react"; 664 | 665 | class MyPureComponent extends PureComponent { 666 | render() { 667 | return

{/* Код компоненту */}

; 668 | } 669 | } 670 | 671 | export default MyPureComponent; 672 | ``` 673 | 674 | 2. З використанням функціональних компонентів і хуків: 675 | 676 | ```jsx 677 | import React, { memo } from "react"; 678 | 679 | const MyPureComponent = () => { 680 | return

{/* Код компоненту */}

; 681 | }; 682 | 683 | export default memo(MyPureComponent); 684 | ``` 685 | 686 | Обидва варіанти **PureComponent** автоматично порівнюють пропси та стан, і перемальовують компонент тільки в разі змін даних. Це може істотно поліпшити продуктивність, уникаючи непотрібних перемальовок. 687 | 688 | [⬆ Повернутися до списку](#список-запитань) 689 | 690 | ### Що таке ключі (keys) у списках React-елементів і навіщо вони потрібні? 691 | 692 | У React, ключі (keys) - це спеціальні атрибути, які використовуються під час рендерингу списків компонентів або елементів. Вони допомагають React оптимізувати процес оновлення та перемальовування компонентів у списках. 693 | 694 | Ключі призначаються кожному елементу в списку та мають бути унікальними серед своїх сусідніх елементів. Коли React оновлює список компонентів, він використовує ключі для визначення, які елементи були додані, видалені або змінені. Без ключів React буде перемальовувати та оновлювати всі елементи в списку, що може призвести до погіршення продуктивності. 695 | 696 | Приклад використання ключів: 697 | 698 | ```jsx 699 | import React from "react"; 700 | 701 | const TodoList = ({ data }) => { 702 | return ( 703 |

{todo.text}

708 | ); 709 | }; 710 | 711 | export default TodoList; 712 | ``` 713 | 714 | У цьому прикладі кожному елементу списку завдань (todo) присвоюється унікальний ключ (todo.id). Це дає змогу React ефективно оновлювати тільки змінені елементи, мінімізуючи кількість перемальовок. 715 | 716 | Ключі особливо важливі під час роботи зі списками, які можуть змінюватися в часі, наприклад, під час додавання, видалення або переупорядкування елементів. 717 | 718 | [⬆ Повернутися до списку](#список-запитань) 719 | 720 | ### Як використовувати стилі в React-компонентах? 721 | 722 | У React для стилізації компонентів можна використовувати кілька підходів: вбудовані стилі (inline styles), стилі з використанням CSS-класів і бібліотеки стилів. Ось як це робиться: 723 | 724 | #### 1. Вбудовані стилі (Inline Styles): 725 | 726 | Вбудовані стилі являють собою об'єкт JavaScript, де ключі - це назви CSS-властивостей, а значення - відповідні значення властивостей. 727 | 728 | ```jsx 729 | import React from "react"; 730 | 731 | const MyComponent = () => { 732 | const styles = { 733 | backgroundColor: "blue", 734 | color: "yellow", 735 | padding: "12px", 736 | borderRadius: "20px", 737 | }; 738 | 739 | return

Стилізований компонент

; 740 | }; 741 | 742 | export default MyComponent; 743 | ``` 744 | 745 | #### 2. Стилі з використанням CSS-класів: 746 | 747 | Ви можете визначити CSS-класи в окремих файлах і додати їх до елементів у компонентах. 748 | 749 | ```jsx 750 | // styles.css 751 | .myClass { 752 | background-color: blue; 753 | color: yellow; 754 | padding: 12px; 755 | border-radius: 20px; 756 | } 757 | 758 | // MyComponent.jsx 759 | import React from 'react'; 760 | import './styles.css'; 761 | 762 | const MyComponent = () => { 763 | return

Стилізований компонент

; 764 | }; 765 | 766 | export default MyComponent; 767 | ``` 768 | 769 | #### 3. Бібліотеки стилів: 770 | 771 | Існує безліч бібліотек для стилізації React-компонентів, таких як Styled Components, Emotion, CSS Modules та інші. Ці бібліотеки надають синтаксис для створення компонентів зі стилями всередині коду. 772 | 773 | ```jsx 774 | // Styled Components 775 | import React from "react"; 776 | import styled from "styled-components"; 777 | 778 | const StyledDiv = styled.div` 779 | background-color: blue; 780 | color: yellow; 781 | padding: 12px; 782 | border-radius: 20px; 783 | `; 784 | 785 | const MyComponent = () => { 786 | return Стилізований компонент; 787 | }; 788 | 789 | export default MyComponent; 790 | ``` 791 | 792 | Вибір методу залежить від уподобань та вимог проєкту. Важливо звернути увагу на підтримку класів, перевикористання стилів і простоту супроводу під час вибору підходу. 793 | 794 | [⬆ Повернутися до списку](#список-запитань) 795 | 796 | ### Що таке «керовані компоненти» (controlled components)? 797 | 798 | «Керовані компоненти» (controlled components) - це поняття, пов'язане з управлінням станом форм і введення даних у React. У керованих компонентах значення елемента введення (наприклад, текстового поля або чекбокса) контролюється станом React компонента, а не DOM елементом. 799 | 800 | Коли компонент контролює значення введення, він зберігає це значення у своєму стані й оновлює його за допомогою обробників подій (наприклад, у разі зміни тексту в полі введення). Це дає змогу мати повний контроль над даними форми та легко реагувати на зміни. 801 | 802 | Приклад керованого компонента з текстовим полем: 803 | 804 | ```jsx 805 | import React, { useState } from "react"; 806 | 807 | const ControlledComponent = () => { 808 | const [inputValue, setInputValue] = useState(""); 809 | 810 | const handleInputChange = (event) => { 811 | setInputValue(event.target.value); 812 | }; 813 | 814 | return ( 815 |

816 | 817 |

Введене значення: {inputValue}

818 |

819 | ); 820 | }; 821 | 822 | export default ControlledComponent; 823 | ``` 824 | 825 | У цьому прикладі значення текстового поля inputValue пов'язане зі станом компонента. Коли значення текстового поля змінюється, викликається обробник handleInputChange, який оновлює стан і, отже, значення текстового поля. 826 | 827 | Використання керованих компонентів забезпечує передбачуваність стану, спрощує взаємодію з даними та дає змогу виконувати валідацію та інші операції над введеними даними перед їхнім надсиланням на сервер. 828 | 829 | [⬆ Повернутися до списку](#список-запитань) 830 | 831 | ### Що таке «некеровані компоненти» (uncontrolled components)? 832 | 833 | «Некеровані компоненти» (uncontrolled components) - це поняття, протилежне керованим компонентам, і воно відноситься до управління станом форм і введення даних у React. У разі некерованих компонентів, значення елемента введення (наприклад, input або textarea) зберігається безпосередньо в DOM, і React компонент не керує цим значенням. 834 | 835 | Замість використання стану компонента для зберігання значення елемента введення, некеровані компоненти звертаються до DOM безпосередньо для отримання та оновлення значення. 836 | 837 | Приклад некерованого компонента з текстовим полем: 838 | 839 | ```jsx 840 | import React, { useRef } from "react"; 841 | 842 | const UncontrolledComponent = () => { 843 | const inputRef = useRef(null); 844 | 845 | const handleButtonClick = () => { 846 | alert("Значення в полі введення: " + inputRef.current.value); 847 | }; 848 | 849 | return ( 850 |

851 | 852 | 853 |

854 | ); 855 | }; 856 | 857 | export default UncontrolledComponent; 858 | ``` 859 | 860 | У цьому прикладі значення текстового поля не зберігається в стані компонента. Натомість ми використовуємо useRef для отримання посилання на DOM-елемент і потім отримуємо його значення через inputRef.current.value. 861 | 862 | Некеровані компоненти можуть бути корисними, коли у вас є особливі випадки або вимоги, де контроль над станом через React не є оптимальним підходом. Однак, у більшості випадків, керовані компоненти забезпечують більш передбачуване та зручне управління даними у формах. 863 | 864 | [⬆ Повернутися до списку](#список-запитань) 865 | 866 | ### Що таке «підйом стану» (lifting state up)? 867 | 868 | «Підйом стану» (lifting state up) - це патерн у React, який передбачає переміщення стану з дочірніх компонентів до батьківських компонентів, щоб розділяти й керувати станом на вищому рівні та передавати його через пропси. 869 | 870 | Цей підхід особливо корисний, коли кілька компонентів повинні мати доступ до одного й того самого стану або коли стан повинен бути синхронізований між різними частинами програми. 871 | 872 | Приклад із підйомом стану: 873 | 874 | ```jsx 875 | import React, { useState } from "react"; 876 | 877 | const TemperatureInput = ({ scale, temperature, onTemperatureChange }) => { 878 | return ( 879 |

880 | Введіть температуру в градусах {scale}: 881 | onTemperatureChange(e.target.value)} 884 | /> 885 |

886 | ); 887 | }; 888 | 889 | const Calculator = () => { 890 | const [celsius, setCelsius] = useState(""); 891 | const [fahrenheit, setFahrenheit] = useState(""); 892 | 893 | const handleCelsiusChange = (value) => { 894 | setCelsius(value); 895 | setFahrenheit((value * 9) / 5 + 32); 896 | }; 897 | 898 | const handleFahrenheitChange = (value) => { 899 | setFahrenheit(value); 900 | setCelsius(((value - 32) * 5) / 9); 901 | }; 902 | 903 | return ( 904 |

905 | 910 | 915 |

916 | ); 917 | }; 918 | 919 | export default Calculator; 920 | ``` 921 | 922 | У цьому прикладі компонент Calculator піднімає стан температур із TemperatureInput компонентів. При зміні температури в одному з вводів, стан піднімається в батьківський компонент Calculator, який потім оновлює стан для іншого вводу, забезпечуючи синхронізацію температур в обох шкалах. 923 | 924 | «Підйом стану» допомагає спростити керування даними та їхню синхронізацію між компонентами, особливо під час роботи з компонентами на різних рівнях ієрархії. 925 | 926 | [⬆ Повернутися до списку](#список-запитань) 927 | 928 | ### Як створити форму в React? 929 | 930 | Створення форми в React охоплює використання HTML-елементів форми в JSX та управління введенням даних за допомогою стану. Ось як це робиться: 931 | 932 | #### Створення компонента форми: 933 | 934 | Спочатку створіть компонент форми та визначте елементи форми всередині нього, такі як текстові поля, чекбокси, кнопки тощо. 935 | 936 | ```jsx 937 | import React, { useState } from "react"; 938 | 939 | const MyForm = () => { 940 | const [formData, setFormData] = useState({ 941 | name: "", 942 | email: "", 943 | // інші поля форми 944 | }); 945 | 946 | const handleInputChange = (event) => { 947 | const { name, value } = event.target; 948 | setFormData({ 949 | ...formData, 950 | [name]: value, 951 | }); 952 | }; 953 | 954 | const handleSubmit = (event) => { 955 | event.preventDefault(); 956 | console.log(formData); 957 | // відправляємо дані на сервер або виконуємо інші операції 958 | }; 959 | 960 | return ( 961 | 985 | ); 986 | }; 987 | 988 | export default MyForm; 989 | ``` 990 | 991 | #### Управління станом: 992 | 993 | У цьому прикладі використовується хук useState, щоб керувати станом даних форми. Обробник handleInputChange викликається при зміні полів введення та оновлює стан форми. 994 | 995 | #### Обробка надсилання: 996 | 997 | Обробник handleSubmit викликається під час надсилання форми. У цьому випадку ми запобігаємо стандартній поведінці надсилання форми на сервер за допомогою event.preventDefault(), щоб продемонструвати обробку даних на клієнті. 998 | 999 | #### Прив'язка значень до полів: 1000 | 1001 | Значення полів форми пов'язані зі станом форми. value елементів введення встановлюється рівним значенням зі стану, а при зміні полів викликається обробник handleInputChange. 1002 | 1003 | #### Надсилання даних: 1004 | 1005 | Після заповнення форми та натискання кнопки відправлення, дані можна використовувати для відправлення на сервер, виконання операцій або інших необхідних дій. 1006 | 1007 | [⬆ Повернутися до списку](#список-запитань) 1008 | 1009 | ### Як реалізувати умовне додавання класу до елемента в React? 1010 | 1011 | У React ви можете умовно додати клас до елемента, використовуючи тернарний оператор або функцію для визначення класового імені. Ось приклади обох підходів: 1012 | 1013 | #### З використанням тернарного оператора: 1014 | 1015 | ```jsx 1016 | import React from "react"; 1017 | 1018 | const MyComponent = ({ isActive }) => { 1019 | return ( 1020 |

Вміст компонента

1021 | ); 1022 | }; 1023 | 1024 | export default MyComponent; 1025 | ``` 1026 | 1027 | У цьому прикладі клас active буде додано до елемента, якщо isActive дорівнює true, інакше буде додано клас inactive. 1028 | 1029 | #### З використанням функції для визначення класу: 1030 | 1031 | ```jsx 1032 | import React from "react"; 1033 | 1034 | const MyComponent = ({ isActive }) => { 1035 | const getClassNames = () => { 1036 | return isActive ? "active" : "inactive"; 1037 | }; 1038 | 1039 | return

Вміст компонента

; 1040 | }; 1041 | 1042 | export default MyComponent; 1043 | ``` 1044 | 1045 | Тут ми визначаємо функцію getClassNames, яка повертає клас залежно від значення isActive. 1046 | 1047 | Якщо ви хочете додати кілька класів, ви можете використовувати об'єднання рядків або бібліотеки, такі як classnames. 1048 | 1049 | ```jsx 1050 | import React from "react"; 1051 | import classnames from "classnames"; 1052 | 1053 | const MyComponent = ({ isActive, isHighlighted }) => { 1054 | const classNames = classnames({ 1055 | active: isActive, 1056 | highlighted: isHighlighted, 1057 | }); 1058 | 1059 | return

Вміст компонента

; 1060 | }; 1061 | 1062 | export default MyComponent; 1063 | ``` 1064 | 1065 | У цьому прикладі classnames бібліотека дає змогу додати кілька класів на основі об'єкта, де ключі - це назви класів, а значення - умови, за яких клас буде додано. 1066 | 1067 | [⬆ Повернутися до списку](#список-запитань) 1068 | 1069 | ### Що таке фрагменти (fragments) у React? 1070 | 1071 | Фрагменти (fragments) - це механізм у React, який дає змогу вам групувати дочірні елементи без необхідності створювати зайві DOM-елементи. Вони дають змогу повернути кілька елементів із компонента без обертання їх у додатковий DOM-контейнер. 1072 | 1073 | До появи фрагментів, якщо ви хотіли повернути кілька елементів із компонента, вам доводилося обгортати їх у додатковий елемент (наприклад,

) або використовувати масив, що могло призвести до зайвого рівня вкладеності або проблем із CSS. 1074 | 1075 | З використанням фрагментів, це має чистіший та ефективніший вигляд: 1076 | 1077 | ```jsx 1078 | import React from "react"; 1079 | 1080 | const MyComponent = () => { 1081 | return ( 1082 | <> 1083 |

Блок 1

1084 |

Блок 2

1085 | 1086 | ); 1087 | }; 1088 | 1089 | export default MyComponent; 1090 | ``` 1091 | 1092 | Фрагменти можуть бути оголошені за допомогою порожніх <> і , а всередині них ви можете розміщувати будь-яку кількість дочірніх елементів. 1093 | 1094 | Фрагменти особливо корисні, коли вам потрібно повернути кілька елементів з компонента, наприклад, з умовних блоків або маппінгу масивів, і ви хочете уникнути створення додаткових контейнерів у DOM. 1095 | 1096 | [⬆ Повернутися до списку](#список-запитань) 1097 | 1098 | ### Яким чином можна оптимізувати продуктивність React-додатку? 1099 | 1100 | Оптимізація продуктивності React-додатку - це важливий аспект, який може суттєво вплинути на користувацький досвід. Ось деякі способи оптимізації продуктивності: 1101 | 1102 | **1. Використовуйте керовані компоненти:** 1103 | 1104 | Використовуйте керовані компоненти для контролю над даними у формах і введенні. Це дасть змогу мінімізувати непотрібні перемальовування та полегшить обробку введених даних. 1105 | 1106 | **2. Використовуйте ключі (keys) правильно:** 1107 | 1108 | Під час рендерингу списків компонентів переконайтеся, що в кожного елемента є унікальний ключ. Це дасть змогу React ефективно оновлювати тільки змінені елементи. 1109 | 1110 | **3. Ледаче завантаження (Code Splitting):** 1111 | 1112 | Розділіть ваш застосунок на невеликі фрагменти та використовуйте механізм ледачого завантаження для завантаження компонентів тільки тоді, коли вони дійсно потрібні. 1113 | 1114 | **4. Мемоїзація:** 1115 | 1116 | Використовуйте хуки useMemo та useCallback для кешування обчислень та уникнення непотрібних перерахунків під час рендерингу. 1117 | 1118 | **5. Пакети компонентів (Component Libraries):** 1119 | 1120 | Використовуйте готові пакети компонентів (наприклад, Material-UI, Ant Design), які оптимізовані та протестовані з урахуванням продуктивності. 1121 | 1122 | **6. Віртуалізація списків:** 1123 | 1124 | Під час роботи з великими списками даних використовуйте бібліотеки віртуалізації (наприклад, react-virtualized), щоб рендерити тільки видимі елементи списку. 1125 | 1126 | **7. Оптимізація рендерінгу:** 1127 | 1128 | Уникайте непотрібних рендерів компонентів, використовуйте shouldComponentUpdate (у класових компонентах) або React.memo (у функціональних компонентах) для запобігання зайвим перемальовуванням. 1129 | 1130 | **8. Уникайте глибокої вкладеності:** 1131 | 1132 | Постарайтеся не створювати надто глибоку ієрархію компонентів, щоб зменшити час рендерингу та перерахунку. 1133 | 1134 | **9. Аналіз продуктивності:** 1135 | 1136 | Використовуйте інструменти, як-от React DevTools та браузерні інструменти продуктивності, щоб аналізувати й оптимізувати продуктивність вашого застосунку. 1137 | 1138 | **10. Серверний рендеринг (Server-Side Rendering, SSR):** 1139 | 1140 | Якщо це доречно для вашого застосунку, розгляньте можливість використання SSR для поліпшення початкового завантаження та SEO. 1141 | 1142 | Зверніть увагу, що оптимізація продуктивності залежить від конкретного контексту вашого застосунку. Рекомендується використовувати інструменти профілювання та вимірювати продуктивність після кожної оптимізації, щоб переконатися, що вона справді призводить до поліпшень. 1143 | 1144 | [⬆ Повернутися до списку](#список-запитань) 1145 | 1146 | ### Що таке HOC (Higher-Order Component) у React? 1147 | 1148 | Високорівневий компонент (Higher-Order Component, HOC) - це патерн у React, який дає змогу повторно використовувати логіку компонентів, абстрагуючи її від самих компонентів. HOC не є частиною API React, це радше патерн композиції компонентів. 1149 | 1150 | HOC - це функція, яка приймає компонент і повертає новий компонент із додатковою логікою. HOC дають змогу винести загальні функціональні або структурні аспекти компонентів і повторно використовувати їх із різними компонентами. 1151 | 1152 | Приклад HOC: 1153 | 1154 | ```jsx 1155 | import React from "react"; 1156 | 1157 | const withLogger = (WrappedComponent) => { 1158 | return class WithLogger extends React.Component { 1159 | componentDidMount() { 1160 | console.log("Рендерінг компонента"); 1161 | } 1162 | 1163 | render() { 1164 | return ; 1165 | } 1166 | }; 1167 | }; 1168 | 1169 | const MyComponent = () => { 1170 | return

Вміст компонента

; 1171 | }; 1172 | 1173 | const EnhancedComponent = withLogger(MyComponent); 1174 | 1175 | export default EnhancedComponent; 1176 | ``` 1177 | 1178 | У цьому прикладі withLogger - це HOC, який додає логування в метод componentDidMount. Потім компонент MyComponent обгортається HOC, створюючи EnhancedComponent. 1179 | 1180 | HOC дозволяє: 1181 | 1182 | - Розширювати функціональність компонентів без зміни самих компонентів. 1183 | - Перевикористовувати код і логіку між різними компонентами. 1184 | - Створювати загальні патерни для логування, аутентифікації, обробки помилок та інших аспектів. 1185 | 1186 | Однак, з розвитком React і появою хуків, частина функціональності HOC тепер може бути реалізована з використанням хуків, таких як useEffect, useContext та інших. У більшості випадків, використання хуків є кращим. 1187 | 1188 | [⬆ Повернутися до списку](#список-запитань) 1189 | 1190 | ### В чем разница между HOC и компонентами с рендер-пропсами (render props)? 1191 | 1192 | Як HOC (Високорівневий компонент, Higher-Order Component), так і компоненти з рендер-пропсами представляють патерни в React для повторного використання логіки між компонентами. Однак, у них є відмінності в тому, як їх реалізовано та як вони використовуються. 1193 | 1194 | #### HOC (Higher-Order Component): 1195 | 1196 | - HOC - це функція, яка приймає компонент і повертає новий компонент із додатковою логікою. 1197 | - HOC можна використовувати як обгортку для компонентів, додаючи до них загальну функціональність. 1198 | - HOC виконуються під час створення компонента, і логіка, додана HOC, застосовується під час кожного рендеринга. 1199 | - У HOC є доступ до життєвих циклів компонента та його стану. 1200 | - Приклад HOC - connect з бібліотеки Redux, який пов'язує компоненти зі сховищем стану. 1201 | 1202 | #### Компоненти з рендер-пропсами (Render Props Components): 1203 | 1204 | - Компонент із рендер-пропсами - це компонент, який приймає функцію як властивість і викликає цю функцію для рендерингу чого-небудь. 1205 | - Компонент із рендер-пропсами дає змогу передавати логіку рендерингу безпосередньо в компонент, який використовує цей компонент із рендер-пропсами. 1206 | - Логіка рендерингу передається через функцію-пропс і може бути використана за потреби. 1207 | - Компонент з рендер-пропсами не має доступу до життєвих циклів батьківського компонента, але може мати доступ до стану через пропси. 1208 | - Приклад компонента з рендер-пропсами - компоненти Mouse або Toggle в документації React. 1209 | 1210 | Вибір між HOC і компонентами з рендер-пропсами залежить від конкретної ситуації та вподобань розробника. Обидва патерни дають змогу досягти повторного використання логіки, але з різними підходами. 1211 | 1212 | [⬆ Повернутися до списку](#список-запитань) 1213 | 1214 | ### Що таке рефи (refs) у React і як вони використовуються? 1215 | 1216 | Refs (скорочення від references) - це механізм у React, який дає змогу отримувати прямий доступ до DOM-елементів або компонентів, створених у React. Вони дають змогу вам звертатися до елементів, оновлювати їхні властивості та викликати методи компонентів без використання пропсів або стану. 1217 | 1218 | Refs корисні, коли вам потрібно взаємодіяти з DOM елементами безпосередньо або отримувати доступ до методів і властивостей компонентів, які не доступні через пропси. 1219 | 1220 | #### Створення рефів 1221 | 1222 | Існує два способи створення рефів: 1223 | 1224 | 1. З використанням `React.createRef()` (class components): 1225 | 1226 | ```jsx 1227 | import React, { Component } from "react"; 1228 | 1229 | class MyComponent extends Component { 1230 | constructor(props) { 1231 | super(props); 1232 | this.myRef = React.createRef(); 1233 | } 1234 | 1235 | render() { 1236 | return

Вміст компоненту

; 1237 | } 1238 | } 1239 | ``` 1240 | 1241 | 2. З використанням колбека (functional components): 1242 | 1243 | ```jsx 1244 | import React, { useRef } from "react"; 1245 | 1246 | const MyComponent = () => { 1247 | const myRef = useRef(); 1248 | 1249 | return

Вміст компоненту

; 1250 | }; 1251 | ``` 1252 | 1253 | #### Використання рефів 1254 | 1255 | Рефи можуть використовуватися для доступу до DOM-елементів або компонентів: 1256 | 1257 | ```jsx 1258 | class MyComponent extends Component { 1259 | constructor(props) { 1260 | super(props); 1261 | this.myInputRef = React.createRef(); 1262 | } 1263 | 1264 | focusInput() { 1265 | this.myInputRef.current.focus(); // Фокус на input елементі 1266 | } 1267 | 1268 | render() { 1269 | return ; 1270 | } 1271 | } 1272 | ``` 1273 | 1274 | ```jsx 1275 | const MyComponent = () => { 1276 | const myButtonRef = useRef(); 1277 | 1278 | const handleClick = () => { 1279 | myButtonRef.current.textContent = "Кнопку натиснуто"; 1280 | }; 1281 | 1282 | return ( 1283 |

1284 | 1287 |

1288 | ); 1289 | }; 1290 | ``` 1291 | 1292 | #### Які є нюанси? 1293 | 1294 | - Використовуйте рефи з обережністю, оскільки це може порушити концепцію управління станом у React. 1295 | - У більшості випадків краще уникати використання рефів і віддавати перевагу роботі з даними через стан і пропси. 1296 | 1297 | [⬆ Повернутися до списку](#список-запитань) 1298 | 1299 | ### Як реалізувати анімацію в React-додатку? 1300 | 1301 | У React анімації можуть бути реалізовані з використанням різних методів і бібліотек. Ось кілька способів, як це можна зробити: 1302 | 1303 | **1. CSS Анімації та Транзиції:** 1304 | Ви можете використовувати CSS для створення анімацій і транзицій. Додайте класи з анімацією або транзицією до елементів і змінюйте їхні стилі за допомогою JavaScript або стану компонентів. 1305 | 1306 | **2. React Transition Group:** 1307 | Це бібліотека, яка полегшує створення анімацій під час додавання, оновлення або видалення компонентів. Вона надає компоненти для управління анімаціями на рівні компонентів. 1308 | 1309 | **3. React Spring:** 1310 | Це потужна бібліотека для фізичних анімацій (пружинних анімацій). Вона надає хуки та компоненти для створення плавних анімацій. 1311 | 1312 | **4. CSS-in-JS бібліотеки:** 1313 | Бібліотеки, як-от styled-components і emotion, дають змогу створювати стилі та анімації безпосередньо в JavaScript. Вони надають механізми для створення анімацій на основі стану компонентів. 1314 | 1315 | **5. Бібліотеки для анімації SVG:** 1316 | Якщо ви працюєте з SVG, ви можете використовувати бібліотеки, як-от react-spring-svg, для анімування SVG елементів. 1317 | 1318 | **6. Бібліотеки для анімованих переходів:** 1319 | Якщо вам потрібні складні анімовані переходи між різними сторінками, ви можете використовувати бібліотеки, такі як react-router-transition, які надають механізми для анімації переходів між маршрутами. 1320 | 1321 | Приклад використання React Transition Group: 1322 | 1323 | ```jsx 1324 | import React from "react"; 1325 | import { CSSTransition } from "react-transition-group"; 1326 | import "./MyComponent.css"; 1327 | 1328 | const MyComponent = ({ show }) => { 1329 | return ( 1330 | 1331 |

Вміст компонента

1332 | 1333 | ); 1334 | }; 1335 | 1336 | export default MyComponent; 1337 | ``` 1338 | 1339 | У цьому прикладі, коли show дорівнює true, компонент буде анімований під час появи та зникнення за допомогою CSS класів і транзицій. 1340 | 1341 | Зверніть увагу: При створенні анімацій, особливо складних, слід враховувати продуктивність і подбати про те, щоб анімації не сповільнювали роботу вашої програми. 1342 | 1343 | [⬆ Повернутися до списку](#список-запитань) 1344 | 1345 | ### Як працює механізм "контексту" (context) для передачі даних? 1346 | 1347 | Механізм "контексту" (context) в React дає змогу передавати дані глибоко вниз по дереву компонентів без явної передачі через пропси на кожному рівні. Це особливо корисно, коли кілька компонентів потребують доступу до одних і тих самих даних. 1348 | 1349 | Контекст складається з двох частин: 1350 | 1351 | 1. "постачальник" або "провайдер" (provider); 1352 | 2. "споживач" (consumer). 1353 | 1354 | **Постачальник (Provider):** 1355 | Постачальник визначає дані, які слід передати. Він обертає дерево компонентів, які мають отримати доступ до цих даних, і надає методи для їхнього доступу. 1356 | 1357 | **Споживач (Consumer):** 1358 | Споживач використовує методи, надані постачальником, для доступу до даних, переданих через контекст. 1359 | 1360 | Приклад використання контексту: 1361 | 1362 | ```jsx 1363 | import React, { createContext, useContext } from "react"; 1364 | 1365 | // Створюємо контекст 1366 | const MyContext = createContext(); 1367 | 1368 | // Постачальник даних 1369 | const MyProvider = ({ children }) => { 1370 | const sharedData = { message: "Повідомлення з контексту" }; 1371 | 1372 | return {children}; 1373 | }; 1374 | 1375 | // Компонент-споживач 1376 | const MyComponent = () => { 1377 | const data = useContext(MyContext); 1378 | 1379 | return

{data.message}

; 1380 | }; 1381 | 1382 | // Всередині компонента App 1383 | function App() { 1384 | return ( 1385 | 1386 | 1387 | 1388 | ); 1389 | } 1390 | ``` 1391 | 1392 | У цьому прикладі компонент `MyComponent` використовує `useContext` для доступу до даних, переданих через контекст. Коли `MyComponent` рендериться всередині `MyProvider`, він автоматично отримує доступ до даних, які були передані через контекст. 1393 | 1394 | Контекст слід використовувати обережно, оскільки він може ускладнити відстеження передачі даних у додатку. Він найбільш корисний для передачі даних, які вважаються глобальними або загальними для багатьох компонентів. 1395 | 1396 | [⬆ Повернутися до списку](#список-запитань) 1397 | 1398 | ### Що таке портали (portals) у React? 1399 | 1400 | Портали (portals) - це механізм у React, який дає змогу рендерувати дочірні елементи в DOM-вузли, які знаходяться поза ієрархією DOM-компонента. Це означає, що ви можете рендерити вміст компонента в інший елемент поза поточним деревом компонентів. 1401 | 1402 | Портали корисні, коли вам потрібно рендерити компоненти на верхньому рівні DOM (наприклад, для створення модальних вікон або спливаючих підказок), але зберегти логіку та стан компонента всередині вашого React-додатку. 1403 | 1404 | Приклад використання порталів: 1405 | 1406 | ```jsx 1407 | import React from "react"; 1408 | import ReactDOM from "react-dom"; 1409 | 1410 | const Modal = ({ children }) => { 1411 | const modalRoot = document.getElementById("modal-root"); 1412 | return ReactDOM.createPortal(children, modalRoot); 1413 | }; 1414 | 1415 | const App = () => { 1416 | return ( 1417 |

1418 |

Вміст основного компонента

1419 | 1420 |

Вміст модального вікна

1421 | 1422 |

1423 | ); 1424 | }; 1425 | 1426 | ReactDOM.render(, document.getElementById("root")); 1427 | ``` 1428 | 1429 | У цьому прикладі компонент `Modal` використовує портали для рендерингу свого вмісту в DOM-вузлі з id `modal-root`. По суті, `Modal` створює "спливаюче" вікно, яке рендерується на рівні верхнього рівня, але все ще має доступ до стану та методів компонента `App`. 1430 | 1431 | Важливо зазначити, що портали не змінюють ієрархію компонентів у React-додатку, вони просто рендерять вміст в іншому місці в DOM. 1432 | 1433 | [⬆ Повернутися до списку](#список-запитань) 1434 | 1435 | ### Як реалізувати lazy loading у React з використанням Suspense? 1436 | 1437 | Ледаче завантаження (lazy loading) у React дає змогу відкладати завантаження компонентів доти, доки вони дійсно не знадобляться. Це може поліпшити продуктивність програми, зменшивши початковий час завантаження. 1438 | 1439 | Для реалізації ледачого завантаження з використанням `Suspense`, ви можете використовувати функцію `React.lazy()`, яка дає змогу ледаче завантажувати динамічні імпорти компонентів. Однак, `React.lazy()` працює тільки з дефолтними експортами компонентів. 1440 | 1441 | Ось як це можна зробити: 1442 | 1443 | 1. Створіть компонент, що ліниво завантажується: 1444 | 1445 | ```jsx 1446 | // LazyComponent.jsx 1447 | import React from "react"; 1448 | 1449 | const LazyComponent = () => { 1450 | return

Ліниво завантажений компонент

; 1451 | }; 1452 | 1453 | export default LazyComponent; 1454 | ``` 1455 | 1456 | 2. Використовуйте `React.lazy()` для ледачого завантаження: 1457 | 1458 | ```jsx 1459 | import React, { Suspense } from "react"; 1460 | 1461 | const LazyComponent = React.lazy(() => import("./LazyComponent")); 1462 | 1463 | const App = () => { 1464 | return ( 1465 |

1466 |

Вміст основного компоненту

1467 | Loading...

}> 1468 | 1469 | 1470 |

1471 | ); 1472 | }; 1473 | 1474 | export default App; 1475 | ``` 1476 | 1477 | У цьому прикладі `React.lazy()` використовується для ледачого завантаження компонента `LazyComponent`. Обертання `` в `` дає змогу вказати компонент-заглушку, який буде показано під час завантаження. 1478 | 1479 | При використанні ледачого завантаження через `React.lazy()`, не забудьте, що це працює тільки з дефолтними експортами компонентів. Якщо ви хочете ліниво завантажити компоненти з іменованими експортами, ви можете використовувати альтернативний підхід з `import()`: 1480 | 1481 | ```jsx 1482 | const LazyComponent = React.lazy(() => import("./LazyComponent")); 1483 | ``` 1484 | 1485 | [⬆ Повернутися до списку](#список-запитань) 1486 | 1487 | ### Які нововведення було додано в React 16? 1488 | 1489 | React 16, також відомий як React Fiber, вніс безліч значних змін і нововведень: 1490 | 1491 | 1. **Fiber Architecture:** 1492 | Було запроваджено нову архітектуру під назвою Fiber, яка дала змогу React більш ефективно обробляти оновлення компонентів, роблячи додатки більш чуйними. 1493 | 1494 | 2. **Portals:** 1495 | Було додано можливість використовувати Portals, що дають змогу рендерити дочірні компоненти за межами ієрархії DOM-вузлів батьківського компонента. Це корисно, наприклад, для створення модальних вікон або спливаючих меню. 1496 | 1497 | 3. **Error Boundaries:** 1498 | Введено Error Boundaries, які дають змогу ізолювати помилки в компонентах, запобігаючи падінню всієї програми. Це допомагає поліпшити стабільність інтерфейсу. 1499 | 1500 | 4. **Fragment:** 1501 | З'явився новий компонент Fragment, який дає змогу групувати дочірні елементи без додавання зайвих DOM-вузлів. 1502 | 1503 | 5. **Сustom DOM Attributes:** 1504 | Тепер можна передавати користувацькі атрибути в DOM-елементи без попереджень. 1505 | 1506 | 6. **Server-Side Rendering Improvements:** 1507 | Покращення в механізмах SSR (Server-Side Rendering) за допомогою нових API та оптимізацій. 1508 | 1509 | 7. **Return Types:** 1510 | Введено нові типи значень, що повертаються, для компонентів, як-от string і number, що дає змогу використовувати елементи, що повертаються функціональними компонентами, як дочірні елементи. 1511 | 1512 | 8. **Підтримка Map та Set:** 1513 | React Elements тепер можуть бути створені з екземплярів Map і Set. 1514 | 1515 | 9. **Компактніший React:** 1516 | Розмір бібліотеки було зменшено за рахунок оптимізацій і видалення застарілого коду. 1517 | 1518 | 10. **Нові Warnings і Deprecations:** 1519 | Було внесено зміни в систему попереджень, а також видалено застарілі методи. 1520 | 1521 | 11. **Новий рендерер:** 1522 | Додано новий експериментальний рендерер під назвою Scheduler, який дає змогу контролювати пріоритети рендерінгу для кращої чуйності інтерфейсу. 1523 | 1524 | 12. **Подієвий обробник onFocus:** 1525 | Введено підтримку обробника onFocus для обробки фокусування на елементах. 1526 | 1527 | 13. **Новий атрибут forwardRef:** 1528 | Додано атрибут forwardRef, що спрощує передавання ref'ів між компонентами. 1529 | 1530 | [⬆ Повернутися до списку](#список-запитань) 1531 | 1532 | ### Як використовувати React DevTools для налагодження програми? 1533 | 1534 | React DevTools - це інструмент для розробників, який надає зручні засоби для налагодження та аналізу React-додатків. Ось як використовувати React DevTools для налагодження: 1535 | 1536 | **1. Встановлення та налаштування:** 1537 | 1538 | - Переконайтеся, що ви встановили React DevTools у вашому браузері. Ви можете знайти його в магазині розширень браузера. 1539 | - Після встановлення перезапустіть браузер, щоб зміни набули чинності. 1540 | 1541 | **2. Відкриття DevTools:** 1542 | 1543 | - Відкрийте веб-додаток, який ви хочете налагодити. 1544 | - Натисніть правою кнопкою миші в будь-якому місці сторінки та виберіть "Дослідити елемент" або "Переглянути код" (залежно від браузера). Це відкриє інструменти розробника. 1545 | 1546 | **3. Вкладка React:** 1547 | 1548 | - В інструментах розробника знайдіть вкладку з назвою "React" або "React" (залежно від браузера та версії DevTools). Зазвичай вона розташована поруч із вкладками "Елементи" та "Консоль". 1549 | - Перейдіть на цю вкладку. 1550 | 1551 | **4. Інспектування компонентів:** 1552 | 1553 | - У React DevTools ви побачите ієрархію компонентів вашої програми. 1554 | - Ви можете розкривати компоненти, щоб бачити їхній стан і властивості. 1555 | - Виділіть компонент, щоб бачити його поточний стан і пропси праворуч. 1556 | 1557 | **5. Зміна стану:** 1558 | 1559 | Якщо ви працюєте з компонентами, заснованими на класах, ви можете взаємодіяти з компонентами, змінюючи їхні стани та пропси, натискаючи на них у DevTools. 1560 | 1561 | **6. Відстеження оновлень:** 1562 | 1563 | React DevTools дає змогу відстежувати, які компоненти були оновлені під час зміни стану або пропсів. Ви побачите, які компоненти перемальовуються, а які ні. 1564 | 1565 | **7. Профілювання:** 1566 | 1567 | React DevTools також надає інструменти для профілювання продуктивності вашого застосунку, що дає змогу виявити вузькі місця в продуктивності та оптимізувати код. 1568 | 1569 | **8. Відстеження помилок:** 1570 | 1571 | Якщо у вашому додатку виникають помилки, React DevTools може допомогти вам їх легко відстежити та простежити до конкретних компонентів. 1572 | 1573 | Використання React DevTools істотно полегшує налагодження та аналіз React-додатків, допомагаючи розробникам легко розуміти, як компоненти взаємодіють та як зміни стану впливають на інтерфейс. 1574 | 1575 | [⬆ Повернутися до списку](#список-запитань) 1576 | 1577 | ### Що таке "хуки" (hooks) у React і для чого вони використовуються? 1578 | 1579 | Хуки (hooks) у React - це функції, які дають змогу вам "зачепитися" за внутрішній стан і функціональність React компонентів. Вони були представлені в React 16.8 і дали змогу функціональним компонентам використовувати стан та інші можливості, які раніше були доступні тільки класовим компонентам. Хуки дають змогу писати чистіший, читабельніший і перевикористовуваний код. 1580 | 1581 | #### Приклади хуків: 1582 | 1583 | 1. **useState:** 1584 | Дозволяє функціональним компонентам мати локальний стан. Ви можете визначити змінні стану та функції для їхнього оновлення. Приклад: 1585 | 1586 | ```jsx 1587 | import React, { useState } from "react"; 1588 | 1589 | function Counter() { 1590 | const [count, setCount] = useState(0); 1591 | 1592 | return ( 1593 |

1594 |

Підрахунок: {count}

1595 | 1596 |

1597 | ); 1598 | } 1599 | ``` 1600 | 1601 | 2. **useEffect:** 1602 | Дозволяє виконувати побічні ефекти у функціональних компонентах. Наприклад, виконання коду після рендерингу компонента, робота з асинхронними запитами та підписками. Приклад: 1603 | 1604 | ```jsx 1605 | import React, { useState, useEffect } from "react"; 1606 | 1607 | function DataFetching() { 1608 | const [data, setData] = useState([]); 1609 | 1610 | useEffect(() => { 1611 | fetchData(); // Тут може бути код для отримання даних 1612 | }, []); 1613 | 1614 | return ( 1615 |

{item.name}

1620 | ); 1621 | } 1622 | ``` 1623 | 1624 | 3. **useContext**: 1625 | Дозволяє отримувати доступ до контексту з компонента. Контекст - це спосіб передачі даних глибоко в дерево компонентів без явної передачі через пропси. Приклад: 1626 | 1627 | ```jsx 1628 | import React, { useContext } from "react"; 1629 | import { ThemeContext } from "./ThemeContext"; 1630 | 1631 | function ThemedButton() { 1632 | const theme = useContext(ThemeContext); 1633 | 1634 | return ( 1635 | 1638 | ); 1639 | } 1640 | ``` 1641 | 1642 | Хуки дають змогу розбивати логіку на дрібніші й керованіші частини, роблячи компоненти чистішими та легшими для тестування. Вони також усувають необхідність у класових компонентах у більшості випадків, що робить код зрозумілішим і скорочує обсяг бойлерплейта. 1643 | 1644 | [⬆ Повернутися до списку](#список-запитань) 1645 | 1646 | ### Як створити власний хук у React? 1647 | 1648 | Створення власних хуків дає змогу абстрагувати та перевикористовувати логіку між різними компонентами. Щоб створити власний хук, виконайте такі кроки: 1649 | 1650 | 1. Створення функції хука: 1651 | 1652 | Створіть функцію, яка представлятиме ваш хук. Назва хука зазвичай починається з "use", щоб відповідати угоді та щоб React правильно його розпізнавав як хук. 1653 | 1654 | Ця функція може містити будь-яку логіку, яку ви хочете розділити між компонентами. 1655 | 1656 | 2. Визначення стану та функцій оновлення (за необхідності): 1657 | 1658 | Якщо ваш хук повинен керувати станом, використовуйте `useState` для створення стану та функцій для його оновлення. 1659 | 1660 | 3. Повернення даних і функцій: 1661 | 1662 | Поверніть дані та функції, які компоненти будуть використовувати. Зазвичай це робиться у вигляді об'єкта. 1663 | 1664 | 4. Використання хука в компоненті: 1665 | 1666 | Імпортуйте ваш хук у компонент, де ви хочете використовувати цю логіку. 1667 | Викличте функцію хука в компоненті та отримайте необхідні дані та функції. 1668 | 1669 | Ось приклад, як це може виглядати: 1670 | 1671 | ```jsx 1672 | import { useState } from "react"; 1673 | 1674 | // Створюємо власний хук 1675 | function useCounter(initialCount) { 1676 | const [count, setCount] = useState(initialCount); 1677 | 1678 | const increment = () => { 1679 | setCount(count + 1); 1680 | }; 1681 | 1682 | const decrement = () => { 1683 | setCount(count - 1); 1684 | }; 1685 | 1686 | return { 1687 | count, 1688 | increment, 1689 | decrement, 1690 | }; 1691 | } 1692 | 1693 | // Використовуємо хук у компоненті 1694 | function CounterComponent() { 1695 | const { count, increment, decrement } = useCounter(0); 1696 | 1697 | return ( 1698 |

1699 |

Порахуйте: {count}

1700 | 1701 | 1702 |

1703 | ); 1704 | } 1705 | ``` 1706 | 1707 | Створений хук `useCounter` інкапсулює стан лічильника та функції для його оновлення. Це дає змогу використовувати ту саму логіку лічильника в різних компонентах без дублювання коду. 1708 | 1709 | Зверніть увагу, що хуки не можуть бути асинхронними, та їх не можна викликати всередині умов або циклів, адже порядок викликів хуків у компоненті має бути постійним. 1710 | 1711 | [⬆ Повернутися до списку](#список-запитань) 1712 | 1713 | ### Як обробляти помилки в React-додатку за допомогою Error Boundary? 1714 | 1715 | Error Boundary (граничні помилки) в React - це компоненти, які обертають інші компоненти та дають змогу перехоплювати й обробляти помилки, що сталися в дочірніх компонентах під час рендерингу. Вони запобігають "провалюванню" помилок на рівень вище та дають змогу гладко обробити проблеми в інтерфейсі. 1716 | 1717 | #### Ось як створити Error Boundary: 1718 | 1719 | 1. Створення Error Boundary компонента: 1720 | 1721 | Створіть новий компонент, який слугуватиме вам як Error Boundary. 1722 | 1723 | Він має реалізувати методи `componentDidCatch(error, info)`. 1724 | 1725 | 2. Обробка помилок у методі `componentDidCatch`: 1726 | 1727 | У методі `componentDidCatch` ви можете обробити помилку, наприклад, показавши користувачеві повідомлення або записавши деталі помилки в логи. 1728 | 1729 | 3. Використання Error Boundary: 1730 | 1731 | Оберніть компоненти, які ви хочете захистити, всередині створеного Error Boundary компонента. 1732 | 1733 | Коли помилка станеться всередині дочірніх компонентів, Error Boundary перехопить її та спрацює метод componentDidCatch. 1734 | 1735 | Приклад: 1736 | 1737 | ```jsx 1738 | import React, { Component } from "react"; 1739 | 1740 | class ErrorBoundary extends Component { 1741 | constructor(props) { 1742 | super(props); 1743 | this.state = { 1744 | hasError: false, 1745 | }; 1746 | } 1747 | 1748 | componentDidCatch(error, info) { 1749 | this.setState({ hasError: true }); 1750 | // Тут можна виконати логування або інші дії з обробки помилки 1751 | } 1752 | 1753 | render() { 1754 | if (this.state.hasError) { 1755 | return

Щось пішло не так. Ми працюємо над цією проблемою.

; 1756 | } 1757 | return this.props.children; 1758 | } 1759 | } 1760 | 1761 | // Застосування Error Boundary 1762 | class App extends Component { 1763 | render() { 1764 | return ( 1765 |

1766 |

Мій застосунок

1767 | 1768 | {/* Компоненти, які будуть захищені від помилок */} 1769 | 1770 |

1771 | ); 1772 | } 1773 | } 1774 | ``` 1775 | 1776 | Важливо зазначити, що Error Boundary не перехоплює помилки в асинхронних операціях, усередині подієвих обробників або всередині інших Error Boundary. Тому гарною практикою є обертання лише тих компонентів, які є окремими модулями та ймовірно можуть спричинити помилки. 1777 | 1778 | [⬆ Повернутися до списку](#список-запитань) 1779 | 1780 | ### Як працює алгоритм узгодження (reconciliation) у React? 1781 | 1782 | Алгоритм узгодження в React - це процес порівняння віртуального DOM (VDOM) попереднього та поточного станів компонента, щоб визначити, які зміни необхідно внести в реальний DOM для відображення нового стану. Він дає змогу мінімізувати зміни в DOM і забезпечує ефективне оновлення інтерфейсу. 1783 | 1784 | #### Ось як працює алгоритм узгодження: 1785 | 1786 | 1. Створення віртуального DOM: 1787 | 1788 | Під час першого рендерінгу компонента React створює віртуальне дерево елементів (віртуальний DOM), що представляє структуру компонентів та їхні властивості. 1789 | 1790 | 2. Порівняння віртуальних DOM: 1791 | 1792 | Коли компонент перемальовується, React створює нове віртуальне дерево для нового стану. 1793 | 1794 | Потім порівнює нове віртуальне дерево з попереднім, враховуючи ієрархію та ключі елементів. 1795 | 1796 | 3. Визначення змін: 1797 | 1798 | У результаті порівняння React визначає, які елементи змінилися, які додалися або видалені. 1799 | 1800 | Ключі елементів допомагають React визначити, які елементи перемістилися, а які змінені. 1801 | 1802 | 4. Генерація пакета змін (diff): 1803 | 1804 | На основі визначених змін React генерує пакет змін (diff), який описує, які зміни потрібно внести в реальний DOM. 1805 | 1806 | 5. Застосування змін у DOM: 1807 | 1808 | React застосовує пакет змін до реального DOM. 1809 | 1810 | Це може включати вставку, оновлення або видалення елементів залежно від типу змін. 1811 | 1812 | 6. Виклик методів життєвого циклу: 1813 | 1814 | Після оновлення реального DOM React викликає відповідні методи життєвого циклу компонентів (наприклад, `componentDidUpdate`). 1815 | 1816 | 7. Асинхронність і пакетна обробка: 1817 | 1818 | React може групувати кілька оновлень в одну операцію, щоб зменшити кількість змін у DOM та оптимізувати продуктивність. 1819 | 1820 | React також може оптимізувати порядок оновлень для ефективнішого застосування змін. 1821 | 1822 | Алгоритм узгодження дає змогу React рендерити компоненти ефективно, мінімізуючи кількість дорогих операцій оновлення DOM. Це робить React потужною бібліотекою для створення швидких і чуйних користувацьких інтерфейсів. 1823 | 1824 | [⬆ Повернутися до списку](#список-запитань) 1825 | 1826 | ### Які популярні бібліотеки для управління станом ви знаєте, крім вбудованого useState? 1827 | 1828 | Крім вбудованого useState у React, існує низка популярних сторонніх бібліотек для керування станом у застосунках. Деякі з них: 1829 | 1830 | **1) Redux:** Одна з найпопулярніших бібліотек для управління станом. Вона надає передбачуваний спосіб організації стану, централізоване сховище та дії для зміни стану. Redux широко використовується у великих і складних додатках. 1831 | 1832 | **2) Mobx:** Ще одна бібліотека управління станом, яка забезпечує реактивне програмування. Mobx дає змогу визначати спостережувані дані й автоматично оновлювати компоненти в разі їхньої зміни. 1833 | 1834 | **3) Mobx-State-Tree (MST):** Це розширення Mobx, що надає більш сувору структуру для організації стану програми. MST дає змогу створювати моделі даних із певними типами, діями та обчислюваними значеннями. 1835 | 1836 | **4) Zustand:** Це легка бібліотека управління станом, яка підходить для невеликих і середніх додатків. Вона використовує функціональне програмування та хук useReducer, щоб надати простий API для роботи зі станом. 1837 | 1838 | **5) Recoil:** Бібліотека, розроблена Facebook, яка призначена для управління станом у React-додатках. Вона ґрунтується на концепції атомів і селекторів, що дає змогу більш декларативно описувати стан і його залежності. 1839 | 1840 | **6) Easy Peasy:** Це бібліотека, створена на основі Redux, але зі спрощеним синтаксисом. Вона надає більш легке та інтуїтивне API для управління станом. 1841 | 1842 | **7) Valtio:** Ще одна легка бібліотека для управління станом. Вона використовує проксі-об'єкти для відстеження змін та автоматичного оновлення компонентів. 1843 | 1844 | Кожна з цих бібліотек має свої особливості та підходи до управління станом у React-додатках. Вибір бібліотеки залежить від складності програми, ваших уподобань і досвіду. 1845 | 1846 | [⬆ Повернутися до списку](#список-запитань) 1847 | 1848 | ### Яким чином можна оптимізувати рендеринг компонентів у React? 1849 | 1850 | Оптимізація візуалізації компонентів у React допомагає поліпшити продуктивність вашого застосунку та забезпечити більш плавний користувацький досвід. Ось кілька способів, як можна оптимізувати рендеринг компонентів: 1851 | 1852 | **1) Використання ключів (Keys):** 1853 | 1854 | Під час відображення списків елементів у React, приділяйте увагу унікальним ключам (key). 1855 | 1856 | Ключі допомагають React визначити, які елементи були додані, змінені або видалені, що допомагає скоротити кількість змін у DOM. 1857 | 1858 | **2) Уникнення непотрібних рендерів:** 1859 | 1860 | Використовуйте методи `shouldComponentUpdate` (у класових компонентах) або `React.memo` (у функціональних компонентах), щоб запобігти непотрібним перемальовуванням. 1861 | 1862 | Вони дають змогу перевірити, чи дійсно компонент потрібно оновлювати під час зміни стану або пропсів. 1863 | 1864 | **3) Використання PureComponent та memo:** 1865 | 1866 | Скористайтеся `PureComponent` (у класових компонентах) або `React.memo` (у функціональних компонентах) для автоматичної перевірки змін пропсів і стану перед оновленням компонента. 1867 | 1868 | **4) Поділ компонентів:** 1869 | 1870 | Розбийте великі компоненти на дрібніші, щоб зменшити сферу оновлення та зробити код більш модульним. 1871 | 1872 | **5) Використання хуків:** 1873 | 1874 | Хуки, як-от `useMemo` чи `useCallback`, дають змогу кешувати значення та колбеки, що зменшує надлишкові обчислення та оновлення. 1875 | 1876 | **6) Ліниве завантаження (Lazy Loading):** 1877 | 1878 | Використовуйте ледаче завантаження для окремих компонентів за допомогою `React.lazy` та `Suspense`, щоб завантажувати компоненти тільки тоді, коли вони дійсно знадобляться. 1879 | 1880 | **7) Оптимізовані список:** 1881 | 1882 | Для відображення великих списків використовуйте бібліотеки, такі як `react-virtualized` або `react-window`, щоб візуалізувати лише видимі елементи. 1883 | 1884 | **8) Пакетне оновлення (Batching):** 1885 | 1886 | React автоматично групує кілька оновлень стану або пропсів в одну операцію, щоб зменшити кількість змін у DOM. 1887 | 1888 | **9) Використання Production Build:** 1889 | 1890 | Під час розгортання застосунку використовуйте оптимізований "production" білд React, який включає мінімізований код та інші оптимізації. 1891 | 1892 | **10) Профілювання:** 1893 | 1894 | Використовуйте інструменти профілювання React, такі як React DevTools Profiler, щоб виявити вузькі місця в продуктивності та оптимізувати їх. 1895 | 1896 | Оптимізація візуалізації компонентів - це постійний процес, оскільки продуктивність може залежати від конкретного застосунку та його контексту. Регулярне вивчення нових інструментів і методів допоможе поліпшити продуктивність вашого React-додатку. 1897 | 1898 | [⬆ Повернутися до списку](#список-запитань) 1899 | 1900 | ### Що таке "глибоке порівняння" (deep comparison) у контексті оптимізації продуктивності React? 1901 | 1902 | "Глибоке порівняння" (deep comparison) - це процес порівняння двох об'єктів або структур даних на основі їхніх внутрішніх значень, а не на основі посилань або ідентифікаторів. У контексті оптимізації продуктивності React, глибоке порівняння використовується для визначення, чи змінилися дані в компонентах, і чи варто перемальовувати компонент через ці зміни. 1903 | 1904 | Під час роботи з React, компоненти можуть перемальовуватися під час зміни стану або пропсів. Однак, якщо компонент перемальовується занадто часто, це може негативно позначитися на продуктивності, оскільки кожне оновлення компонента вимагає виконання низки операцій, включно з генерацією віртуального DOM та оновленням реального DOM. 1905 | 1906 | Щоб уникнути надлишкових перемальовувань, React використовує механізми оптимізації, такі як "поверхневе порівняння" (shallow comparison) і "глибоке порівняння" (deep comparison). 1907 | 1908 | **1. Поверхневе порівняння (Shallow Comparison):** 1909 | 1910 | Під час поверхневого порівняння React порівнює значення пропсів і стани компонентів. Якщо значення не змінилися, React припускає, що компонент можна не перемальовувати. 1911 | 1912 | **2. Глибоке порівняння (Deep Comparison):** 1913 | 1914 | Глибоке порівняння використовується, коли дані являють собою складні структури, наприклад, вкладені об'єкти або масиви. У цьому випадку React перевіряє не тільки посилання на об'єкти, а й їхній вміст. 1915 | 1916 | Якщо будь-які вкладені дані змінилися, компонент буде перемальований. 1917 | 1918 | Однак глибоке порівняння може бути ресурсоємним, особливо для великих структур даних. Тому, у певних випадках, корисно використовувати методи оптимізації, як-от `React.memo` (у функціональних компонентах) або `shouldComponentUpdate` (у класових компонентах), щоб керувати поведінкою перемальовок на основі глибокого порівняння. 1919 | 1920 | [⬆ Повернутися до списку](#список-запитань) 1921 | 1922 | ### Як використовувати memoization для оптимізації компонентів? 1923 | 1924 | Memoization - це техніка оптимізації, яка дає змогу кешувати результати виконання функції та використовувати їх під час повторних викликів із тими самими аргументами. Це може бути корисно, коли компоненти вашого застосунку мають високу обчислювальну складність і часто викликаються з одними й тими самими вхідними даними. 1925 | 1926 | Для використання **memoization** ви можете використовувати різні підходи. Одним із поширених є використання бібліотеки memoizee для JavaScript. Вона надає декоратори, які можна застосовувати до функцій, щоб автоматично кешувати їхні результати. 1927 | 1928 | Ось приклад використання memoizee: 1929 | 1930 | ```jsx 1931 | const memoize = require("memoizee"); 1932 | 1933 | const expensiveFunction = (param) => { 1934 | // Деякі дорогі обчислення... 1935 | повернути result; 1936 | }; 1937 | 1938 | const memoizedFunction = memoize(expensiveFunction); 1939 | 1940 | // Тепер при повторних викликах з тими самими аргументами 1941 | // буде використовуватися кешований результат 1942 | 1943 | const result1 = memoizedFunction("param1"); 1944 | const result2 = memoizedFunction("param2"); 1945 | const result3 = memoizedFunction("param1"); // Буде використано кешований результат 1946 | 1947 | console.log(result1); 1948 | console.log(result2); 1949 | console.log(result3); 1950 | ``` 1951 | 1952 | Таким чином, завдяки **memoization** можна істотно знизити кількість повторних обчислень і поліпшити продуктивність компонентів. 1953 | 1954 | [⬆ Повернутися до списку](#список-запитань) 1955 | 1956 | ### Які патерни використання Redux ви знаєте? 1957 | 1958 | **Redux** - це популярна бібліотека для управління станом програми в JavaScript. Вона пропонує низку патернів використання, які допомагають організувати код і полегшити розробку. Ось деякі з них: 1959 | 1960 | **1) Action-Creator Pattern:** 1961 | Цей патерн полягає у створенні функцій-творців дій (action creators), які повертають об'єкти з інформацією про подію або запит до зміни стану. Наприклад, const increment = (amount) => { return { type: 'INCREMENT', payload: amount }; }. Це допомагає стандартизувати створення дій і зробити їх зручнішими для використання. 1962 | 1963 | **2) Reducer Pattern:** 1964 | У Redux редьюсери (reducers) використовуються для визначення, як змінюється стан застосунку під час отримання дій. Редьюсер - це чиста функція, яка приймає поточний стан і дію, і повертає новий стан. Паттерн пропонує розділити зміну стану на невеликі функції, кожна з яких відповідальна за зміну своєї частини стану. 1965 | 1966 | **3) Store Pattern:** 1967 | Центральним пунктом у Redux є сховище (store), яке містить увесь стан застосунку. Сховище дає змогу отримувати поточний стан, оновлювати його за допомогою дій і підписуватися на зміни стану для оновлення користувацького інтерфейсу. 1968 | 1969 | **4) Middleware Pattern:** 1970 | Redux надає можливість використовувати middleware - проміжні шари для обробки дій перед їхнім досягненням до редьюсерів. Це дає змогу виконати додаткові дії, як-от логування, опрацювання асинхронних запитів або зміна дій перед їхнім опрацюванням. Прикладами middleware у Redux є redux-thunk і redux-saga. 1971 | 1972 | **5) Container and Presentational Components Pattern:** 1973 | Цей патерн пропонує розділити компоненти на дві категорії: контейнерні компоненти (container components), які відповідають за під'єднання до сховища та передавання даних; та презентаційні компоненти (presentational components), які займаються лише візуалізацією та зворотним зв'язком із користувачем. Це покращує читабельність, перевикористовуваність і тестованість компонентів. 1974 | 1975 | Це лише деякі патерни, які можна використовувати з Redux. Кожен із них має свої переваги та може бути застосований залежно від вимог і складності вашого застосунку. 1976 | 1977 | [⬆ Повернутися до списку](#список-запитань) 1978 | 1979 | ### Як працює бібліотека React Router? 1980 | 1981 | React Router - це популярна бібліотека для керування маршрутизацією (навігацією) у додатках на основі React. Вона дає змогу створювати односторінкові додатки (SPA), де контент змінюється динамічно без повного перезавантаження сторінки. Ось як працює React Router: 1982 | 1983 | **1) Встановлення та налаштування:** 1984 | 1985 | Спочатку потрібно встановити React Router за допомогою пакетного менеджера, наприклад, npm або yarn. Після встановлення необхідно імпортувати компоненти з бібліотеки та налаштувати маршрути для застосунку. 1986 | 1987 | **2) Визначення маршрутів:** 1988 | 1989 | Ви визначаєте маршрути у вашому застосунку за допомогою компонентів, що надаються React Router, таких як: 1990 | 1991 | - BrowserRouter, 1992 | - Route, 1993 | - Switch 1994 | - Link. 1995 | 1996 | Компонент `BrowserRouter` обертає кореневий компонент додатка та забезпечує навігацію. 1997 | 1998 | **3) Компоненти маршрутизації:** 1999 | 2000 | Ви використовуєте компоненти `Route`, щоб пов'язати певні маршрути з відповідними компонентами. Наприклад, ви можете визначити маршрут "/about" і пов'язати його з компонентом `About`. 2001 | 2002 | **4) Навігація:** 2003 | 2004 | Для створення посилань між різними маршрутами ви використовуєте компонент `Link`. Він дозволяє створювати клікабельні посилання, які перемикаються між маршрутами без повного перезавантаження сторінки. 2005 | 2006 | **5) Перемикання між маршрутами:** 2007 | 2008 | Коли користувач переходить за посиланням або вводить URL, React Router визначає відповідний маршрут і рендерить відповідний компонент, пов'язаний із цим маршрутом. 2009 | 2010 | **6) Додаткові можливості:** 2011 | 2012 | React Router також надає додаткові функції, як-от параметри маршрутів, вкладені маршрути, захист маршрутів тощо. 2013 | 2014 | Загалом, React Router спрощує управління навігацією у вашому React-додатку, забезпечуючи плавні переходи між різними "сторінками" в межах однієї сторінки. 2015 | 2016 | [⬆ Повернутися до списку](#список-запитань) 2017 | 2018 | ### Що таке SSR (Server-Side Rendering) та як він відрізняється від CSR (Client-Side Rendering)? 2019 | 2020 | SSR (Server-Side Rendering) - це метод веб-розробки, за якого контент веб-сторінки генерується на сервері та потім відправляється браузеру як повністю сформована HTML-сторінка. Це дає змогу браузеру одразу ж відобразити контент, що позитивно впливає на SEO, індексацію та час завантаження сторінки для користувачів, особливо за повільного інтернет-з'єднання. 2021 | 2022 | #### У чому різниця між SSR і CSR? 2023 | 2024 | **CSR (Client-Side Rendering)** - це підхід, за якого вся логіка відображення контенту відбувається в браузері. Спочатку сервер відправляє мінімальний HTML і JavaScript, а потім браузер завантажує скрипти та запитує дані для відображення. Це може створювати більш інтерактивні користувацькі інтерфейси, але також може спричиняти повільне завантаження сторінки та проблеми з SEO. 2025 | 2026 | ##### Основні відмінності: 2027 | 2028 | 1. Завантаження сторінки: 2029 | 2030 | У SSR більша частина контенту вже є у вихідному HTML, тому сторінка швидше відображається. У CSR контент генерується браузером після завантаження скриптів, що може викликати повільне початкове завантаження. 2031 | 2032 | 2. SEO: 2033 | 2034 | SSR має перевагу для SEO, оскільки пошукові системи можуть легко проіндексувати контент на сторінці, оскільки він уже присутній у вихідному HTML. У CSR це вимагає додаткових зусиль для індексації. 2035 | 2036 | 3. Інтерактивність: 2037 | 2038 | CSR може надавати більш плавні переходи та інтерактивність, оскільки більша частина роботи відбувається на стороні клієнта. У SSR інтерактивність обмежена тим, що було попередньо згенеровано на сервері. 2039 | 2040 | Обидва підходи мають свої плюси та мінуси, і вибір між ними залежить від конкретних вимог проєкту та пріоритетів веб-розробників. 2041 | 2042 | [⬆ Повернутися до списку](#список-запитань) 2043 | 2044 | ### Як реалізувати асинхронне завантаження компонентів за допомогою React Router? 2045 | 2046 | Асинхронне завантаження компонентів, також відоме як "ледаче завантаження" (lazy loading), дає змогу завантажувати компоненти тільки тоді, коли вони справді потрібні, що може значно поліпшити продуктивність вашого застосунку. У React Router для цього використовується функція `React.lazy()` у поєднанні з динамічним імпортом і `Suspense`. Ось як це робиться: 2047 | 2048 | 1. Використання `React.lazy()`: 2049 | 2050 | Ви можете використовувати функцію `React.lazy()` для асинхронного завантаження компонентів. Ця функція приймає функцію, що повертає проміс, який дозволяється в модуль із компонентом. Наприклад: 2051 | 2052 | ```jsx 2053 | const MyComponent = React.lazy(() => import("./MyComponent")); 2054 | ``` 2055 | 2056 | 2. Додавання `Suspense`: 2057 | 2058 | Коли ви використовуєте асинхронне завантаження, ви також маєте використати компонент `Suspense`, який очікуватиме завантаження асинхронних компонентів. Загорніть точку входу вашого додатка (зазвичай навколо компонента ``) у `` та вкажіть `fallback` - компонент, який відображатиметься під час завантаження: 2059 | 2060 | ```jsx 2061 | import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom"; 2062 | 2063 | const MyComponent = React.lazy(() => import("./MyComponent")); 2064 | 2065 | function App() { 2066 | return ( 2067 | 2068 |

2069 | 2079 | 2080 |

2081 | 2082 | Loading...

}> 2083 | 2084 | 2085 | {/* Рендер компонента для головної сторінки */} 2086 | 2087 | 2088 | 2089 | 2090 | 2091 | 2092 | ); 2093 | } 2094 | ``` 2095 | 2096 | Тепер, коли користувач перейде на маршрут `/lazy`, компонент `MyComponent` буде асинхронно завантажуватися тільки в момент його дійсного відображення на екрані. У цей час відобразиться `fallback` (у цьому випадку "Loading..."). 2097 | 2098 | Це дає змогу вашому застосунку ефективно використовувати ресурси, завантажуючи тільки ті компоненти, які дійсно потрібні користувачеві. 2099 | 2100 | [⬆ Повернутися до списку](#список-запитань) 2101 | 2102 | ### Які переваги дає використання Redux для управління станом застосунку? 2103 | 2104 | #### Основні переваги: 2105 | 2106 | 1. Централізоване сховище: 2107 | Redux надає єдине централізоване сховище для всього стану вашого застосунку. Це робить управління та відстеження стану більш прозорим і передбачуваним. 2108 | 2109 | 2. Передбачуваність: 2110 | Стан у Redux є незмінним, і його зміни відбуваються через чисті функції - редюсери. Це призводить до передбачуваної поведінки під час оновлення стану та легше виявляти помилки. 2111 | 2112 | 3. Спрощене управління станом: 2113 | Redux надає патерн управління станом Flux, який спрощує складні випадки управління станом, особливо у великих додатках. 2114 | 2115 | 4. Легкість відстеження змін: 2116 | Стан у Redux змінюється тільки через дії (actions), які явно описують, що відбулося в додатку. Це спрощує відстеження історії змін і налагодження. 2117 | 2118 | 5. Відокремлення стану від компонентів: 2119 | Redux дає змогу відокремити стан застосунку від компонентів, що покращує масштабованість і дає змогу повторно використовувати компоненти. 2120 | 2121 | 6. Легкість тестування: 2122 | Чисті функції редюсерів і передбачуваність змін стану роблять тестування Redux-логіки простішим і надійнішим. 2123 | 2124 | 7. Підтримка інструментів розробника: 2125 | Існують інструменти розробника, як-от Redux DevTools, які полегшують відстеження та запис змін стану в часі. 2126 | 2127 | 8. Розширюваність: 2128 | Redux має багату екосистему плагінів і засобів для поліпшення та розширення функціональності. 2129 | 2130 | 9. Сумісність із різними фреймворками: 2131 | Redux можна використовувати не тільки з React, а й з іншими фреймворками та бібліотеками. 2132 | 2133 | 10. Покращене управління асинхронними операціями: 2134 | За допомогою middleware, такого як Redux Thunk або Redux Saga, Redux спрощує управління асинхронними операціями, такими як запити до сервера. 2135 | 2136 | Хоча Redux може додати деяку складність у маленьких проєктах, у великих і складних додатках його патерн та інструменти можуть істотно поліпшити організацію, масштабованість та обслуговуваність коду. 2137 | 2138 | [⬆ Повернутися до списку](#список-запитань) 2139 | 2140 | ### Що таке Redux Thunk? 2141 | 2142 | **Redux Thunk** - це middleware (проміжне програмне забезпечення) для Redux, яке дає змогу обробляти асинхронні дії (actions) у Redux-додатку. У Redux асинхронні операції, такі як запити до сервера, зазвичай не можуть бути виконані безпосередньо всередині дій через синхронну природу редюсерів. Redux Thunk вирішує цю проблему, дозволяючи створювати дії, які є функціями замість об'єктів. 2143 | 2144 | #### Як це працює? 2145 | 2146 | Звичайна дія Redux являє собою об'єкт, наприклад: 2147 | 2148 | ```jsx 2149 | const action = { 2150 | type: "SOME_ACTION", 2151 | payload: someData, 2152 | }; 2153 | ``` 2154 | 2155 | З використанням Redux Thunk, дії стають функціями, які можуть виконувати асинхронні операції, і мають доступ до методу `dispatch` і поточного стану: 2156 | 2157 | ```jsx 2158 | const asyncAction = () => (dispatch, getState) => { 2159 | // Виконуємо асинхронні операції, наприклад, запит до сервера 2160 | fetch("https://api.example.com/data") 2161 | .then((response) => response.json()) 2162 | .then((data) => { 2163 | dispatch({ type: "FETCH_SUCCESS", payload: data }); 2164 | }) 2165 | .catch((error) => { 2166 | dispatch({ type: "FETCH_FAILURE", payload: error }); 2167 | }); 2168 | }; 2169 | ``` 2170 | 2171 | Тут `asyncAction` - це функція, яка, коли викликається, повертає функцію з двома аргументами: `dispatch` та `getState`. Усередині цієї функції можна виконувати асинхронні операції та викликати `dispatch` для надсилання відповідних дій у стор Redux. 2172 | 2173 | #### Переваги Redux Thunk: 2174 | 2175 | 1. Простота використання: 2176 | Redux Thunk дає змогу створювати асинхронні дії з легкістю, не вимагаючи переходу до складніших бібліотек управління побічними ефектами, таких як Redux Saga або Redux Observable. 2177 | 2178 | 2. Інтеграція з наявним кодом: 2179 | Redux Thunk добре інтегрується з наявним кодом Redux, тож ви можете поступово перекладати асинхронні операції на його використання без необхідності переписування всього коду. 2180 | 2181 | 3. Гнучкість: 2182 | Redux Thunk дає вам більшу гнучкість у тому, як ви керуєте асинхронними операціями у вашому додатку. 2183 | 2184 | [⬆ Повернутися до списку](#список-запитань) 2185 | 2186 | ### Як працює Redux Saga? 2187 | 2188 | Redux Saga - це бібліотека для управління побічними ефектами в Redux-додатках. Вона надає альтернативний спосіб опрацювання асинхронних операцій, таких як запити до сервера, опрацювання подій та інші побічні ефекти. Ось як працює Redux Saga: 2189 | 2190 | 1. Генератори: 2191 | Redux Saga використовує генератори, спеціальний тип функцій JavaScript, що дає змогу зупинити виконання функції, а потім відновити його. Генератори часто використовуються для представлення асинхронних операцій як послідовності кроків. 2192 | 2193 | 2. Ефекти: 2194 | У Redux Saga операції, які представляють побічні ефекти, називаються "ефектами". Ефекти - це об'єкти, які описують, як Redux Saga має обробити побічні ефекти. Наприклад, `call` для виклику функцій, `put` для надсилання дій, `take` для очікування дій тощо. 2195 | 2196 | 3. Саги: 2197 | Саги - це спеціальні генератори, які описують послідовність кроків для обробки певного типу побічних ефектів. Саги стежать за певними діями і, коли такі дії відбуваються, вони запускають відповідні генератори. 2198 | 2199 | 4. Middleware: 2200 | Redux Saga підключається до Redux через middleware. Це означає, що саги працюють паралельно зі звичайними діями та редюсерами Redux, обробляючи побічні ефекти. 2201 | 2202 | 5. Асинхронні операції: 2203 | Redux Saga обробляє асинхронні операції, як-от запити до сервера, створюючи саги, які слухають певні дії, запускають генератори для оброблення цих дій і взаємодіють з ефектами, як-от `call` і `put`, щоб керувати асинхронними операціями. 2204 | 2205 | 6. Скасування операцій: 2206 | Однією з переваг Redux Saga є можливість легко скасовувати та контролювати асинхронні операції, використовуючи такі концепції як `takeLatest`, `takeEvery` тощо. 2207 | 2208 | 7. Тестування: 2209 | Redux Saga має хорошу підтримку для тестування завдяки тому, що кожен етап саги може бути явно керований. 2210 | 2211 | Redux Saga надає складніший, але потужніший підхід до управління побічними ефектами, що робить код більш структурованим і легшим для тестування. 2212 | 2213 | [⬆ Повернутися до списку](#список-запитань) 2214 | 2215 | ### Як реалізувати ледаче завантаження Redux-редьюсерів? 2216 | 2217 | Ледаче завантаження Redux-редьюсерів може бути корисним, коли у вас є великий Redux-додаток із безліччю редьюсерів, і ви хочете оптимізувати початкове завантаження програми. Redux дозволяє динамічно додавати редьюсери до сховища за допомогою методу `store.replaceReducer()`. 2218 | 2219 | Ось як можна реалізувати ледаче завантаження Redux-редьюсерів: 2220 | 2221 | 1. Розділіть редьюсери за модулями: 2222 | Замість того щоб мати один великий файл із редьюсерами, розділіть їх на модулі відповідно до функціональності або розділів програми. 2223 | 2224 | 2. Використовуйте `combineReducers` для кожного модуля: 2225 | У кожному модулі створіть свій власний набір редьюсерів за допомогою функції `combineReducers` з Redux. 2226 | 2227 | 3. Створіть функцію для ледачого завантаження: 2228 | Для кожного модуля створіть функцію, яка повертатиме проміс, що дозволяє `combineReducers` для цього модуля. Це можна зробити за допомогою динамічного імпорту. 2229 | 2230 | Приклад: 2231 | 2232 | ```jsx 2233 | // Модуль "counter" 2234 | export const loadCounterReducers = () => 2235 | import("./counter/reducers").then((module) => module.default); 2236 | 2237 | // Модуль "user" 2238 | export const loadUserReducers = () => 2239 | import("./user/reducers").then((module) => module.default); 2240 | ``` 2241 | 2242 | 4. Динамічно підключіть редьюсери: 2243 | У точці входу вашого застосунку (зазвичай у файлі, де ви створюєте сховище Redux), ви можете динамічно підключати редьюсери, використовуючи функції для ледачого завантаження та метод `store.replaceReducer()`: 2244 | 2245 | ```jsx 2246 | import { createStore } з "redux"; 2247 | import { loadCounterReducers, loadUserReducers } from "./lazyReducers"; 2248 | 2249 | const rootReducer = combineReducers({ 2250 | // Ваші початкові редюсери 2251 | }); 2252 | 2253 | const store = createStore(rootReducer); 2254 | 2255 | // Завантажуємо редьюсери по мірі необхідності 2256 | loadCounterReducers().then((counterReducers) => { 2257 | store.replaceReducer( 2258 | combineReducers({ 2259 | ...rootReducer, 2260 | ...counterReducers, 2261 | }) 2262 | ); 2263 | }); 2264 | 2265 | loadUserReducers().then((userReducers) => { 2266 | store.replaceReducer( 2267 | combineReducers({ 2268 | ...rootReducer, 2269 | ...userReducers, 2270 | }) 2271 | ); 2272 | }); 2273 | ``` 2274 | 2275 | Зверніть увагу, що цей підхід може додати складності в управлінні станом і вимагає ретельного тестування. У великих додатках він може допомогти оптимізувати початкове завантаження та поліпшити продуктивність. 2276 | 2277 | [⬆ Повернутися до списку](#список-запитань) 2278 | 2279 | ### Що таке "нормалізація стану" (state normalization) у контексті керування станом програми? 2280 | 2281 | Нормалізація стану (state normalization) - це патерн управління станом, який використовується для організації даних у сховищі таким чином, щоб забезпечити ефективне зберігання, оновлення та доступ до даних у Redux або інших системах управління станом. 2282 | 2283 | Основна ідея нормалізації полягає в тому, щоб зберігати дані в нормалізованій формі, де кожен тип даних зберігається в окремій колекції (таблиці), і використовуються посилання між різними колекціями для усунення дублювання даних і полегшення оновлення. 2284 | 2285 | Приклад: Припустимо, у нас є список постів і список коментарів до цих постів. Замість зберігання коментарів усередині кожного поста (що може призвести до дублювання даних), ми можемо створити дві колекції: "пости" і "коментарі", і використовувати ідентифікатори постів у коментарях для встановлення зв'язку між ними. 2286 | 2287 | #### Переваги нормалізації стану: 2288 | 2289 | **1) Економія місця:** 2290 | Дублювання даних зменшується, оскільки одні й ті самі дані не зберігаються в декількох місцях. 2291 | 2292 | **2) Легкість оновлення:** 2293 | Зміна даних в одній колекції автоматично відображається в інших, де ці дані використовуються. 2294 | 2295 | **3) Швидкий доступ:** 2296 | Пошук, фільтрація та доступ до даних прискорюються, оскільки дані розділені на більш дрібні колекції. 2297 | 2298 | **4) Прозорість:** 2299 | Структуру сховища стає легше зрозуміти та відстежити. 2300 | 2301 | У той час як нормалізація може допомогти в оптимізації та управлінні станом, вона також додає складності в логіку оновлення даних і може вимагати додаткової роботи при виборі даних для відображення в компонентах. Вам варто вибрати підхід залежно від розміру та складності вашого застосунку. 2302 | 2303 | [⬆ Повернутися до списку](#список-запитань) 2304 | 2305 | ### Як створити анімований перехід між сторінками за допомогою React Router? 2306 | 2307 | Для створення анімованих переходів між сторінками з використанням React Router ви можете використовувати такий підхід: 2308 | 2309 | 1. Використовуйте CSS-анімації: 2310 | Найпростіший спосіб додати анімацію - це використовувати CSS-анімації. Ви можете визначити анімацію для елементів, які з'являються або зникають під час переходу між сторінками. 2311 | 2312 | 2. Використовуйте бібліотеки анімацій: 2313 | Існує безліч бібліотек анімацій, таких як `react-transition-group`, які спрощують створення анімацій переходів. Вони дають змогу вам вказати, які елементи мають анімуватися під час монтування та розмонтування. 2314 | 2315 | Приклад використання `react-transition-group`: 2316 | 2317 | ```jsx 2318 | import { CSSTransition } from "react-transition-group"; 2319 | import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom"; 2320 | import "./styles.css"; 2321 | 2322 | function App() { 2323 | return ( 2324 | 2325 |

2326 | 2336 | 2337 |

2338 | 2339 | 2340 | 2341 | 2342 | 2343 | 2344 | 2345 | 2346 | 2347 |

2348 | 2349 | ); 2350 | } 2351 | 2352 | function Home() { 2353 | return ( 2354 | 2355 |

Home Page

2356 | 2357 | ); 2358 | } 2359 | 2360 | function About() { 2361 | return ( 2362 | 2363 |

About Page

2364 | 2365 | ); 2366 | } 2367 | ``` 2368 | 2369 | 3. Користувацькі анімації: 2370 | Якщо вам потрібна складніша анімація, ви можете створити свої власні анімації за допомогою бібліотек для анімацій, таких як `framer-motion` або `react-spring`. 2371 | 2372 | Не забудьте налаштувати відповідні стилі та класи для анімацій у вашому CSS. 2373 | 2374 | [⬆ Повернутися до списку](#список-запитань) 2375 | 2376 | ### Як працюють CSS-модулі (CSS Modules) у React? 2377 | 2378 | CSS-модулі є підходом до організації стилів у додатку React, який допомагає ізолювати стилі компонентів та уникнути конфліктів імен класів. Ось як це працює: 2379 | 2380 | **1) Створення модулів стилів:** 2381 | Для кожного компонента створюється файл із розширенням `.module.css` або аналогічне за допомогою препроцесорів. Наприклад, `Button.module.css`. У цьому файлі визначаються стилі як зазвичай, але імена класів перетворюються в унікальні імена. 2382 | 2383 | **2) Використання стилів:** 2384 | У компоненті React ви можете імпортувати стилі з модуля, як звичайний об'єкт. Наприклад: 2385 | 2386 | ```jsx 2387 | import React from "react"; 2388 | import styles from "./Button.module.css"; 2389 | 2390 | const Button = () => { 2391 | return ; 2392 | }; 2393 | 2394 | export default Button; 2395 | ``` 2396 | 2397 | Тут `styles.button` - це унікальне ім'я класу з модуля стилів. 2398 | 2399 | **3) Автоматична локалізація імен класів:** 2400 | Під час складання проєкту інструмент CSS-модулів автоматично генерує унікальні імена класів для кожного компонента. Це запобігає перетину стилів між різними компонентами. 2401 | 2402 | **4) Локальні стилі:** 2403 | Стилі, визначені всередині модуля, обмежені областю видимості цього модуля. Вони не перетинаються з іншими стилями навіть у тому самому файлі. 2404 | 2405 | **5) Підтримка CSS імен:** 2406 | Ви можете використовувати зрозумілі імена класів у ваших стилях, оскільки імена класів із модулів не конфліктуватимуть із глобальними іменами. 2407 | 2408 | **6) Додаткові можливості:** 2409 | Деякі інструменти надають додаткові можливості, такі як успадкування стилів, глобальні стилі тощо, щоб полегшити управління стилями. 2410 | 2411 | Використання CSS-модулів робить структуру стилів чіткішою та впорядкованішою, знижуючи ймовірність помилок і полегшуючи спільну розробку. 2412 | 2413 | [⬆ Повернутися до списку](#список-запитань) 2414 | 2415 | ### Що таке Styled Components, та як воно використовується? 2416 | 2417 | Styled Components - це бібліотека для стилізації компонентів у React. Вона надає можливість визначати стилі безпосередньо всередині компонентів з використанням синтаксису шаблонних рядків (template literals). Це дає змогу створювати компоненти, які містять як логіку, так і стилі, роблячи код більш читабельним і підтримуваним. 2418 | 2419 | #### Ось як працює Styled Components: 2420 | 2421 | 1. Встановлення та імпорт: 2422 | Почніть зі встановлення Styled Components через npm або yarn. Після встановлення ви можете імпортувати функції та компоненти з бібліотеки у свій проєкт. 2423 | 2424 | 2. Створення стилізованих компонентів: 2425 | Для створення стилізованих компонентів використовуйте функції зі Styled Components. 2426 | 2427 | Наприклад: 2428 | 2429 | ```jsx 2430 | import styled from "styled-components"; 2431 | 2432 | const Button = styled.button` 2433 | background-color: #070707; 2434 | color: white; 2435 | border: none; 2436 | padding: 15px 25px; 2437 | cursor: pointer; 2438 | `; 2439 | ``` 2440 | 2441 | Тут `styled.button` створює компонент ` 2454 | 2455 | ); 2456 | }; 2457 | 2458 | export default App; 2459 | ``` 2460 | 2461 | 4. Передача пропсів: 2462 | Ви також можете передавати пропси в стилізовані компоненти та використовувати їх усередині рядків шаблону: 2463 | 2464 | ```jsx 2465 | const Button = styled.button` 2466 | background-color: ${(props) => (props.primary ? "#000000" : "#777777")}; 2467 | color: white; 2468 | border: none; 2469 | padding: 10px 20px; 2470 | cursor: pointer; 2471 | `; 2472 | ``` 2473 | 2474 | 5. Глобальні стилі: 2475 | Ви можете використовувати `createGlobalStyle` зі Styled Components для визначення глобальних стилів, які будуть застосовуватися до всього додатка. 2476 | 2477 | Styled Components спрощує структурування та управління стилями у вашому проєкті, даючи змогу створювати компоненти, що включають у себе стилі та поведінку. Вона також забезпечує підтримку динамічних стилів і пропсів, що робить стилізацію компонентів більш гнучкою. 2478 | 2479 | [⬆ Повернутися до списку](#список-запитань) 2480 | 2481 | ### Як передати дані з сервера на клієнт під час використання SSR у React? 2482 | 2483 | Під час використання SSR (Server-Side Rendering) у React, дані можуть бути попередньо завантажені на сервері та передані клієнту для ініціалізації стану програми. Ось як це робиться: 2484 | 2485 | 1. Підготуйте сервер: 2486 | Ваш сервер повинен мати можливість обробляти запити на серверний рендеринг та отримання даних. Для цього ви можете використовувати бібліотеки типу Express.js, Next.js або інші. 2487 | 2488 | 2. Завантажте дані на сервері: 2489 | Під час обробки запиту на сервері ви можете завантажити дані з вашого API або іншого джерела даних. Ці дані будуть використані для ініціалізації стану на клієнті. 2490 | 2491 | 3. Передайте дані клієнту: 2492 | Найпоширеніший спосіб передавання даних із сервера на клієнт - це вбудовування даних у HTML, що надсилається клієнту. Наприклад, ви можете використовувати `window.INITIAL_STATE` або якусь іншу глобальну змінну на клієнті, щоб зберегти дані. 2493 | 2494 | 4. Використовуйте дані на клієнті: 2495 | Коли клієнтський код почне виконуватися, він може витягти передані дані з глобальної змінної та використати їх для ініціалізації стану програми. 2496 | 2497 | Пример на Express.js: 2498 | 2499 | ```jsx 2500 | import express from "express"; 2501 | import React from "react"; 2502 | import { renderToString } from "react-dom/server"; 2503 | import App from "./App"; // Ваш компонент React 2504 | import fetchInitialData from "./fetchInitialData"; // Функція для завантаження даних 2505 | 2506 | const app = express(); 2507 | 2508 | app.get("/", async (req, res) => { 2509 | try { 2510 | const initialData = await fetchInitialData(); // Завантаження даних із сервера 2511 | const appMarkup = renderToString(); 2512 | const html = ` 2513 | 2514 | 2515 | SSR React App 2516 | 2517 | 2518 |

${appMarkup}

2519 | 2522 | 2523 | 2524 | 2525 | `; 2526 | res.send(html); 2527 | } catch (error) { 2528 | console.error("Error during server rendering:", error); 2529 | 2530 | res.status(500).send("Internal Server Error"); 2531 | } 2532 | }); 2533 | 2534 | app.listen(3000, () => { 2535 | console.log("Server is listening on port 3000"); 2536 | }); 2537 | ``` 2538 | 2539 | На клієнті ви можете використовувати `window.__INITIAL_DATA__` для ініціалізації стану вашої програми переданими даними. 2540 | 2541 | Не забудьте обробити помилки та подбати про безпеку під час передачі даних із сервера на клієнт. 2542 | 2543 | [⬆ Повернутися до списку](#список-запитань) 2544 | 2545 | ### Які переваги та недоліки мають функціональні компоненти порівняно з компонентами класів? 2546 | 2547 | Функціональні компоненти мають кілька переваг перед компонентами класів: 2548 | 2549 | 1. Простота та читабельність коду: 2550 | Функціональні компоненти зазвичай записуються у вигляді звичайних функцій, що робить їхній код більш лаконічним і зрозумілим. Вони не вимагають успадкування та конструкторів, як класи. 2551 | 2552 | 2. Легше піддаються оптимізації: 2553 | Функціональні компоненти дають змогу використовувати певні оптимізації, як-от мемоїзація, що може поліпшити продуктивність під час рендерингу. 2554 | 2555 | 3. Підтримка хуків (hooks): 2556 | Функціональні компоненти можуть використовувати хуки, які надають зручніший спосіб керування станом і побічними ефектами. 2557 | 2558 | 4. Легше тестування: 2559 | Функціональні компоненти можуть бути простішими для тестування завдяки своїй структурі та відсутності стану класів. 2560 | 2561 | 5. Тенденція розвитку: 2562 | Більшість нових функцій і поліпшень у бібліотеках React та інших бібліотеках для інтерфейсів надаються спочатку для функціональних компонентів. 2563 | 2564 | Однак у функціональних компонентів також є деякі недоліки: 2565 | 2566 | 1. Відсутність інкапсуляції: 2567 | На відміну від класів, функціональні компоненти не можуть використовувати приватні методи або властивості без використання хуків або інших механізмів. 2568 | 2569 | 2. Складні стани: 2570 | За наявності складних станів і складної логіки функціональні компоненти можуть стати заплутаними, особливо без правильного використання хуків. 2571 | 2572 | 3. Менша сумісність із деякими бібліотеками: 2573 | Деякі сторонні бібліотеки та інструменти можуть передбачати використання класів і не завжди добре сумісні з функціональними компонентами. 2574 | 2575 | 4. Великі проекти: 2576 | У великих проектах може бути складно підтримувати структуру функціональних компонентів без суворої організації коду. 2577 | 2578 | Загалом, вибір між функціональними компонентами та компонентами класів залежить від конкретних вимог проєкту, структури команди розробників та особистих уподобань. 2579 | 2580 | [⬆ Повернутися до списку](#список-запитань) 2581 | 2582 | ### Які особливості мають хуки `useEffect` та `useLayoutEffect`? 2583 | 2584 | `useEffect` та `useLayoutEffect` - це два хуки в React, які дають змогу виконувати побічні ефекти у функціональних компонентах. Однак у них є деякі відмінності: 2585 | 2586 | #### Час виконання: 2587 | 2588 | `useEffect`: Цей хук виконує побічні ефекти після того, як браузер оновив екран (після того, як відбулося візуалізацію, і компонент відобразився на екрані). Він не блокує браузер і виконується асинхронно. 2589 | 2590 | `useLayoutEffect`: Цей хук виконує побічні ефекти синхронно, одразу після завершення рендерингу компонента та перед відображенням змін на екрані. Він блокує браузер доти, доки всі ефекти не будуть виконані. 2591 | 2592 | #### Використання: 2593 | 2594 | Обидва хуки використовуються для виконання побічних ефектів, як-от надсилання мережевих запитів, підписка на події або зміна DOM. 2595 | 2596 | Різниця полягає в тому, що якщо вам потрібно виконати дії, що залежать від макета (layout) до того, як користувач побачить оновлений інтерфейс, ви можете використовувати `useLayoutEffect`. 2597 | 2598 | #### Рекомендації: 2599 | 2600 | У більшості випадків краще використовувати `useEffect`, оскільки він не блокує браузер і зазвичай досить ефективний для більшості сценаріїв. 2601 | 2602 | `useLayoutEffect` варто використовувати тоді, коли вам справді потрібно виконати побічні ефекти синхронно після рендерингу компонента. 2603 | 2604 | Вибір між `useEffect` та `useLayoutEffect` залежить від конкретних вимог вашого додатка та часу, в який ви хочете, щоб ефекти виконалися. 2605 | 2606 | [⬆ Повернутися до списку](#список-запитань) 2607 | 2608 | ### Як оновити стан компонента після виконання асинхронної операції? 2609 | 2610 | Для оновлення стану компонента після виконання асинхронної операції в React, ви можете використовувати хук `useState` у поєднанні з хуком `useEffect`. Ось як це можна зробити: 2611 | 2612 | #### 1) Імпортуйте необхідні хуки: 2613 | 2614 | ```jsx 2615 | import React, { useState, useEffect } from "react"; 2616 | ``` 2617 | 2618 | #### 2) Визначте компонент і його стан: 2619 | 2620 | ```jsx 2621 | function MyComponent() { 2622 | const [data, setData] = useState(null); 2623 | 2624 | useEffect(() => { 2625 | // Виконання асинхронної операції (наприклад, запит на сервер) 2626 | fetchData().then((result) => { 2627 | // Після виконання асинхронної операції оновіть стан 2628 | setData(result); 2629 | }); 2630 | }, []); // Порожній масив залежностей означає, що ефект виконається тільки один раз при монтуванні компонента 2631 | 2632 | return

{data ?

Дані: {data}

Завантаження даних...

}

; 2633 | } 2634 | ``` 2635 | 2636 | #### 3) Зверніть увагу на залежність масиву в `useEffect`: 2637 | 2638 | У прикладі вище ми передали порожній масив залежностей (`[]`) в `useEffect`. Це означає, що ефект буде виконано тільки один раз під час монтування компонента. Якщо ви хочете, щоб ефект виконався при зміні певних значень, додайте їх у масив залежностей. Наприклад: 2639 | 2640 | ```jsx 2641 | useEffect(() => { 2642 | // Виконання асинхронної операції, що залежить від якихось значень 2643 | fetchData(someValue).then((result) => { 2644 | // Оновлення стану 2645 | setData(result); 2646 | }); 2647 | }, [someValue]); // Залежність від someValue 2648 | ``` 2649 | 2650 | Таким чином, після виконання асинхронної операції, коли дані доступні, стан компонента буде оновлено за допомогою функції `setData`, що призведе до перемальовування компонента з новими даними. 2651 | 2652 | [⬆ Повернутися до списку](#список-запитань) 2653 | 2654 | ### Що таке CSS-in-JS, та які бібліотеки ви знаєте для реалізації цієї концепції в React? 2655 | 2656 | **CSS-in-JS** - це підхід до стилізації веб-додатків, за якого стилі написані безпосередньо всередині компонентів на JavaScript. Це дає змогу пов'язати стилі з конкретними компонентами та створити більш модульний і передбачуваний код. Підхід CSS-in-JS активно використовується в екосистемі React, хоча концепція також може бути застосована та в інших фреймворках. 2657 | 2658 | Нижче наведено деякі популярні бібліотеки для реалізації CSS-in-JS у React: 2659 | 2660 | **1. Styled Components:** 2661 | Це одна з найпопулярніших бібліотек для CSS-in-JS. Вона дає змогу створювати компоненти, які містять у собі та стилі, і легко маніпулювати стилями за допомогою JavaScript. 2662 | 2663 | **2. Emotion:** 2664 | Це потужна бібліотека для стилізації компонентів у React. Emotion надає різноманітні функції для створення стилів, включно з підтримкою глобальних стилів і медіа-запитів. 2665 | 2666 | **3. Styled System:** 2667 | Це бібліотека, яка надає систему для створення дизайн-систем, заснованих на темах, які скористалися підходом CSS-in-JS. 2668 | 2669 | **4. Radium:** 2670 | Ця бібліотека додає підтримку інлайн-стилів і псевдокласів у React. Вона також забезпечує автоматичну обробку префіксів і медіа-запитів. 2671 | 2672 | **5. Glamorous:** 2673 | Це бібліотека, заснована на Styled Components, що надає зручний і декларативний спосіб створення стилів у компонентах. 2674 | 2675 | **6. Fela:** 2676 | Це бібліотека з акцентом на продуктивність. Вона використовує функціональний підхід для визначення стилів. 2677 | 2678 | **7. Linaria:** 2679 | Це інструмент, який дає змогу писати CSS усередині компонентів, але потім під час складання переносить їх в окремі CSS-правила для ефективнішого завантаження. 2680 | 2681 | **8. Theme UI:** 2682 | Ця бібліотека, заснована на Emotion і Styled System, надає простий спосіб створення темізаціі та стилів у React-додатках. 2683 | 2684 | Вибір бібліотеки залежить від ваших уподобань, вимог проекту та структури команди розробників. Кожна з цих бібліотек має свої унікальні особливості та переваги. 2685 | 2686 | [⬆ Повернутися до списку](#список-запитань) 2687 | 2688 | ### Як реалізувати drag-and-drop функціональність у React-додатку? 2689 | 2690 | Реалізація функціональності перетягування (drag-and-drop) у React-додатку може бути досягнута з використанням стандартних подій миші та стану компонентів React. Ось базовий підхід до створення такої функціональності: 2691 | 2692 | 1. Створення компонентів для перетягуваних і цільових елементів: 2693 | Спочатку створіть компоненти для елементів, які ви хочете переміщати (елементи, що перетягуються) та елементів, на які ви хочете перетягнути (цільові області). 2694 | 2695 | 2. Керування станом: 2696 | Додайте стан у компоненти, щоб відстежувати, перетягується в даний момент елемент чи ні. Наприклад, ви можете використовувати `useState` для цього. 2697 | 2698 | 3. Обробка подій: 2699 | У компонентах елементів, що перетягуються, додайте обробники подій `onDragStart`, `onDrag`, та `onDragEnd`: 2700 | 2701 | ```jsx 2702 |

handleDragStart(e, item)} 2705 | onDrag={(e) => handleDrag(e)} 2706 | onDragEnd={(e) => handleDragEnd(e)} 2707 | > 2708 | {/* Вміст елемента, що перетягується */} 2709 |

2710 | ``` 2711 | 2712 | 4. Реалізація функцій обробників: 2713 | Створіть функції обробники для подій перетягування. У них ви будете оновлювати стан компонентів і маніпулювати даними про перетягуваний елемент. 2714 | 2715 | 5. Визначення областей для перетягування: 2716 | У цільових компонентах визначте зони, на які можна кинути перетягуваний елемент. Додайте обробники подій `onDragOver` та `onDrop`: 2717 | 2718 | ```jsx 2719 |

handleDragOver(e)} 2721 | onDrop={(e) => handleDrop(e, target)} 2722 | > 2723 | {/* Вміст цільової області */} 2724 |

2725 | ``` 2726 | 2727 | 6. Реалізація обробників для областей перетягування: 2728 | Аналогічно створіть функції-обробники для подій `onDragOver` та `onDrop`, де ви запобігатимете стандартній поведінці браузера та оновлюватимете стан компонентів відповідно до дій користувача. 2729 | 2730 | 7. Оновлення стану: 2731 | У функціях обробниках оновлюйте стан компонентів так, щоб відображати поточний стан перетягування. 2732 | 2733 | 8. Рендеринг компонентів: 2734 | Не забудьте рендерити ваші компоненти в компоненті верхнього рівня, щоб створити інтерфейс перетягування. 2735 | 2736 | Наведений вище підхід представляє базову концепцію реалізації drag-and-drop в React. У складніших випадках, наприклад, за необхідності підтримки перетягування між різними компонентами або списками, можливо, знадобиться використовувати додаткові бібліотеки або заглибитися в складніші патерни. 2737 | 2738 | [⬆ Повернутися до списку](#список-запитань) 2739 | 2740 | ### Як реалізувати аутентифікацію та авторизацію в React-додатку? 2741 | 2742 | Аутентифікація та авторизація - це важливі аспекти безпеки веб-додатків. Аутентифікація передбачає перевірку особистості користувача, тоді як авторизація керує доступом користувача до певних ресурсів або дій. Ось як це можна реалізувати в React-додатку: 2743 | 2744 | #### 1) Аутентифікація: 2745 | 2746 | Аутентифікація зазвичай включає в себе перевірку автентичності користувача, наприклад, з використанням пари логін-пароль або токена. 2747 | 2748 | - Локальна автентифікація: 2749 | Ви можете використовувати бібліотеки для управління автентифікацією, такі як `bcrypt` для хешування паролів. У разі успішної автентифікації створіть токен сесії або JWT (JSON Web Token), який буде використовуватися для подальших запитів. 2750 | 2751 | - Сторонні сервіси: 2752 | Для автентифікації через сторонні сервіси, як-от Google або Facebook, використовуйте бібліотеки, що надаються цими сервісами, щоб отримати токени доступу. 2753 | 2754 | #### 2) Авторизація: 2755 | 2756 | Авторизація визначає, які ресурси та дії доступні авторизованим користувачам. 2757 | 2758 | - Роль і права: 2759 | Створіть систему ролей і прав доступу для розмежування доступу. Це може бути реалізовано у вигляді бази даних з ролями та правами, пов'язаними з користувачами. 2760 | 2761 | #### 3) Зберігання стану: 2762 | 2763 | Для управління станом аутентифікації та авторизації, використовуйте **Context API** або бібліотеки управління станом, такі як **Redux**. Стан має містити інформацію про поточного користувача, його ролі та права, а також токена аутентифікації. 2764 | 2765 | #### 4) Захист маршрутів: 2766 | 2767 | Залежно від авторизації, ви можете захистити певні маршрути у вашому застосунку. Це можна зробити за допомогою високорівневих компонентів, що обгортають маршрути, які перевіряють наявність і відповідність прав доступу. 2768 | 2769 | #### 5) Обробка запитів: 2770 | 2771 | Під час виконання запитів до вашого сервера, включайте токен аутентифікації в заголовок `Authorization`, щоб сервер міг перевірити легітимність запиту. 2772 | 2773 | #### 6) Розлогінювання: 2774 | 2775 | Створіть механізм розлогінювання, який видалятиме дані автентифікації зі стану застосунку і, можливо, видалятиме токен із клієнтського сховища. 2776 | 2777 | #### 7) Обробка помилок: 2778 | 2779 | Під час реалізації аутентифікації та авторизації обов'язково передбачте обробку помилок, таких як недійсні токени або відсутність доступу. 2780 | 2781 | #### 8) Безпека: 2782 | 2783 | Обов'язково стежте за безпекою, зберігаючи токени в безпечних місцях (наприклад, HttpOnly cookies для токенів сесій) і забезпечуючи захищене з'єднання (HTTPS). 2784 | 2785 | Це лише базовий огляд процесу реалізації аутентифікації та авторизації в React-додатку. Важливо також враховувати специфікації та рекомендації для безпеки у вашому контексті. 2786 | 2787 | [⬆ Повернутися до списку](#список-запитань) 2788 | 2789 | ### Як працює маршрутизація на стороні клієнта в React? 2790 | 2791 | Маршрутизація на стороні клієнта в React дає змогу створювати односторінкові додатки (SPA), де вміст змінюється без повного перезавантаження сторінки. Для цього використовується бібліотека маршрутизації, наприклад, `react-router`. Ось як це працює: 2792 | 2793 | #### 1) Встановлення та налаштування react-router: 2794 | 2795 | Спочатку встановіть `react-router-dom` за допомогою npm або yarn: 2796 | 2797 | ``` 2798 | npm install react-router-dom 2799 | ``` 2800 | 2801 | Потім ви можете налаштувати маршрути у вашому застосунку. 2802 | 2803 | #### 2) Визначення маршрутів: 2804 | 2805 | У вашому компоненті, що відповідає за маршрутизацію, визначте маршрути за допомогою компонента `Route`. Кожен `Route` може мати шлях і відповідний компонент, який буде відображатися при збігу маршруту. 2806 | 2807 | ```jsx 2808 | import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; 2809 | 2810 | function App() { 2811 | return ( 2812 | 2813 | 2814 | 2815 | 2816 | 2817 | 2818 | 2819 | ); 2820 | } 2821 | ``` 2822 | 2823 | #### 3) Створення навігації: 2824 | 2825 | Для переходу між різними маршрутами використовуйте компонент `Link` або `NavLink`. Ці компоненти створюють посилання, які оновлюють URL, але не виконують повне перезавантаження сторінки. 2826 | 2827 | ```jsx 2828 | import { Link } from "react-router-dom"; 2829 | 2830 | function Navigation() { 2831 | return ( 2832 | 2845 | ); 2846 | } 2847 | ``` 2848 | 2849 | #### 4) Динамічні параметри маршрутів: 2850 | 2851 | Ви можете використовувати динамічні параметри в маршрутах, щоб обробляти різні значення в URL. 2852 | 2853 | ```jsx 2854 | 2855 | ``` 2856 | 2857 | У цьому прикладі, під час переходу на `/user/123`, компонент `UserProfile` відображатиметься з параметром `id`, що дорівнює `123`. 2858 | 2859 | #### 5) Вкладені маршрути: 2860 | 2861 | Маршрути можуть бути вкладеними, даючи змогу вам створювати складні структури маршрутизації для різних частин програми. 2862 | 2863 | #### 6) Обробка 404: 2864 | 2865 | Для відображення сторінки 404 (не знайдено), ви можете додати маршрут без вказівки path, який спрацьовуватиме в разі, якщо не знайдено збігів з іншими маршрутами. 2866 | 2867 | ```jsx 2868 | 2869 | ``` 2870 | 2871 | Маршрутизація на стороні клієнта за допомогою `react-router` дає змогу створювати динамічніші та зручніші для користувачів інтерфейси, де контент оновлюється без перезавантаження всієї сторінки. 2872 | 2873 | [⬆ Повернутися до списку](#список-запитань) 2874 | 2875 | ### Що таке «code splitting» (поділ коду) в React? 2876 | 2877 | «Code splitting» (поділ коду) - це техніка оптимізації, яка використовується в React (і не тільки), щоб розділити великий JavaScript-файл на менші фрагменти (чанки), які завантажуються на вимогу. Це дає змогу поліпшити продуктивність і швидкодію веб-додатків. 2878 | 2879 | У контексті React, поділ коду зазвичай відбувається під час створення збірки програми, і для цього використовується механізм динамічного імпорту. Замість того, щоб завантажувати весь JavaScript-код під час першого відкриття застосунку, ви можете розділити його на більш дрібні частини, які будуть завантажуватися тільки тоді, коли вони дійсно знадобляться. 2880 | 2881 | #### Переваги «code splitting» у React: 2882 | 2883 | 1. Поліпшення продуктивності: 2884 | Завантаження тільки необхідних частин коду прискорює початковий час завантаження програми та знижує обсяг переданих даних. 2885 | 2886 | 2. Оптимізація: 2887 | Користувачі можуть завантажити тільки ті частини додатка, які їм необхідні, зменшуючи зайве навантаження на мережу та процесор. 2888 | 2889 | 3. Поділ сторінок: 2890 | Кожна сторінка або компонент може бути розділена на окремі чанки, що дає змогу ефективніше використовувати ресурси. 2891 | 2892 | 4. Паралельне завантаження: 2893 | Браузер може одночасно завантажувати кілька чанків, покращуючи загальний час завантаження. 2894 | 2895 | Приклад динамічного імпорту з використанням «code splitting»: 2896 | 2897 | ```jsx 2898 | import React, { lazy, Suspense } from "react"; 2899 | 2900 | const DynamicComponent = lazy(() => import("./DynamicComponent")); 2901 | 2902 | function App() { 2903 | return ( 2904 |

2905 | Loading...

}> 2906 | 2907 | 2908 | 2909 | ); 2910 | } 2911 | ``` 2912 | 2913 | У цьому прикладі, компонент `DynamicComponent` буде завантажуватися асинхронно тільки тоді, коли він дійсно потрібен. 2914 | 2915 | [⬆ Повернутися до списку](#список-запитань) 2916 | 2917 | ### Як керувати станом між компонентами, що не мають близького зв'язку? 2918 | 2919 | Існує кілька методів для управління станом між компонентами, які не мають прямого зв'язку. Ось деякі з них: 2920 | 2921 | #### 1) Підняття стану (Lifting State Up): 2922 | 2923 | Ви можете підняти стан до найближчого спільного батьківського компонента, який має доступ і до одного, і до іншого компонента. Потім передавайте цей стан як пропси в кожен компонент. Цей підхід особливо корисний, коли компоненти мають спільний батьківський компонент, але не мають прямого зв'язку один з одним. 2924 | 2925 | #### 2) Контекст (Context API): 2926 | 2927 | Використовуйте Context API, який дає змогу передавати дані глибоко в дерево компонентів без явного передавання пропсів через усі рівні. Створіть контекст та оберніть ваше дерево компонентів цим контекстом. Таким чином, компоненти зможуть отримувати доступ до даних із контексту, навіть якщо вони не перебувають у прямій ієрархії. 2928 | 2929 | #### 3) Глобальний стан (Global State): 2930 | 2931 | Використовуйте бібліотеки управління станом, такі як Redux або MobX, щоб створити глобальне сховище даних, доступне для всіх компонентів. Це особливо корисно, якщо стан потрібен між компонентами, які знаходяться далеко один від одного в дереві компонентів. 2932 | 2933 | #### 4) Подієва система: 2934 | 2935 | Реалізуйте свою подієву систему, яка дозволить компонентам підписуватися на певні події та передавати дані. Це можна зробити за допомогою сторонніх бібліотек або самостійно. 2936 | 2937 | #### 5) RESTful API: 2938 | 2939 | Якщо ваші компоненти спілкуються із сервером, ви можете використовувати RESTful API для обміну даними між ними. Компоненти можуть отримувати та надсилати дані через API. 2940 | 2941 | #### 6) Бібліотеки для управління станом: 2942 | 2943 | Залежно від вашого досвіду та вимог, ви також можете розглянути використання бібліотек управління станом, таких як Recoil, Zustand та інших. 2944 | 2945 | Вибір методу залежатиме від конкретних вимог вашого застосунку, його архітектури та складності взаємодії між компонентами. 2946 | 2947 | [⬆ Повернутися до списку](#список-запитань) 2948 | 2949 | ### Які засоби надає React для тестування компонентів? 2950 | 2951 | React надає кілька засобів і підходів для тестування компонентів. Ці засоби допомагають забезпечити стабільність і надійність вашого коду. Ось деякі з них: 2952 | 2953 | #### 1) Jest: 2954 | 2955 | Jest - це популярна бібліотека для тестування JavaScript-коду, включаючи компоненти React. Вона поставляється з Create React App за замовчуванням і надає функції для написання тестів, створення моків і затвердження (assertions). 2956 | 2957 | #### 2) React Testing Library: 2958 | 2959 | React Testing Library - це набір інструментів для тестування React-компонентів з упором на реальні сценарії використання. Він допомагає писати тести, які більше схожі на те, як користувачі будуть взаємодіяти з вашим додатком. 2960 | 2961 | #### 3) Enzyme: 2962 | 2963 | Enzyme - це інша популярна бібліотека для тестування React-компонентів. Вона надає зручні API для створення, маніпулювання та перевірки компонентів. Однак, зауважте, що Enzyme більш статичний і не так зосереджений на тестуванні сценаріїв використання, як React Testing Library. 2964 | 2965 | #### 4) Snapshot тестування: 2966 | 2967 | Snapshot тестування дає змогу порівнювати серіалізовані версії компонентів із попередніми збереженими знімками. Це допомагає швидко виявляти зміни в компонентах. Jest включає підтримку snapshot тестування. 2968 | 2969 | #### 5) Інтеграційне тестування: 2970 | 2971 | Ви можете використовувати тестові бібліотеки та інструменти, як-от Testing Library, для тестування взаємодії між компонентами та перевірки того, як вони взаємодіють разом. 2972 | 2973 | #### 6) Mocking: 2974 | 2975 | Під час тестування компонентів, які взаємодіють із зовнішніми залежностями (наприклад, API-запитами), ви можете використовувати моки (mocks) для заміни цих залежностей на керовані імітації. 2976 | 2977 | #### 7) Тестування хуків (Hooks): 2978 | 2979 | Хуки також можуть бути протестовані з використанням згаданих вище інструментів. React Testing Library і Jest мають підтримку для тестування хуків. 2980 | 2981 | Загалом, React надає великі засоби для тестування компонентів різними способами. Вибір конкретного підходу залежить від ваших уподобань, архітектури застосунку та вимог до тестування. 2982 | 2983 | [⬆ Повернутися до списку](#список-запитань) 2984 | 2985 | ### Як працює "ледаче завантаження" (lazy loading) компонентів у React? 2986 | 2987 | "Ледаче завантаження" (lazy loading) - це техніка оптимізації, яка використовується в React, щоб відкласти завантаження компонентів доти, доки вони дійсно не знадобляться. Це допомагає прискорити початковий час завантаження застосунку, особливо коли застосунок має великий обсяг коду. 2988 | 2989 | Для реалізації ледачого завантаження в React використовується динамічний імпорт - спеціальна можливість JavaScript, яка дає змогу завантажувати модулі на вимогу. 2990 | 2991 | Приклад використання ледачого завантаження компонентів за допомогою динамічного імпорту: 2992 | 2993 | ```jsx 2994 | import React, { lazy, Suspense } from "react"; 2995 | 2996 | const LazyComponent = lazy(() => import("./LazyComponent")); 2997 | 2998 | function App() { 2999 | return ( 3000 |

3001 | Loading...

}> 3002 | 3003 | 3004 | 3005 | ); 3006 | } 3007 | ``` 3008 | 3009 | У цьому прикладі, компонент `LazyComponent` буде завантажуватися асинхронно тільки тоді, коли він дійсно потрібен. Якщо компонент ще не завантажився, поки він не знадобиться, то буде показано компонент, вказаний у `fallback`. 3010 | 3011 | Після компонентів ліниво завантажених через `lazy`, можна використовувати їх так само, як та інші компоненти. 3012 | 3013 | #### Примітки: 3014 | 3015 | - Ледаче завантаження працює в основному з компонентами, але також може бути застосоване до інших модулів JavaScript. 3016 | - Ледаче завантаження добре поєднується з "code splitting", даючи змогу розділяти та завантажувати тільки ті частини програми, які дійсно потрібні для поточного подання. 3017 | - Не рекомендується використовувати ледаче завантаження для всіх компонентів, оскільки це може призвести до надмірної складності. Натомість застосовуйте його там, де це дійсно виправдано з точки зору оптимізації. 3018 | 3019 | [⬆ Повернутися до списку](#список-запитань) 3020 | 3021 | ### Що таке "синтетичні події" (synthetic events) у React? 3022 | 3023 | У React, "синтетичні події" (synthetic events) - це система опрацювання подій, яка надає крос-браузерну та крос-платформну абстракцію над нативними подіями браузера. Вони створюються та керуються React і забезпечують більш однакову поведінку обробки подій у різних браузерах. 3024 | 3025 | Синтетичні події надаються компонентам React як аргументи обробників подій і мають схожий інтерфейс із нативними подіями браузера, але з деякими відмінностями та поліпшеннями. 3026 | 3027 | Приклад використання синтетичних подій: 3028 | 3029 | ```jsx 3030 | import React from "react"; 3031 | 3032 | class Button extends React.Component { 3033 | handleClick = (event) => { 3034 | event.preventDefault(); 3035 | console.log("Button clicked!"); 3036 | }; 3037 | 3038 | render() { 3039 | return ; 3040 | } 3041 | } 3042 | ``` 3043 | 3044 | У цьому прикладі `event` є синтетичною подією, що передається в обробник `handleClick`. Ви можете викликати методи такі як `preventDefault()`, `stopPropagation()`, та інші, а також отримувати інформацію про подію (наприклад, `event.target`, `event.clientX`, та ін.). 3045 | 3046 | Синтетичні події також мають додаткові переваги, такі як автоматичний пулінг (для оптимізації роботи з пам'яттю), нормалізація відмінностей між різними браузерами та підтримка делегування подій. 3047 | 3048 | [⬆ Повернутися до списку](#список-запитань) 3049 | 3050 | ### Як організувати перевикористання компонентів у React? 3051 | 3052 | Перевикористання компонентів - один з основних принципів розробки в React. Це дає змогу створювати ефективний і легко підтримуваний код. Ось деякі методи організації перевикористання компонентів: 3053 | 3054 | #### 1) Компоненти вищого порядку (HOC): 3055 | 3056 | Створення компонентів вищого порядку дозволяє обертати інші компоненти, додаючи їм певну поведінку. Це корисно для ізоляції логіки, яку ви хочете застосувати до кількох компонентів. 3057 | 3058 | #### 2) Композиція компонентів: 3059 | 3060 | Будувати складніші компоненти шляхом комбінування простіших. Компоненти, які представляють більш загальні елементи (наприклад, кнопки, картки тощо), можуть бути повторно використані та налаштовані залежно від конкретних потреб. 3061 | 3062 | #### 3) Render Props: 3063 | 3064 | Створення компонентів, які передають функцію через властивість children або іншу певну властивість. Це дає змогу іншим компонентам використовувати цю функцію для впровадження свого контенту. 3065 | 3066 | #### 4) Хуки (Hooks): 3067 | 3068 | З React 16.8, хуки дозволили перевикористовувати стан і логіку у функціональних компонентах без використання класів. Вам навіть можна створювати власні користувацькі хуки для ізоляції певної функціональності. 3069 | 3070 | #### 5) Бібліотеки компонентів: 3071 | 3072 | Існує безліч бібліотек компонентів, як-от Material-UI, Ant Design, Chakra UI та інші, що надають готові компоненти для перевикористання у ваших проєктах. 3073 | 3074 | #### 6) Компоненти сторінок (Page Components) і компоненти макета (Layout Components): 3075 | 3076 | Поділ компонентів на ті, що відповідають за макет (навігація, бічна панель тощо) і ті, що відповідають за конкретний вміст сторінки, може істотно підвищити перевикористання. 3077 | 3078 | #### 7) Контейнери та компоненти представлення (Containers and Presentational Components): 3079 | 3080 | Поділяйте компоненти на "розумні" контейнери, які керують станом і бізнес-логікою, і "дурні" компоненти представлення, які відображають дані, передані їм із контейнерів. 3081 | 3082 | Дотримуючись цих методів, ви зможете організувати ефективне перевикористання компонентів у вашому додатку, що спростить підтримку коду та прискорить розробку. 3083 | 3084 | [⬆ Повернутися до списку](#список-запитань) 3085 | 3086 | ### Що таке "високонавантажені компоненти" (high-order components) та як їх створити? 3087 | 3088 | **"Високонавантажені компоненти"** (High-Order Components, HOC) - це патерн у React, який дає змогу ізолювати та повторно використовувати логіку компонентів. HOC не є частиною синтаксису React, це скоріше патерн, що використовує наявні механізми мови для створення нових компонентів. 3089 | 3090 | HOC дають змогу додавати або змінювати функціональність компонентів, обертаючи їх в інші компоненти. Це часто використовується для винесення загальної логіки, такої як обробка автентифікації, логування тощо, щоб ізолювати цю логіку та забезпечити її перевикористання. 3091 | 3092 | Приклад створення HOC: 3093 | 3094 | ```jsx 3095 | import React from "react"; 3096 | 3097 | // HOC приймає компонент WrappedComponent як аргумент 3098 | const withLogger = (WrappedComponent) => { 3099 | // Новий компонент, що повертається HOC 3100 | class WithLogger extends React.Component { 3101 | componentDidMount() { 3102 | console.log(`Component ${WrappedComponent.name} mounted`); 3103 | } 3104 | 3105 | render() { 3106 | // Прокидаємо пропси в обгорнутий компонент 3107 | return ; 3108 | } 3109 | } 3110 | 3111 | return WithLogger; 3112 | }; 3113 | 3114 | // Використовуємо HOC для обертання іншого компонента 3115 | const MyComponent = (props) =>

Привіт, світ!

; 3116 | const ComponentWithLogger = withLogger(MyComponent); 3117 | 3118 | export default ComponentWithLogger; 3119 | ``` 3120 | 3121 | У цьому прикладі `withLogger` - це HOC, який обертає компонент `MyComponent`. Коли `ComponentWithLogger` рендериться, він додає логіку для виведення повідомлення про монтування компонента в консоль. 3122 | 3123 | Для використання HOC: 3124 | 3125 | ```jsx 3126 | import React from "react"; 3127 | import ComponentWithLogger from "./ComponentWithLogger"; 3128 | 3129 | function App() { 3130 | return ( 3131 |

3132 | 3133 |

3134 | ); 3135 | } 3136 | ``` 3137 | 3138 | HOC - це потужний інструмент для повторного використання логіки та обгортання компонентів у загальну функціональність. Однак вони також мають свої обмеження та можуть ускладнити структуру коду, тому їх слід використовувати з розумом. 3139 | 3140 | [⬆ Повернутися до списку](#список-запитань) 3141 | 3142 | ### Яких принципів слід дотримуватися під час іменування компонентів у React? 3143 | 3144 | Іменування компонентів у React відіграє важливу роль у читабельності, розумінні структури застосунку та його логіки. Дотримання хороших практик з іменування допомагає зробити код більш зрозумілим і підтримуваним. Ось деякі принципи, яких слід дотримуватися під час іменування компонентів: 3145 | 3146 | #### 1) Використовуйте ясне й описове ім'я: 3147 | 3148 | Ім'я компонента має чітко відображати його призначення та функціональність. Уникайте скорочень та абревіатур, які можуть бути незрозумілими іншим розробникам. 3149 | 3150 | #### 2) Використовуйте PascalCase: 3151 | 3152 | Імена компонентів слід писати в PascalCase (усі слова починаються із великої літери), щоб їх легко було відрізнити від звичайних HTML-тегів і змінних. 3153 | 3154 | #### 3) Уникайте конфліктів з HTML-тегами: 3155 | 3156 | Ім'я компонента не повинно збігатися з ім'ям наявних HTML-тегів, щоб не викликати плутанину. 3157 | 3158 | #### 4) Використовуйте чіткі імена для пропсів: 3159 | 3160 | Якщо ви передаєте пропси компоненту, їхні імена також мають бути ясними та описовими. Це допоможе іншим розробникам зрозуміти, які дані очікуються. 3161 | 3162 | #### 5) Дотримуйтесь конвенцій вашого проєкту: 3163 | 3164 | Якщо у вас є певні стандарти іменування у вашому проєкті або команді, дотримуйтесь їх. Це допоможе підтримувати структуру коду в єдиному стилі. 3165 | 3166 | #### 6) Ім'я файлу та ім'я компонента мають збігатися: 3167 | 3168 | Зберігайте ім'я файлу, що містить компонент, таким самим, як та ім'я самого компонента. Це робить простіше знайти та пов'язати компонент з його файлом. 3169 | 3170 | Приклад гарного іменування: 3171 | 3172 | ```jsx 3173 | // Погано 3174 | const C = () => {...} 3175 | 3176 | // Добре 3177 | const UserProfile = () => {...} 3178 | 3179 | // Передача пропсів: Добре 3180 | const UserProfile = ({ username, avatar }) => {...} 3181 | ``` 3182 | 3183 | Дотримання цих принципів під час іменування компонентів допоможе зробити ваш код більш читабельним, зрозумілим і зручним для супроводу. 3184 | 3185 | [⬆ Повернутися до списку](#список-запитань) 3186 | 3187 | ### Як реалізувати анімацію переходів між компонентами в React Router? 3188 | 3189 | Для реалізації анімації переходів між компонентами під час використання React Router, ви можете скористатися різними підходами та бібліотеками. Ось один із підходів, використовуючи CSS-транзиції та бібліотеку `react-transition-group`. 3190 | 3191 | #### 1) Встановлення залежностей: 3192 | 3193 | Встановіть бібліотеку `react-transition-group` за допомогою npm або yarn: 3194 | 3195 | ``` 3196 | npm install react-transition-group 3197 | ``` 3198 | 3199 | #### 2) Створення компонентів анімації: 3200 | 3201 | Створіть компоненти, які керуватимуть анімацією входу та виходу. Наприклад, `FadeIn` і `FadeOut`. 3202 | 3203 | ```jsx 3204 | import React from "react"; 3205 | import { CSSTransition } from "react-transition-group"; 3206 | import "./FadeTransition.css"; // Підключіть стилі для анімації 3207 | 3208 | const FadeTransition = ({ children, ...props }) => ( 3209 | 3210 | {children} 3211 | 3212 | ); 3213 | 3214 | export default FadeTransition; 3215 | ``` 3216 | 3217 | #### 3) Створення CSS-транзицій: 3218 | 3219 | У папці вашого проєкту створіть файл `FadeTransition.css` і визначте стилі для анімації: 3220 | 3221 | ```jsx 3222 | .fade-enter { 3223 | opacity: 0; 3224 | } 3225 | 3226 | .fade-enter-active { 3227 | opacity: 1; 3228 | transition: opacity 500ms ease-in; 3229 | } 3230 | 3231 | .fade-exit { 3232 | opacity: 1; 3233 | } 3234 | 3235 | .fade-exit-active { 3236 | opacity: 0; 3237 | transition: opacity 500ms ease-out; 3238 | } 3239 | ``` 3240 | 3241 | #### 4) Використання анімації: 3242 | 3243 | У вашому компоненті, де ви використовуєте R`eact Router`, оберніть маршрут у компонент `FadeTransition`: 3244 | 3245 | ```jsx 3246 | import React from "react"; 3247 | import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; 3248 | import FadeTransition from "./FadeTransition"; 3249 | import Home from "./Home"; 3250 | import About from "./About"; 3251 | 3252 | const App = () => { 3253 | return ( 3254 | 3255 | 3256 | 3257 | 3258 | 3259 | 3260 | 3261 | 3262 | 3263 | 3264 | 3265 | 3266 | 3267 | 3268 | ); 3269 | }; 3270 | 3271 | export default App; 3272 | ``` 3273 | 3274 | У цьому прикладі під час переходу між маршрутами компоненти з'являтимуться та зникатимуть з анімацією. 3275 | 3276 | Зверніть увагу, що це лише один зі способів реалізації анімації переходів. Існують й інші бібліотеки, як-от `framer-motion` та `react-router-transitions`, які також можуть допомогти в реалізації анімацій між компонентами під час використання React Router. 3277 | 3278 | [⬆ Повернутися до списку](#список-запитань) 3279 | 3280 | ### Що таке "глибоке перенесення стану" (deep state transfer) у React? 3281 | 3282 | "Глибоке перенесення стану" - це патерн, який використовується для передачі стану або даних через кілька компонентів в ієрархії React без використання проміжних пропсів. Це може статися, коли компоненти, що знаходяться далеко один від одного в ієрархії, повинні обмінюватися даними. 3283 | 3284 | Однак глибоке перенесення стану може стати проблемою з погляду читабельності коду та обслуговуваності. Кожен проміжний компонент у ланцюжку має передавати пропси, навіть якщо він сам не використовує їх. Це може призвести до заплутаного коду та ускладнення процесу налагодження та підтримки. 3285 | 3286 | Замість глибокого перенесення стану рекомендується використовувати більш спеціалізовані патерни управління станом, такі як: 3287 | 3288 | 1. **Контекст (Context):** 3289 | Контекст у React дає змогу передавати дані вниз по ієрархії компонентів без явної передачі пропсів через кожен проміжний компонент. Однак його слід використовувати обережно, щоб уникнути створення "глобального стану" і не надмірно ускладнити код. 3290 | 3291 | 2. **Хуки управління станом (State Management Hooks):** 3292 | Замість глибокого перенесення стану, ви можете використовувати спеціалізовані бібліотеки управління станом, такі як Redux, MobX, Recoil та інші. Вони надають більш структурований і керований спосіб обміну даними між компонентами. 3293 | 3294 | 3. **Переміщення логіки в батьківський компонент:** 3295 | Якщо компоненти використовують спільну логіку або дані, спробуйте перемістити цю логіку або дані до спільного батьківського компонента. Це дасть змогу уникнути глибокого перенесення стану. 3296 | 3297 | Важливо знаходити баланс між передачею даних через пропси та використанням спеціалізованих методів управління станом. Використовуйте той патерн, який найбільше підходить для конкретної ситуації, щоб забезпечити читабельність, підтримуваність та ефективність вашого коду. 3298 | 3299 | [⬆ Повернутися до списку](#список-запитань) 3300 | 3301 | ### Як реалізувати модальне вікно в React-додатку? 3302 | 3303 | Реалізація модального вікна в React-додатку може бути виконана різними способами. Ось один зі способів, використовуючи стан і стилі: 3304 | 3305 | #### 1) Створення компонента модального вікна: 3306 | 3307 | Створіть компонент для модального вікна, який буде керувати його відображенням і змістом. 3308 | 3309 | ```jsx 3310 | import React from "react"; 3311 | 3312 | const Modal = ({ isOpen, onClose, children }) => { 3313 | if (!isOpen) return null; 3314 | 3315 | return ( 3316 |

3317 |

3318 | 3321 | {children} 3322 |

3323 |

3324 | ); 3325 | }; 3326 | 3327 | export default Modal; 3328 | ``` 3329 | 3330 | #### 2) Створення стилів для модального вікна: 3331 | 3332 | Створіть стилі для модального вікна за допомогою CSS або будь-якого CSS-препроцесора. 3333 | 3334 | ```jsx 3335 | .modal-overlay { 3336 | position: fixed; 3337 | top: 0; 3338 | left: 0; 3339 | width: 100%; 3340 | height: 100%; 3341 | background-color: rgba(0, 0, 0, 0.5); 3342 | display: flex; 3343 | justify-content: center; 3344 | align-items: center; 3345 | } 3346 | 3347 | .modal { 3348 | background-color: white; 3349 | padding: 20px; 3350 | border-radius: 8px; 3351 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 3352 | } 3353 | 3354 | .modal-close { 3355 | position: absolute; 3356 | top: 10px; 3357 | right: 10px; 3358 | } 3359 | ``` 3360 | 3361 | #### 3) Використання модального вікна: 3362 | 3363 | Використовуйте створений компонент модального вікна у вашому додатку. 3364 | 3365 | ```jsx 3366 | import React, { useState } from "react"; 3367 | import Modal from "./Modal"; 3368 | 3369 | const App = () => { 3370 | const [isModalOpen, setModalOpen] = useState(false); 3371 | 3372 | const openModal = () => setModalOpen(true); 3373 | const closeModal = () => setModalOpen(false); 3374 | 3375 | return ( 3376 |

3377 | 3378 | 3379 |

Модальне вікно

3380 |

Вміст модального вікна...

3381 | 3382 |

3383 | ); 3384 | }; 3385 | 3386 | export default App; 3387 | ``` 3388 | 3389 | Це базовий приклад реалізації модального вікна в React-додатку. Ви можете налаштувати його дизайн і поведінку залежно від ваших вимог. Для більш складних сценаріїв та анімацій також можуть знадобитися додаткові бібліотеки або підходи. 3390 | 3391 | [⬆ Повернутися до списку](#список-запитань) 3392 | 3393 | ### Що таке SSR (Server-Side Rendering) і навіщо його використовувати? 3394 | 3395 | Server-Side Rendering (SSR), або рендеринг на стороні сервера, - це техніка, за якої HTML-контент генерується на сервері та надсилається клієнту (браузеру), на відміну від традиційного клієнтського рендерінгу (CSR), де HTML генерується на клієнтській стороні з використанням JavaScript. 3396 | 3397 | #### Під час використання SSR: 3398 | 3399 | **1) Ініціальне завантаження швидше:** 3400 | Користувачі бачать контент швидше, оскільки сервер відправляє повністю готову для відображення сторінку. Це особливо важливо для поліпшення початкового часу завантаження, що може підвищити задоволеність користувачів і поліпшити показники SEO. 3401 | 3402 | **2) SEO-оптимізація:** 3403 | Пошукові системи можуть більш ефективно індексувати та ранжувати сторінки з повністю відмальованим контентом на сервері, що може поліпшити видимість вашого сайту в результатах пошуку. 3404 | 3405 | **3) Поліпшення доступності та SEO:** 3406 | Для користувачів з повільним інтернетом або обмеженими можливостями браузера, SSR може забезпечити кращий досвід використання, оскільки вони будуть бачити контент раніше. 3407 | 3408 | **4) Безпека:** 3409 | SSR може допомогти у зменшенні можливості атак на кшталт Cross-Site Scripting (XSS), оскільки сервер може краще контролювати та обробляти вхідні дані. 3410 | 3411 | **5) Підтримка соціальних медіа:** 3412 | Коли контент рендериться на сервері, соціальні мережі та месенджери (наприклад, Facebook і Twitter) можуть легко витягувати дані для відображення прев'ю посилань. 3413 | 3414 | **6) Корисно для динамічних даних:** 3415 | Навіть якщо ваш застосунок загалом є SPA (Single Page Application), SSR можна використовувати для візуалізації частин сторінки, що містять динамічні дані, які змінюються рідко. 3416 | 3417 | Однак SSR також має свої складнощі, як-от управління станом і більш високе навантаження на сервер. Залежно від вашого проєкту та потреб, ви можете обирати між SSR і CSR або навіть комбінувати їх в одному застосунку для досягнення найкращого балансу між продуктивністю, SEO та досвідом користувачів. 3418 | 3419 | [⬆ Повернутися до списку](#список-запитань) 3420 | 3421 | ### Які переваги дає використання CSS-модулів (CSS Modules)? 3422 | 3423 | CSS-модулі - це підхід до стилізації компонентів у React та інших фронтенд-фреймворках, який дає змогу ізолювати стилі компонентів та уникати глобальних конфліктів імен класів. Ось деякі переваги використання CSS-модулів: 3424 | 3425 | 1. **Ізоляція стилів:** 3426 | Кожен компонент має свої унікальні класи, що забезпечує повну ізоляцію стилів між компонентами. Це дає змогу уникати несподіваних перевизначень стилів і глобальних конфліктів. 3427 | 3428 | 2. **Локальні імена класів:** 3429 | Імена класів автоматично генеруються з використанням унікальних ідентифікаторів для кожного компонента. Це знижує ймовірність колізій і дає змогу вам використовувати коротші та зрозуміліші імена класів. 3430 | 3431 | 3. **Читабельність і розуміння:** 3432 | Стилі безпосередньо пов'язані з компонентами, що робить код більш читабельним і легко зрозумілим. Ви можете бачити, які стилі застосовуються до конкретного компонента, не досліджуючи весь файл стилів. 3433 | 3434 | 4. **Підтримка перевикористання:** 3435 | Використовуючи CSS-модулі, ви можете створювати стилі, специфічні для компонента, і легко переносити або повторно використовувати ці компоненти в інших проєктах, не турбуючись про конфлікти стилів. 3436 | 3437 | 5. **Зменшення розміру файлу стилів:** 3438 | Оскільки CSS-модулі генерують унікальні імена класів для кожного компонента, ви можете використовувати короткі імена класів без побоювання назв класів у глобальному контексті, що допомагає зменшити розмір файлу стилів. 3439 | 3440 | 6. **Декларативність:** 3441 | Ваш CSS залишається близьким до вашого компонента, що дає змогу вам використовувати більш декларативний та інтуїтивний підхід до стилізації. 3442 | 3443 | 7. **Легка міграція:** 3444 | Якщо у вас уже є проєкт зі стилями, використання CSS-модулів дає змогу поступово впроваджувати ізоляцію стилів, не вимагаючи одразу ж переписувати всі стилі. 3445 | 3446 | CSS-модулі можуть бути особливо корисними у великих проєктах, де структура компонентів і стилів складна. Однак, як і з будь-якою технологією, важливо оцінити її застосовність у вашому конкретному випадку та переконатися, що вона відповідає вашим потребам. 3447 | 3448 | [⬆ Повернутися до списку](#список-запитань) 3449 | 3450 | ### Що таке "віртуалізація списку" (list virtualization) та як вона реалізується в React? 3451 | 3452 | Віртуалізація списку - це техніка оптимізації відображення великих списків елементів у користувацькому інтерфейсі. Коли у вас є великий набір даних, наприклад, список повідомлень, записів або товарів, звичайний рендеринг усіх елементів одразу може викликати проблеми з продуктивністю. Віртуалізація списку дає змогу рендерити тільки видимі елементи, що покращує продуктивність та економить пам'ять. 3453 | 3454 | У React віртуалізація списку зазвичай реалізується з використанням двох основних бібліотек: react-virtualized і react-window. Ось як це працює: 3455 | 3456 | #### react-virtualized: 3457 | 3458 | `react-virtualized` надає компоненти для віртуалізації списку, такі як `List` та `Grid`. Він слідкує за прокруткою та рендерить лише ті елементи, які знаходяться в межах видимої області. Це дає змогу зменшити кількість намальованих елементів і поліпшити продуктивність. 3459 | 3460 | Приклад використання `List` з `react-virtualized`: 3461 | 3462 | ```jsx 3463 | import React from "react"; 3464 | import { List } from "react-virtualized"; 3465 | 3466 | const MyList = ({ items }) => { 3467 | const rowRenderer = ({ index, key, style }) => ( 3468 |

3469 | {items[index]} 3470 |

3471 | ); 3472 | 3473 | return ( 3474 | 3481 | ); 3482 | }; 3483 | 3484 | export default MyList; 3485 | ``` 3486 | 3487 | #### react-window: 3488 | 3489 | `react-window` надає більш легковагі компоненти для віртуалізації. Він розбиває список на більш дрібні фрагменти, що дозволяє знизити накладні витрати на пам'ять і продуктивність. 3490 | 3491 | Приклад використання `FixedSizeList` з `react-window`: 3492 | 3493 | ```jsx 3494 | import React from "react"; 3495 | import { FixedSizeList } from "react-window"; 3496 | 3497 | const MyList = ({ items }) => { 3498 | const rowRenderer = ({ index, style }) => ( 3499 |

{items[index]}

3500 | ); 3501 | 3502 | return ( 3503 | 3509 | {rowRenderer} 3510 | 3511 | ); 3512 | }; 3513 | 3514 | export default MyList; 3515 | ``` 3516 | 3517 | Обидві бібліотеки дають змогу ефективно рендерити великі списки елементів і значно поліпшити продуктивність вашого React-додатку. Вибір між `react-virtualized` та `react-window` залежить від ваших конкретних вимог і переваг. 3518 | 3519 | [⬆ Повернутися до списку](#список-запитань) 3520 | 3521 | ### Як реалізувати include компонентів у React? 3522 | 3523 | У React, включення компонентів можна здійснити за допомогою використання інших компонентів всередині батьківських компонентів. Це робиться шляхом вставки тега компонента в JSX коді батьківського компонента. 3524 | 3525 | Приклад: 3526 | 3527 | ```jsx 3528 | import React from "react"; 3529 | 3530 | // Припустимо, у нас є компонент ChildComponent 3531 | const ChildComponent = () => { 3532 | return

Це дочірній компонент

; 3533 | }; 3534 | 3535 | // Потім ми можемо використовувати ChildComponent всередині ParentComponent 3536 | const ParentComponent = () => { 3537 | return ( 3538 |

3539 |

Батьківський компонент

3540 | {/* Включення дочірнього компонента */} 3541 |

3542 | ); 3543 | }; 3544 | 3545 | export default ParentComponent; 3546 | ``` 3547 | 3548 | У цьому прикладі `ChildComponent` включається всередині `ParentComponent` шляхом використання ``. 3549 | 3550 | [⬆ Повернутися до списку](#список-запитань) 3551 | 3552 | ### Що таке "консиліація" (reconciliation) у контексті React? 3553 | 3554 | **"Консиліація"** (reconciliation) у React - це процес порівняння попереднього дерева елементів (Virtual DOM) із новим деревом елементів, створеним унаслідок оновлення стану або пропсів компонентів. 3555 | 3556 | У процесі роботи React-додатку компоненти можуть змінювати свої дані, стан і властивості. Коли це відбувається, React повинен оновити користувацький інтерфейс, щоб відобразити ці зміни. Консиліація - це механізм, який дає змогу React ефективно визначити, які частини DOM дійсно потрібно змінити. 3557 | 3558 | Під час консиліації React використовує алгоритм порівняння двох дерев елементів - старого та нового. Він порівнює кожен елемент і його дітей, визначаючи, які зміни потрібно внести в реальному DOM для того, щоб відобразити новий стан компонента. 3559 | 3560 | React прагне мінімізувати кількість реальних змін у DOM. Замість повного перемальовування він намагається знайти оптимальний спосіб оновлення, додавання та видалення елементів. Це дає змогу досягти ефективнішої роботи під час оновлень користувацького інтерфейсу. 3561 | 3562 | [⬆ Повернутися до списку](#список-запитань) 3563 | 3564 | ### Як обробляти форми в React? 3565 | 3566 | Обробка форм у React передбачає збір даних, введених користувачем у поля форми, і виконання певних дій на основі цих даних. Ось загальні кроки з обробки форм у React: 3567 | 3568 | 1. Створення компонента форми: Створіть компонент, який буде містити вашу форму. У цьому компоненті ви визначаєте поля введення та елементи керування (кнопки тощо). 3569 | 3570 | 2. Стан для даних форми: Використовуйте хук `useState` або класовий компонент для створення стану, у якому зберігатимуться дані, введені користувачем у форму. 3571 | 3572 | 3. Обробники подій: Створіть обробники подій, які викликатимуться при зміні значень полів введення або при відправленні форми. Ці обробники будуть оновлювати стан даних форми. 3573 | 3574 | 4. Зв'язування даних: Прив'яжіть значення полів введення до стану даних форми. Для компонентів класів використовуйте атрибут `value`, для функціональних компонентів - зв'язування через стан та обробники. 3575 | 3576 | 5. Надсилання даних: Під час надсилання форми викликайте обробник події, який виконуватиме необхідні дії з даними, наприклад, надсилання на сервер або виконання інших операцій. 3577 | 3578 | Приклад обробки простої форми в React: 3579 | 3580 | ```jsx 3581 | import React, { useState } from "react"; 3582 | 3583 | const FormExample = () => { 3584 | const [formData, setFormData] = useState({ 3585 | username: "", 3586 | password: "", 3587 | }); 3588 | 3589 | const handleChange = (event) => { 3590 | const { name, value } = event.target; 3591 | setFormData({ 3592 | ...formData, 3593 | [name]: value, 3594 | }); 3595 | }; 3596 | 3597 | const handleSubmit = (event) => { 3598 | event.preventDefault(); 3599 | // Тут можна виконати дії з даними форми, наприклад, відправити на сервер 3600 | console.log(formData); 3601 | }; 3602 | 3603 | return ( 3604 | 3621 | ); 3622 | }; 3623 | 3624 | export default FormExample; 3625 | ``` 3626 | 3627 | Цей приклад демонструє, як створити просту форму в React, пов'язати її поля зі станом та обробляти введені дані. 3628 | 3629 | [⬆ Повернутися до списку](#список-запитань) 3630 | 3631 | ### Альтернативи Redux для керування станом у React-додатках? 3632 | 3633 | На додаток до Redux, існує кілька інших бібліотек і підходів для управління станом у React-додатках. Ось деякі з них: 3634 | 3635 | 1. **React Context API**: Це вбудований механізм у React, який дає змогу передавати дані «вниз» по дереву компонентів, не вимагаючи необхідності явно передавати пропси через проміжні компоненти. Context API можна використовувати для створення глобального стану, але він може стати незручним при управлінні великим обсягом даних або складними взаємозв'язками. 3636 | 3637 | 2. **MobX**: Це бібліотека для управління станом, яка дозволяє робити відстеження змін та автоматично оновлювати компоненти при зміні стану. MobX більше дозволяє більш декларативно визначати стан і його залежності. 3638 | 3639 | 3. **Recoil**: Це бібліотека, розроблена Facebook, призначена для управління станом у React-додатках. Вона надає більш гнучкий спосіб роботи зі станом, підтримуючи атоми (невеликі одиниці стану) і селектори (функції для отримання даних з атомів). 3640 | 3641 | 4. **Zustand**: Це невелика бібліотека для управління станом, яка підтримує глобальний стан з використанням хуків. Вона полегшує створення та оновлення стану з мінімальним синтаксисом. 3642 | 3643 | 5. **Apollo Client**: Якщо ваш додаток пов'язаний з роботою з GraphQL-сервером, Apollo Client може бути корисним. Він не тільки керує станом, а й управляє даними, отриманими з сервера, і забезпечує зручні засоби для роботи із запитами та мутаціями. 3644 | 3645 | Вибір конкретної альтернативи залежатиме від специфіки вашого проєкту, складності управління станом, особистих уподобань і командної експертизи. 3646 | 3647 | [⬆ Повернутися до списку](#список-запитань) 3648 | 3649 | ### Як працює «гаряча заміна модулів» (Hot Module Replacement) у середовищі розробки React-додатків? 3650 | 3651 | «Гаряча заміна модулів» (HMR) - це механізм, що дає змогу розробникам вносити зміни до коду застосунку в реальному часі, без повного перезавантаження сторінки або застосунку. Це особливо корисно під час розробки, оскільки дає змогу миттєво бачити результати внесених змін без затримок. 3652 | 3653 | У контексті React-додатків, HMR забезпечує швидку заміну компонентів та інших модулів без перезавантаження всього додатка. Ось як це працює: 3654 | 3655 | 1. **Відстеження змін:** Під час запуску програми з HMR, інструменти розробки моніторять зміни у файлах компонентів та інших модулів. 3656 | 3657 | 2. **Виділення змін:** Коли розробник вносить зміни в коді (наприклад, усередині компонента), HMR виділяє тільки ті модулі, які були змінені. 3658 | 3659 | 3. **Застосування змін:** Замість повного перезавантаження сторінки або додатка, HMR застосовує тільки змінені модулі під час виконання. Це може включати заміну компонентів, оновлення стилів та інші зміни. 3660 | 3661 | 4. **Збереження стану:** Однією з важливих рис HMR є те, що він намагається зберегти стан програми після внесення змін. Наприклад, якщо ви вносите зміни до коду компонента, стан цього компонента зберігається, і ви не втрачаєте дані, які були введені або відображені. 3662 | 3663 | 5. **Оновлення інтерфейсу:** Після застосування змін, оновлюється тільки та частина інтерфейсу, яка дійсно змінилася. Це дає змогу вам миттєво бачити результати змін без видимих перемальовок або перезавантажень. 3664 | 3665 | Використання HMR робить процес розробки ефективнішим і швидшим, оскільки розробникам не потрібно постійно перезавантажувати сторінку для перегляду результатів своїх змін. Цей механізм інтегрований у багато інструментів розробки, як-от webpack і Create React App, і дає змогу значно прискорити та полегшити процес розробки React-додатків. 3666 | 3667 | [⬆ Повернутися до списку](#список-запитань) 3668 | 3669 | ### Що таке «мемоізація» (memoization) та як вона може бути застосована в React? 3670 | 3671 | **Мемоїзація** - це оптимізаційна техніка, яка полягає у збереженні результатів виконання функції з певними аргументами та поверненні закешованого результату при повторних викликах функції з тими самими аргументами, замість повторного виконання функції. Це дає змогу уникнути зайвих обчислень і прискорити виконання коду. 3672 | 3673 | У контексті React мемоїзація може бути застосована для оптимізації перемальовок компонентів. Компоненти в React перемальовуються, коли їхній стан або пропси змінюються. Однак у деяких випадках перемальовування може бути зайвим і спричинити втрату продуктивності. Тут мемоїзація приходить на допомогу. 3674 | 3675 | У React використовується два основних інструменти для мемоїзації: 3676 | 3677 | #### React.memo 3678 | 3679 | Це високорівнева функція-обгортка, яку можна застосувати до функціональних компонентів. Вона дозволяє автоматично мемоїзувати компонент і запобігати його перемальовуванню, якщо його пропси залишилися незмінними. 3680 | 3681 | Приклад: 3682 | 3683 | ```jsx 3684 | import React from "react"; 3685 | 3686 | const MyComponent = React.memo(({ prop1, prop2 }) => { 3687 | // Компонент буде перемальований тільки при зміні prop1 або prop2 3688 | return

{/* Ваш код компонента */}

; 3689 | }); 3690 | ``` 3691 | 3692 | #### useMemo і useCallback: 3693 | 3694 | Це хуки, які дають змогу мемоїзувати значення та колбеки всередині функціональних компонентів. 3695 | 3696 | Приклад з `useMemo`: 3697 | 3698 | ```jsx 3699 | import React, { useMemo } from "react"; 3700 | 3701 | const MyComponent = ({ data }) => { 3702 | const processedData = useMemo(() => { 3703 | // Виконання дорогої операції на основі data 3704 | return processData(data); 3705 | }, [data]); 3706 | 3707 | return

{/* Використання processedData */}

; 3708 | }; 3709 | ``` 3710 | 3711 | Мемоїзація корисна в тих випадках, коли компоненти мають дорогі обчислення або відтворення, і ви хочете мінімізувати їхнє перемальовування за незначних змін. Однак варто використовувати мемоїзацію усвідомлено, оскільки вона може підвищити складність коду та не завжди дає помітний ефект у продуктивності. 3712 | 3713 | [⬆ Повернутися до списку](#список-запитань) 3714 | 3715 | ### Як реалізувати зв'язування даних (data binding) у React? 3716 | 3717 | Зв'язування даних у React можна реалізувати за допомогою керованих компонентів. Керований компонент - це компонент, значення якого контролюються станом React та оновлюються через обробники подій. Для створення зв'язку між даними та компонентом можна використовувати такі кроки: 3718 | 3719 | 1. **Створення стану:** усередині компонента визначте стан, який міститиме дані для зв'язування. 3720 | 3721 | 2. **Зв'язування з елементами форм:** прив'яжіть значення елементів форм (наприклад, input, textarea) до стану компонента, встановлюючи атрибут `value` елемента рівним значенню зі стану та додаючи обробник змін для оновлення стану під час введення даних. 3722 | 3723 | 3. **Оброблювачі подій:** Визначте функції-оброблювачі, які будуть викликатися при зміні елементів форм. У цих функціях оновлюйте стан компонента з новими значеннями. 3724 | 3725 | Приклад: 3726 | 3727 | ```jsx 3728 | import React, { Component } from "react"; 3729 | 3730 | class DataBindingExample extends Component { 3731 | constructor(props) { 3732 | super(props); 3733 | this.state = { 3734 | inputValue: "", 3735 | }; 3736 | } 3737 | 3738 | handleInputChange = (event) => { 3739 | this.setState({ inputValue: event.target.value }); 3740 | }; 3741 | 3742 | render() { 3743 | return ( 3744 |

3745 | 3750 |

Введене значення: {this.state.inputValue}

3751 |

3752 | ); 3753 | } 3754 | } 3755 | 3756 | export default DataBindingExample; 3757 | ``` 3758 | 3759 | Цей приклад демонструє керований компонент, у якому значення input прив'язане до стану компонента. При введенні даних у поле введення, стан оновлюється, і нове значення відображається під полем введення. 3760 | 3761 | [⬆ Повернутися до списку](#список-запитань) 3762 | 3763 | ### Що таке «передача даних через контекст» (context passing) у React? 3764 | 3765 | Передача даних через контекст (context passing) у React - це механізм, який дає змогу передавати дані глибоко в ієрархію компонентів без явного передавання пропсів через кожен проміжний компонент. Це особливо корисно, коли кілька компонентів у застосунку потребують доступу до одних і тих самих даних, як-от стан, тема оформлення або дані аутентифікації. 3766 | 3767 | Контекст являє собою спосіб створення загального «контексту» даних, який можна використовувати всередині дочірніх компонентів, не передаючи дані явно через пропси. 3768 | 3769 | Основні кроки для використання контексту: 3770 | 3771 | 1. **Створення контексту:** На початку ієрархії компонентів створюється контекст за допомогою функції `React.createContext()`. Ця функція повертає об'єкт контексту, який включає в себе Provider (постачальник) і Consumer (споживач). 3772 | 3773 | 2. **Постачальник (Provider):** Компонент, створений з використанням контексту, діє як постачальник даних. Він обертає всі дочірні компоненти, яким потрібен доступ до даних із контексту. Шляхом передачі значень через атрибути `value` Provider робить дані доступними для дочірніх компонентів. 3774 | 3775 | 3. **Споживач (Consumer):** Компоненти, яким потрібен доступ до даних контексту, обертаються в Consumer. Вони можуть отримати доступ до даних, переданих через Provider, використовуючи функцію-рендер-пропс, яка отримує поточне значення контексту. 3776 | 3777 | Приклад використання контексту: 3778 | 3779 | ```jsx 3780 | import React, { createContext, useContext } from "react"; 3781 | 3782 | // Створення контексту 3783 | const ThemeContext = createContext(); 3784 | 3785 | // Компонент-постачальник 3786 | function App() { 3787 | return ( 3788 | 3789 | 3790 | 3791 | ); 3792 | } 3793 | 3794 | // Компонент-споживач 3795 | function Toolbar() { 3796 | const theme = useContext(ThemeContext); 3797 | return

Тема: {theme}

; 3798 | } 3799 | 3800 | export default App; 3801 | ``` 3802 | 3803 | У цьому прикладі компонент `Toolbar` отримує доступ до значення теми, переданої через контекст від компонента `App`, без явної передачі через пропси. 3804 | 3805 | [⬆ Повернутися до списку](#список-запитань) 3806 | 3807 | ### Як реалізувати перетягування (drag-and-drop) елементів у React-додатку? 3808 | 3809 | Для реалізації перетягування елементів у React-додатку ви можете використовувати нативні події браузера в поєднанні зі станом компонентів React. Ось базові кроки, як це можна зробити: 3810 | 3811 | #### 1) Створення компонентів: 3812 | 3813 | - Створіть компоненти, які ви плануєте переміщувати. 3814 | - Визначте обробники подій для початку та завершення перетягування. 3815 | 3816 | #### 2) Управління станом: 3817 | 3818 | Створіть стан, який зберігатиме інформацію про перетягуваний елемент, його початкові координати тощо. 3819 | 3820 | #### 3) Додавання обробників подій: 3821 | 3822 | - Додайте обробник події `onDragStart` для елемента, який буде перетягуватися. У цьому обробнику встановіть дані про елемент, що перетягується, у стан, використовуючи функцію `setData` та `event.dataTransfer`. 3823 | - Додайте обробники `onDragOver` та `onDrop` для контейнера, куди ви збираєтеся переміщати елементи. В обробнику `onDragOver` запобігайте дії за замовчуванням, щоб дозволити перетягування, і в обробнику `onDrop` обробіть перетягування елемента. 3824 | 3825 | Приклад: 3826 | 3827 | ```jsx 3828 | import React, { useState } from "react"; 3829 | 3830 | function DraggableElement({ text }) { 3831 | const handleDragStart = (event) => { 3832 | event.dataTransfer.setData("text/plain", text); 3833 | }; 3834 | 3835 | return ( 3836 |

3837 | {text} 3838 |

3839 | ); 3840 | } 3841 | 3842 | function DroppableArea() { 3843 | const [droppedItems, setDroppedItems] = useState([]); 3844 | 3845 | const handleDragOver = (event) => { 3846 | event.preventDefault(); 3847 | }; 3848 | 3849 | const handleDrop = (event) => { 3850 | event.preventDefault(); 3851 | const droppedText = event.dataTransfer.getData("text/plain"); 3852 | setDroppedItems([...droppedItems, droppedText]); 3853 | }; 3854 | 3855 | return ( 3856 |

3861 | {droppedItems.map((item, index) => ( 3862 |

{item}

3863 | ))} 3864 |

3865 | ); 3866 | } 3867 | 3868 | function App() { 3869 | return ( 3870 |

3871 | 3872 | 3873 |

3874 | ); 3875 | } 3876 | 3877 | export default App; 3878 | ``` 3879 | 3880 | Це базовий приклад реалізації перетягування елементів у React. Ви можете доповнити його стилями та додатковими функціями для поліпшення користувацького досвіду. 3881 | 3882 | [⬆ Повернутися до списку](#список-запитань) 3883 | 3884 | ### Що таке «обчислювані властивості» (computed properties) у контексті React? 3885 | 3886 | У контексті React «обчислювані властивості» зазвичай відносяться до техніки, яка дозволяє обчислювати значення властивостей компонента на основі інших значень або станів, використовуючи функції або обчислення. Це може бути корисно, коли вам потрібно проводити складні обчислення або маніпуляції з даними перед тим, як передати їх у компонент для відображення. 3887 | 3888 | Обчислювані властивості можна використовувати для: 3889 | 3890 | 1. **Перетворення даних:** Наприклад, ви можете використовувати обчислювані властивості, щоб перетворити дані, отримані з контексту, перед тим як відобразити їх у компоненті. 3891 | 3892 | 2. **Фільтрації даних:** Якщо у вас є масив даних у контексті, ви можете використовувати обчислювані властивості, щоб фільтрувати цей масив на основі певних умов, перш ніж передавати його компоненту. 3893 | 3894 | 3. **Агрегації даних:** Ви можете агрегувати дані з контексту, наприклад, підсумовуючи числові значення або об'єднуючи рядки, перед тим як відобразити їх у компоненті. 3895 | 3896 | 4. **Генерації динамічних посилань або URL:** Якщо у вас є дані, які потрібно використовувати для генерації динамічних посилань або URL, ви можете використовувати обчислювані властивості для створення потрібних значень. 3897 | 3898 | Приклад обчислюваної властивості: 3899 | 3900 | ```jsx 3901 | import React, { createContext, useContext } from "react"; 3902 | 3903 | const UserContext = createContext(); 3904 | 3905 | function UserProfile() { 3906 | const user = useContext(UserContext); 3907 | 3908 | // Обчислювана властивість для генерації повного імені користувача 3909 | const fullName = `${user.firstName} ${user.lastName}`; 3910 | 3911 | return ( 3912 |

3913 |

Профіль користувача

3914 |

Ім'я: {fullName}

3915 |

Вік: {user.age}

3916 |

3917 | ); 3918 | } 3919 | 3920 | function App() { 3921 | const user = { 3922 | firstName: "Микола", 3923 | lastName: "Чудовий", 3924 | age: 33, 3925 | }; 3926 | 3927 | return ( 3928 | 3929 | 3930 | 3931 | ); 3932 | } 3933 | 3934 | export default App; 3935 | ``` 3936 | 3937 | У цьому прикладі `fullName` - це обчислювальна властивість, яка формує повне ім'я користувача на основі даних з контексту. Це допомагає спростити компонент `UserProfile`, не вимагаючи передачі додаткових властивостей через пропси. 3938 | 3939 | [⬆ Повернутися до списку](#список-запитань) 3940 | 3941 | ### Як реалізувати «ледаче завантаження» (lazy loading) зображень у React? 3942 | 3943 | Для реалізації «ледачого завантаження» зображень у React ви можете скористатися атрибутом `loading` у елемента `img` або бібліотеками, як-от `react-lazyload` або вбудованим механізмом `React.lazy` у поєднанні з `Suspense`. 3944 | 3945 | #### Використання атрибута loading: 3946 | 3947 | HTML5 вводить атрибут `loading` для елемента `img`, який може приймати значення «lazy». Це вказує браузеру завантажувати зображення тільки при наближенні до нього на екрані. 3948 | 3949 | Приклад: 3950 | 3951 | ```jsx 3952 |

3953 | ``` 3954 | 3955 | #### Використання бібліотеки react-lazyload: 3956 | 3957 | Бібліотека `react-lazyload` надає компонент `LazyLoad`, який можна обернути навколо зображення або будь-якого іншого контенту, який ви хочете відкласти в завантаженні. 3958 | 3959 | Встановлення: 3960 | 3961 | ``` 3962 | npm install react-lazyload 3963 | ``` 3964 | 3965 | Приклад: 3966 | 3967 | ```jsx 3968 | import LazyLoad from "react-lazyload"; 3969 | 3970 | // ... 3971 | 3972 | 3973 |

3974 | ; 3975 | ``` 3976 | 3977 | #### Використання React.lazy і Suspense: 3978 | 3979 | Ви також можете використовувати `React.lazy` для ледачого завантаження компонентів, включаючи зображення, за допомогою динамічного імпорту. Це вимагає використання компонента `Suspense` для обробки очікування завантаження. 3980 | 3981 | Приклад: 3982 | 3983 | ```jsx 3984 | import React, { Suspense } from "react"; 3985 | 3986 | const LazyImage = React.lazy(() => import("./LazyImage")); 3987 | 3988 | function App() { 3989 | return ( 3990 |

3991 | {/* Усередині компонента Suspense вказуємо компонент, який ми чекаємо */} 3992 | Loading...

}> 3993 | 3994 | 3995 | 3996 | ); 3997 | } 3998 | 3999 | export default App; 4000 | ``` 4001 | 4002 | У цьому прикладі компонент `LazyImage` повинен використовувати `React.lazy` для динамічного завантаження зображення. 4003 | 4004 | [⬆ Повернутися до списку](#список-запитань) 4005 | 4006 | ### Що таке «рендер-пропси» (render props) та як вони використовуються? 4007 | 4008 | «Рендер-пропси» (render props) - це патерн у React, який дає змогу передавати компоненту функцію через пропси, яку потім використовують для визначення, що компонент має відмалювати. Це дає змогу створювати компоненти з гнучкішою та багаторазово використовуваною логікою. 4009 | 4010 | Принцип роботи рендер-пропсів: 4011 | 4012 | 1. Ви створюєте компонент, який приймає функцію як пропса. 4013 | 2. Усередині цього компонента ви викликаєте передану функцію, передаючи їй необхідні дані або стан. 4014 | 3. Функція, передана через пропси, вирішує, що саме рендерувати та повертає JSX для відображення. 4015 | 4016 | Приклад використання рендер-пропсів: 4017 | 4018 | ```jsx 4019 | import React from "react"; 4020 | 4021 | class MouseTracker extends React.Component { 4022 | constructor(props) { 4023 | super(props); 4024 | this.state = { x: 0, y: 0 }; 4025 | } 4026 | 4027 | handleMouseMove = (event) => { 4028 | this.setState({ x: event.clientX, y: event.clientY }); 4029 | }; 4030 | 4031 | render() { 4032 | return ( 4033 |

4034 | {/* Рендер-пропс використовується тут */} 4035 | {this.props.render(this.state)} 4036 |

4037 | ); 4038 | } 4039 | } 4040 | 4041 | // Використання компонента з рендер-пропсом 4042 | const App = () => ( 4043 |

4044 |

Mouse Position Tracker

4045 | ( 4047 |

4048 | Mouse position: {mouse.x}, {mouse.y} 4049 |

4050 | )} 4051 | /> 4052 |

4053 | ); 4054 | 4055 | export default App; 4056 | ``` 4057 | 4058 | У цьому прикладі `MouseTracker` приймає функцію через пропс `render`, яка визначає, що саме має бути намальовано всередині компонента `MouseTracker`. 4059 | 4060 | Патерн рендер-пропсів забезпечує більшу гнучкість, оскільки дозволяє перевикористовувати логіку компонента для різних сценаріїв. Він часто використовується для створення бібліотечних компонентів, які надають різні можливості, але залишають гнучкість у руках користувачів компонентів. 4061 | 4062 | [⬆ Повернутися до списку](#список-запитань) 4063 | 4064 | ### Як працює «ледаче завантаження» (lazy loading) сторонніх бібліотек у React? 4065 | 4066 | «Ледаче завантаження» сторонніх бібліотек у React використовує динамічний імпорт для відкладеного завантаження коду бібліотеки тільки тоді, коли він дійсно потрібен. Це допомагає зменшити початковий обсяг завантажуваного JavaScript, покращуючи продуктивність застосунку, особливо на повільних або обмежених мережах. 4067 | 4068 | Процес «ледачого завантаження» сторонніх бібліотек виглядає так: 4069 | 4070 | #### 1) Динамічний імпорт: 4071 | 4072 | Замість стандартного імпорту бібліотеки на початку файлу, ви використовуєте динамічний імпорт, який загортає імпорт у функцію, яка викликається лише за потреби. Це створює код-роздільник, який буде завантажений асинхронно під час виконання. 4073 | 4074 | Приклад: 4075 | 4076 | ```jsx 4077 | const MyComponent = () => { 4078 | const handleClick = async () => { 4079 | // Динамічний імпорт бібліотеки 4080 | const library = await import("my-library"); 4081 | // Тепер ви можете використовувати бібліотеку 4082 | library.doSomething(); 4083 | }; 4084 | 4085 | return ; 4086 | }; 4087 | ``` 4088 | 4089 | #### 2) React.lazy() і Suspense: 4090 | 4091 | Якщо ви хочете ліниво завантажити компонент React зі сторонньої бібліотеки, ви можете використовувати `React.lazy()` разом із компонентом `Suspense`. 4092 | 4093 | `React.lazy()` приймає функцію, яка повертає динамічний імпорт компонента. `Suspense` використовується для очікування завантаження ледачого компонента. 4094 | 4095 | Приклад: 4096 | 4097 | ```jsx 4098 | import React, { lazy, Suspense } from "react"; 4099 | 4100 | const LazyComponent = lazy(() => import("./LazyComponent")); 4101 | 4102 | const App = () => ( 4103 |

4104 | Loading...

}> 4105 | 4106 | 4107 | 4108 | ); 4109 | 4110 | export default App; 4111 | ``` 4112 | 4113 | #### 3) Webpack або інший інструмент збірки: 4114 | 4115 | Під час збірки проєкту інструменти на кшталт Webpack аналізуватимуть код і виявлятимуть динамічні імпорти. Вони створять окремі файли для цих частин коду, які будуть завантажуватися в міру необхідності. 4116 | 4117 | #### 4) Кешування: 4118 | 4119 | Один раз завантажений код бібліотеки може кешуватися, щоб уникнути повторного завантаження під час наступних запитів. 4120 | 4121 | З використанням «ледачого завантаження» сторонніх бібліотек ви зможете поліпшити початкове завантаження вашого застосунку, прискорити його роботу та зменшити навантаження на мережу, завантажуючи тільки той код, який дійсно необхідний. 4122 | 4123 | [⬆ Повернутися до списку](#список-запитань) 4124 | 4125 | ### Що таке «реактивне програмування» (reactive programming) у контексті React? 4126 | 4127 | «Реактивне програмування» (reactive programming) - це програмування, спрямоване на обробку потоків даних і подій за допомогою асинхронних і функціональних конструкцій. У контексті React, реактивне програмування передбачає створення компонентів, які реагують на зміни даних та автоматично оновлюють інтерфейс користувача без явної участі розробника. 4128 | 4129 | У React реактивне програмування зазвичай пов'язане з концепцією «односпрямованого потоку даних» (unidirectional data flow) і «компонентів зі станом» (stateful components). Основними інструментами, які роблять реактивне програмування можливим у React, є стан компонентів і механізм рендерінгу. 4130 | 4131 | Коли стан компонента змінюється (наприклад, унаслідок користувацької взаємодії або асинхронних операцій), React автоматично оновлює візуальне представлення цього компонента, а також усіх дочірніх компонентів, які залежать від змінених даних. Це дає змогу розробникам створювати декларативні інтерфейси, описуючи, який вигляд має мати інтерфейс залежно від стану, і дає змогу React піклуватися про те, як оновлювати подання в разі зміни стану. 4132 | 4133 | Redux, MobX та інші бібліотеки управління станом також вносять концепції реактивного програмування в React, надаючи більш складні інструменти для управління даними та станом програми. 4134 | 4135 | #### Основні поняття реактивного програмування в контексті React: 4136 | 4137 | 1. Стан (State): Дані, які можуть змінюватися в процесі виконання програми. 4138 | 4139 | 2. Ререндерінг (Re-rendering): Процес оновлення візуального представлення компонента на основі змін його стану або пропсів. 4140 | 4141 | 3. Пропси (Props): Дані, що передаються з батьківського компонента в дочірній компонент. 4142 | 4143 | 4. Односпрямований потік даних (Unidirectional Data Flow): Концепція, за якої дані поширюються від верхніх компонентів до нижніх, а зміни відбуваються через оновлення стану. 4144 | 4145 | 5. Зміна стану (State Mutation): Процес зміни даних, що зберігаються в стані компонента. Важливо робити зміни незмінними, щоб React міг правильно визначати, коли потрібно оновлювати компоненти. 4146 | 4147 | Реактивне програмування допомагає керувати складними інтерфейсами та даними, що динамічно змінюються, забезпечуючи декларативність та ефективність у розробці інтерфейсів на основі React. 4148 | 4149 | [⬆ Повернутися до списку](#список-запитань) 4150 | 4151 | ### Як обробляти помилки під час використання хуків (hooks) у React? 4152 | 4153 | Обробка помилок під час використання хуків у React передбачає різні підходи залежно від ситуації. Ось кілька способів, як можна обробляти помилки під час роботи з хуками: 4154 | 4155 | #### 1) Використання try/catch всередині компонента: 4156 | 4157 | Усередині функціонального компонента можна використовувати блок try/catch для лову помилок, що виникають усередині хука. 4158 | 4159 | ```jsx 4160 | import React, { useState } from 'react'; 4161 | 4162 | function MyComponent() { 4163 | try { 4164 | const [value, setValue] = useState(''); 4165 | 4166 | // ... 4167 | 4168 | } catch (error) { 4169 | // Обробка помилок 4170 | console.error('Error:', error); 4171 | } 4172 | 4173 | return ( 4174 | // ... 4175 | ); 4176 | } 4177 | ``` 4178 | 4179 | #### 2) Використання componentDidCatch: 4180 | 4181 | Якщо компонент містить інші компоненти з помилками (наприклад, хуки, які викликаються всередині дочірніх компонентів), ви можете використовувати метод життєвого циклу `componentDidCatch` для опрацювання помилок. 4182 | 4183 | ```jsx 4184 | import React, { Component } from "react"; 4185 | 4186 | class ErrorBoundary extends Component { 4187 | constructor(props) { 4188 | super(props); 4189 | this.state = { hasError: false }; 4190 | } 4191 | 4192 | componentDidCatch(error, info) { 4193 | this.setState({ hasError: true }); 4194 | console.error("Error:", error); 4195 | } 4196 | 4197 | render() { 4198 | if (this.state.hasError) { 4199 | return

Something went wrong.

; 4200 | } 4201 | return this.props.children; 4202 | } 4203 | } 4204 | 4205 | export default ErrorBoundary; 4206 | ``` 4207 | 4208 | Використовуйте цей компонент-обгортку для ваших компонентів, де можливі помилки. 4209 | 4210 | #### 3) Custom Hook для обробки помилок: 4211 | 4212 | Ви можете створити власний хук для обробки помилок і використовувати його у ваших компонентах. 4213 | 4214 | ```jsx 4215 | import { useState } from "react"; 4216 | 4217 | function useErrorHandler() { 4218 | const [error, setError] = useState(null); 4219 | 4220 | const handleError = (error) => { 4221 | setError(error); 4222 | console.error("Error:", error); 4223 | }; 4224 | 4225 | const clearError = () => { 4226 | setError(null); 4227 | }; 4228 | 4229 | return [error, handleError, clearError]; 4230 | } 4231 | 4232 | export default useErrorHandler; 4233 | ``` 4234 | 4235 | #### 4) Бібліотеки для обробки помилок: 4236 | 4237 | Існують такі бібліотеки, як `react-error-boundary`, які надають компоненти для зручнішого оброблення помилок і виведення інформації про помилки в інтерфейсі. 4238 | 4239 | Обробка помилок під час використання хуків у React може залежати від конкретної ситуації та архітектури вашого застосунку. Важливо мати механізми для виявлення та відображення помилок, щоб зробити користувацький досвід більш інформативним і зрозумілим. 4240 | 4241 | [⬆ Повернутися до списку](#список-запитань) 4242 | 4243 | ### Що таке «інкапсуляція стану» (state encapsulation) у React? 4244 | 4245 | Інкапсуляція стану в React означає, що стан компонента, як-от дані, що можуть змінюватися в процесі виконання, підтримується та керується тільки всередині компонента та не доступний безпосередньо ззовні. Це дає змогу створювати компоненти з чітко визначеними інтерфейсами, через які взаємодія зі станом здійснюється шляхом виклику методів або звернення до певних властивостей. 4246 | 4247 | Інкапсуляція стану в React досягається шляхом використання внутрішнього стану компонента за допомогою `useState` або `this.state` (у класових компонентах). Компонент самостійно керує змінами свого стану та може вирішувати, коли та як оновлювати DOM на основі цього стану. 4248 | 4249 | Цей підхід сприяє модульності та покращує керованість коду. Компоненти можуть бути легко перевикористані, оскільки їхній внутрішній стан не впливає на інші компоненти. Зовнішні компоненти можуть взаємодіяти з внутрішнім станом через передачу props або виклики функцій-колбеків, які компонент надає. 4250 | 4251 | [⬆ Повернутися до списку](#список-запитань) 4252 | 4253 | ### Як реалізувати анімований перехід між компонентами в React Native? 4254 | 4255 | Для реалізації анімованих переходів між компонентами в React Native ви можете використовувати бібліотеки навігації або анімації. Ось приклади двох популярних способів: 4256 | 4257 | #### React Navigation з анімаціями: 4258 | 4259 | React Navigation - це популярна бібліотека для навігації в React Native, яка також підтримує анімовані переходи між екранами. Ви можете використовувати різні типи анімацій, такі як стандартні переходи, карусельні анімації тощо. Ось як це може виглядати: 4260 | 4261 | ```jsx 4262 | import { createAppContainer, createStackNavigator } from "react-navigation"; 4263 | 4264 | const StackNavigator = createStackNavigator( 4265 | { 4266 | Screen1: { screen: Screen1Component }, 4267 | Screen2: { screen: Screen2Component }, 4268 | }, 4269 | { 4270 | transitionConfig: () => ({ 4271 | screenInterpolator: (sceneProps) => { 4272 | // Тут ви можете визначити свою кастомну анімацію 4273 | // на основі sceneProps (інформація про поточний і попередній екрани) 4274 | }, 4275 | }), 4276 | } 4277 | ); 4278 | 4279 | const AppContainer = createAppContainer(StackNavigator); 4280 | export default AppContainer; 4281 | ``` 4282 | 4283 | #### React Native Navigation з анімаціями: 4284 | 4285 | React Native Navigation - це інша популярна бібліотека для навігації в React Native. Вона також надає можливість налаштовувати анімації при переходах між екранами. Приклад: 4286 | 4287 | ```jsx 4288 | import { Navigation } from "react-native-navigation"; 4289 | 4290 | Navigation.setRoot({ 4291 | root: { 4292 | stack: { 4293 | children: [ 4294 | { 4295 | component: { 4296 | name: "Screen1", 4297 | }, 4298 | }, 4299 | ], 4300 | }, 4301 | }, 4302 | }); 4303 | 4304 | // В іншому місці, де ви налаштовуєте екрани 4305 | Navigation.registerComponent("Screen1", () => Screen1Component); 4306 | Navigation.registerComponent("Screen2", () => Screen2Component); 4307 | ``` 4308 | 4309 | Обидва ці способи надають безліч можливостей для налаштування анімацій. Ви можете задавати свої власні анімації, використовуючи CSS-подібні властивості, або навіть під'єднувати бібліотеки для складніших анімацій. Важливо ознайомитися з документацією кожної бібліотеки, щоб зрозуміти, як реалізувати конкретні анімації, які ви хочете використовувати. 4310 | 4311 | [⬆ Повернутися до списку](#список-запитань) 4312 | 4313 | ### Що таке «стабільні ідентифікатори» (stable keys) і навіщо вони потрібні в React? 4314 | 4315 | Стабільні ідентифікатори, також відомі як «стабільні ключі» або «ключі з постійним значенням» (stable keys), у контексті React відносяться до значень, які використовуються як ключі під час рендерингу списків компонентів. Ці ключі повинні залишатися постійними для кожного елемента списку під час змін у даних, які впливають на рендеринг. 4316 | 4317 | У React, коли ви візуалізуєте список компонентів з використанням `map()` або інших методів, кожному елементу в списку потрібно присвоїти унікальний ключ. Ключі допомагають React визначити, які елементи були додані, видалені або змінені в списку. Це дає змогу React ефективно оновлювати тільки ті частини DOM, які змінилися, замість повного перемальовування всього списку. 4318 | 4319 | Значення ключів мають бути стабільними та унікальними для кожного елемента списку. Один із поширених підходів - використання унікальних ідентифікаторів із даних елементів як ключів. Наприклад: 4320 | 4321 | ```jsx 4322 | function ItemList({ items }) { 4323 | return ( 4324 |

{item.name}

4329 | ); 4330 | } 4331 | ``` 4332 | 4333 | Тут `item.id` слугує стабільним ідентифікатором (ключем) для кожного елемента списку. Якщо дані в `items` зміняться, React зможе ефективно оновити тільки відповідні елементи. 4334 | 4335 | Використання стабільних ключів важливе для оптимізації продуктивності, оскільки неправильне або змінне використання ключів може призвести до непотрібного перемальовування компонентів і погіршення продуктивності під час оновлення списків. 4336 | 4337 | [⬆ Повернутися до списку](#список-запитань) 4338 | 4339 | ### Як оновити стан компонента після зміни props? 4340 | 4341 | У React існує кілька способів оновлення стану компонента після зміни його props. Це може знадобитися, коли компонент залежить від вхідних props і має реагувати на їхні зміни. Ось кілька підходів: 4342 | 4343 | ####1) componentDidUpdate(prevProps): 4344 | 4345 | Метод `componentDidUpdate()` викликається після оновлення компонента. Ви можете порівняти попередні та поточні props за допомогою параметра `prevProps` та `this.props`, і за необхідності оновити стан: 4346 | 4347 | ```jsx 4348 | componentDidUpdate(prevProps) { 4349 | if (this.props.someProp !== prevProps.someProp) { 4350 | this.setState({ someState: newValue }); 4351 | } 4352 | } 4353 | ``` 4354 | 4355 | #### 2) getDerivedStateFromProps(nextProps, prevState): 4356 | 4357 | Цей статичний метод викликається перед візуалізацією та щоразу, коли відбувається оновлення props. Ви можете повернути новий стан на основі нових props: 4358 | 4359 | ```jsx 4360 | static getDerivedStateFromProps(nextProps, prevState) { 4361 | if (nextProps.someProp !== prevState.prevPropValue) { 4362 | return { someState: newValue }; 4363 | } 4364 | return null; 4365 | } 4366 | ``` 4367 | 4368 | #### 3) useState з useEffect: 4369 | 4370 | Якщо ви використовуєте функціональні компоненти, ви можете використовувати `useState` для зберігання стану та `useEffect` для реагування на зміни props: 4371 | 4372 | ```jsx 4373 | import React, { useState, useEffect } from "react"; 4374 | 4375 | function MyComponent(props) { 4376 | const [state, setState] = useState(initialState); 4377 | 4378 | useEffect(() => { 4379 | if (props.someProp !== state.someState) { 4380 | setState({ someState: newValue }); 4381 | } 4382 | }, [props.someProp]); 4383 | 4384 | //... 4385 | } 4386 | ``` 4387 | 4388 | Вибір підходу залежить від версії React та архітектури компонента. 4389 | 4390 | Наприклад, починаючи з React 16.3 рекомендується використовувати `getDerivedStateFromProps` для таких сценаріїв, але для функціональних компонентів з React Hooks, `useState` та `useEffect` можуть бути зручнішими. 4391 | 4392 | [⬆ Повернутися до списку](#список-запитань) 4393 | 4394 | ### Що таке «компоненти вищого порядку» (Higher-Order Components, HOC) у React? 4395 | 4396 | Компоненти вищого порядку (Higher-Order Components, HOC) - це популярний патерн у React, який використовується для повторного використання логіки компонентів. HOC - це функції, які приймають компонент і повертають новий компонент із додатковою функціональністю. 4397 | 4398 | Основна ідея HOC полягає в тому, щоб винести загальну логіку з компонентів і перенести її в окремі функції, які можна повторно використовувати на різних компонентах. Це допомагає поліпшити читабельність коду, зменшити дублювання коду та зробити компоненти більш специфічними для своєї ролі. 4399 | 4400 | Приклад HOC може виглядати так: 4401 | 4402 | ```jsx 4403 | // Приклад HOC, який додає обгортку навколо компонента та логіку обробки кліка 4404 | function withClickHandling(WrappedComponent) { 4405 | return class WithClickHandling extends React.Component { 4406 | handleClick = () => { 4407 | // Загальна логіка обробки кліка 4408 | }; 4409 | 4410 | render() { 4411 | return ; 4412 | } 4413 | }; 4414 | } 4415 | 4416 | // Використання HOC для обертання компонента 4417 | const ButtonWithClickHandling = withClickHandling(Button); 4418 | ``` 4419 | 4420 | У цьому прикладі `withClickHandling` - це HOC, який приймає компонент `Button` та повертає новий компонент `ButtonWithClickHandling`, обгорнутий логікою обробки кліка. Тепер `ButtonWithClickHandling` матиме додаткову властивість `onClick`, додану з HOC. 4421 | 4422 | Ключова ідея полягає в тому, що ви можете створювати безліч таких HOC для різної загальної логіки та багаторазово застосовувати їх до різних компонентів. Це покращує модульність, перевикористовуваність і забезпечує чистішу архітектуру програми. 4423 | 4424 | [⬆ Повернутися до списку](#список-запитань) 4425 | 4426 | ### Які є патерни для роботи з асинхронністю в React? 4427 | 4428 | Роботу з асинхронністю в React можна вирішити за допомогою різних патернів. Деякі з них включають: 4429 | 4430 | 1. **Callback-функції:** Компонент передає callback-функції в дочірні компоненти, які викликаються після завершення асинхронної операції. Однак це може призвести до проблем, таких як «колбек-ад» (callback hell), коли вкладеність стає занадто глибокою. 4431 | 4432 | 2. **Проміси (Promises):** Використання промісів дає змогу більш структуровано організувати асинхронний код та уникнути колбек-аду. Можна використовувати .then() для обробки успішного виконання та .catch() для обробки помилок. 4433 | 4434 | 3. **Async/await:** Цей синтаксичний цукор дає змогу писати асинхронний код так, ніби це синхронний. З функцією, оголошеною як async, можна використовувати оператор await, щоб очікувати завершення промісу. 4435 | 4436 | 4. **Redux Thunk:** Для управління асинхронними операціями в Redux можна використовувати middleware Redux Thunk. Він дозволяє диспетчеру Redux обробляти функції замість дій, що спрощує виконання асинхронних завдань. 4437 | 4438 | 5. **React-Query:** Це бібліотека, яка полегшує управління станом та асинхронними запитами в додатку React. Вона надає хуки та компоненти для роботи з даними, кешування та інвалідації. 4439 | 4440 | 6. **RxJS:** Для складніших сценаріїв роботи з асинхронністю можна використовувати бібліотеку RxJS. Вона реалізує реактивне програмування та дає змогу створювати потоки даних, які можна обробляти та комбінувати. 4441 | 4442 | 💡 Пам'ятайте, що вибір патерну залежить від конкретних вимог вашого проєкту та рівня складності асинхронної логіки. 4443 | 4444 | [⬆ Повернутися до списку](#список-запитань) 4445 | 4446 | ### Що таке «реактивний потік даних» (reactive data flow) у контексті React? 4447 | 4448 | «Реактивний потік даних» - це концепція з реактивного програмування, яка стала популярною в контексті бібліотеки RxJS та інших реактивних бібліотек. У контексті React це стосується способу організації та управління даними та їхніми змінами в застосунку. 4449 | 4450 | Основна ідея реактивного потоку даних полягає в тому, що компоненти реагують на зміни даних автоматично, без необхідності явно вказувати, яким чином оновлювати інтерфейс під час зміни даних. Замість того щоб імперативно оновлювати UI під час зміни стану, реактивна система автоматично оновлює UI під час зміни даних. 4451 | 4452 | #### Патерни для реалізації «реактивного потоку даних»: 4453 | 4454 | 1. **React-Redux:** За допомогою бібліотеки Redux, стан програми зберігається в єдиному сховищі, і компоненти підписуються на зміни цього стану. Коли стан змінюється, компоненти автоматично оновлюються. 4455 | 4456 | 2. **Hooks та Context API:** Із введенням хуків (наприклад, useState і useEffect) і Context API в React, компоненти можуть реагувати на зміни стану та контексту без явної підписки на них. 4457 | 4458 | 3. **React Query:** Бібліотека React Query надає реактивні хуки для роботи з даними, автоматично керуючи кешуванням та оновленнями даних. 4459 | 4460 | 4. **RxJS та observables**: RxJS дає змогу створювати та маніпулювати потоками даних за допомогою observables. Це можна використовувати для більш складних сценаріїв управління реактивним потоком даних. 4461 | 4462 | Загалом, реактивний потік даних у контексті React прагне спростити й автоматизувати оновлення призначеного для користувача інтерфейсу у відповідь на зміни даних, що сприяє передбачуванішому й ефективнішому управлінню станом застосунку. 4463 | 4464 | [⬆ Повернутися до списку](#список-запитань) 4465 | 4466 | ### Що таке Next.js, і різниця між Next.js і React? 4467 | 4468 | Next.js - це фреймворк, заснований на React, який надає інфраструктуру для створення серверно-рендеренних або статично генерованих веб-додатків і сайтів. Основна відмінність Next.js від стандартного React у тому, що він додає додаткові можливості та концепції, які не входять до стандартного набору React. 4469 | 4470 | #### Особливості Next.js порівняно з React: 4471 | 4472 | - **Серверний рендеринг (SSR):** Дозволяє генерувати HTML на сервері для кожного запиту, що покращує індексацію пошуковими системами і початкове завантаження сторінки для користувачів. 4473 | 4474 | - **Статична генерація (SSG):** Next.js може генерувати HTML під час складання і розміщувати його на CDN. Це ідеально підходить для блогів, документації та будь-яких сторінок, де контент змінюється нечасто. 4475 | 4476 | - **File-based Routing:** У Next.js маршрутизація керується через структуру файлів у папці pages. Кожен React компонент у цій папці автоматично стає доступним як веб-сторінка. 4477 | 4478 | - **Підтримка API Routes:** Next.js дає змогу легко створювати API маршрути, що спрощує побудову бекенд логіки всередині того самого проєкту. 4479 | 4480 | - **Оптимізація зображень:** Має вбудовану підтримку для оптимізації зображень за допомогою компонента Image. 4481 | 4482 | - **Динамічний імпорт і Code Splitting:** Автоматично розділяє код на частини (chunks) і завантажує їх у міру необхідності, що покращує продуктивність. 4483 | 4484 | Приклад використання Next.js 4485 | 4486 | ```jsx 4487 | // pages/index.js — головна сторінка вашого сайту 4488 | import Head from "next/head"; 4489 | import Image from "next/image"; 4490 | 4491 | export default function Home() { 4492 | return ( 4493 |

4494 | 4495 | Ласкаво просимо в Next.js! 4496 | 4497 | 4498 |

Ласкаво просимо в Next.js!

4499 | 4500 | {/* Оптимізація зображень за допомогою компонента Image */} 4501 | Опис зображення

4507 |

4508 | ); 4509 | } 4510 | ``` 4511 | 4512 | #### Різниця між Next.js і React: 4513 | 4514 | - **React** - це бібліотека для створення користувацьких інтерфейсів, яка фокусується на компонентах та їхньому життєвому циклі. 4515 | 4516 | - **Next.js** - це фреймворк, який побудований на React і надає додаткові абстракції, такі як маршрутизація, оптимізація та API маршрути, роблячи його повноцінним рішенням для веб-розробки. 4517 | 4518 | Таким чином, якщо вам потрібно швидко створити веб-сайт із підтримкою SEO, з оптимізованими зображеннями, швидким завантаженням і простою маршрутизацією, Next.js є чудовим вибором. React же підходить, якщо ви хочете повний контроль над процесом складання застосунку і готові самостійно вирішувати питання, з якими Next.js допомагає «з коробки». 4519 | 4520 | [⬆ Повернутися до списку](#список-запитань) 4521 | -------------------------------------------------------------------------------- /github-react-questions-main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getFrontend/react-100-questions-ua/fafcb74f6d04bc14b03377ec84a5da79893a4166/github-react-questions-main.jpg --------------------------------------------------------------------------------

Привіт, {name}

Вітаю, {props.name}!

Вітаємо вас на нашому сайті!

Будь ласка, увійдіть до системи!

Привіт, Сергій!

Будь ласка, авторизуйтеся на сайті.

Fetched Data

Мій застосунок

Модальне вікно

Батьківський компонент

Профіль користувача

Mouse Position Tracker

Ласкаво просимо в Next.js!