React helper

useState и useEffect са хукуве (hooks) в React.js, които се използват за управление на състоянието и ефекти във функционални компоненти.

useState: Този хук се използва за добавяне на състояние във функционален компонент. Той връща два елемента: текущата стойност на състоянието и функция, която може да се използва за промяна на това състояние. Например:

import React, { useState } from 'react';

function Example() {
  // Дефиниране на състояние
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Брояч: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличи брояча</button>
    </div>
  );
}


=======================================================================================================================


useEffect: Този хук се използва за извършване на действия, които са свързани с ефекти (като заявки към сървър, промяна на DOM и други), след като се актуализира компонента. Той позволява добавянето на функции, които ще се изпълнят след всяко обновяване на компонента или когато определени стойности (dependency) се променят. Например:

import React, { useState, useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Имитация на заявка към API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error(error));
  }, []); // [] означава, че този ефект се изпълнява само веднъж след монтажа на компонента

  return (
    <div>
      {data ? <p>Данни: {data}</p> : <p>Зареждане...</p>}
    </div>
  );
}

useState се използва за управление на локално състояние във функционални компоненти, докато useEffect се използва за управление на странни ефекти (side effects) или за извършване на действия след промяна на компонента.


=======================================================================================================================


Основни концепции:
Компоненти: React приложението е сглобено от компоненти - самостоятелни, многократно използваеми блокове на UI. Компонентите могат да бъдат функционални (function компоненти) или класови (class компоненти).

JSX (JavaScript XML): Синтактично разширение на JavaScript, което позволява декларативно изразяване на компонентите подобно на HTML в JavaScript файлове.

Virtual DOM: React използва виртуално DOM дърво за ефективно рендиране на UI, като актуализира само промените между текущото и предходното състояние на DOM.

Състояние (State): Използвайки useState хук (или в класовите компоненти с this.state), може да съхранявате и управлявате състоянието на компонента.

Пропс (Props): Пропсите са данни, които се предават от родителски компонент към децата му. Това позволява на компонентите да бъдат конфигурирани отвън.

Важни инструменти и концепции:
Хукуве (Hooks): useState, useEffect и други хукуве позволяват използването на състояние и ефекти във функционални компоненти.

Животен цикъл на компонентите: В класовите компоненти, методите като componentDidMount, componentDidUpdate и componentWillUnmount контролират животния цикъл на компонентите. Във функционалните компоненти, useEffect играе ролята на хук за животен цикъл.

Рутиране (Routing): За навигация в приложението може да се използва библиотека като React Router, която позволява дефиниране на маршрути и превключване между тях без презареждане на страницата.

Управление на Състоянието: За по-сложни приложения може да използвате библиотеки като Redux или Context API на React за управление на състоянието в целия приложенски изпълнител.

Тестване: React предоставя инструменти като Jest и Enzyme за тестване на компонентите и функционалността им.

Server-side Rendering (SSR) и Static Site Generation (SSG): React поддържа възможности за рендиране на страници на сървъра или генериране на статични сайтове, което може да подобри SEO и първоначалното зареждане на уеб приложенията.

Hooks оптимизации: При оптимизация на React приложения, важно е да се използват оптимизирани хукуве като useMemo, useCallback и други, за да се избегне ненужно пререндиране на компоненти.

Това са само някои от основните концепции и инструменти в React.js. Все пак, реакт е разнообразна библиотека и продължава да развива функционалности, така че е важно да следвате актуалната документация и добрите практики за изграждане на вашето приложение.


=======================================================================================================================


Мутиращи методи и функции:
Array.prototype.push(): Добавя елементи в края на масива, променяйки го.
Array.prototype.pop(): Премахва последния елемент от масива, променяйки го.
Array.prototype.splice(): Променя масива, като добавя/премахва елементи от него.
Array.prototype.shift() и Array.prototype.unshift(): Добавят или премахват елементи от началото на масива, променяйки го.
Object.assign(): Копира стойности от един обект към друг, като променя първия обект.

Немутиращи методи и функции:
Array.prototype.concat(): Създава нов масив като комбинира входните масиви, без да променя първоначалния.
Array.prototype.slice(): Връща нов масив, който е копие на част от съществуващия масив.
Array.prototype.map(): Създава нов масив, като прилага функция върху всеки елемент на оригиналния масив.
Array.prototype.filter(): Създава нов масив, като филтрира елементите на базата на предоставен критерий.
Array.prototype.slice(): Създава копие на част или целия масив.
Object.assign() с празен обект {} или операторът spread {...}: Създава нов обект, като обединява стойностите от други обекти, без да променя първоначалния обект.


=======================================================================================================================


HOC означава "Higher-Order Component" в React. Това е шаблон за проектиране, който се използва за повторно използване на логика в React компоненти. Higher-Order Component е функция, която приема компонент и връща нов компонент.

Основни характеристики на HOC:
Повторно използване на логика: HOC позволява извличането на обща логика или функционалност от компоненти и я инкапсулира в отделна функция. Това позволява многократно използване на тази логика в различни компоненти.

Обвиване на компоненти: HOC връща нов компонент, който може да обработва пропсовете или да добавя допълнителна функционалност към първоначалния компонент.

import React from 'react';

// Примерен HOC - добавящ "логин" функционалност към компонент
const withAuth = (WrappedComponent) => {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isLoggedIn: false,
      };
    }

    // Допълнителна логика за "логин"
    login = () => {
      this.setState({ isLoggedIn: true });
    };

    render() {
      // Проверка дали е логнат и предаване на пропсовете към оригиналния компонент
      return this.state.isLoggedIn ? (
        <WrappedComponent {...this.props} />
      ) : (
        <button onClick={this.login}>Login</button>
      );
    }
  };
};

// Компонент, който се използва и обвива с HOC
const MyComponent = (props) => {
  return <div>Логнат потребител: {props.username}</div>;
};

// Обвиване на компонента с HOC
const MyComponentWithAuth = withAuth(MyComponent);

// Използване на компонента, обвит с HOC
const App = () => {
  return <MyComponentWithAuth username="John" />;
};

export default App;


Този пример илюстрира HOC, който добавя функционалност за "логин" към компонента MyComponent. HOC withAuth създава нов компонент (MyComponentWithAuth), който добавя логика за проверка на логина преди рендиране на оригиналния компонент.