react [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== REACT ======
===== Встановлення react через збірник vite у VSCode =====
  - [[vite|Встановити Vite]]
  - Встановити react
<code>
npm create vite@latest
</code>
P.S.Якщо створювати реакт через vite у ВЖЕ існуючій папці, то в якості назви проетку треба вказати . (точка), бо по факту назва проекта - то буде нова папка куди покладутся нові файли
===== Оновлення реакту =====
<code>
npm install react@latest 
</code>
===== Плагіни VSCode для react =====
[[es7_react_redux_react-native_snippets|ES7 + React/Redux/React-Native snippets]]
===== Бібліотеки react =====
  * [[CLSX - Бібліотека стандартизує роботу з CSS]]
  * [[React icons]]
  * [[https://mui.com/material-ui/|material-ui бібліотека стилів дизайнів для реакт]]
  * [[https://www.npmjs.com/package/nanoid|NanoId - генератор унікальніх номеров ид-шек]]
  * [[Formik - бібліотека роботи з формами у react]]
  * [[https://react-hook-form.com/|React-hook-form - бібліотека роботи з некерованими формами у react]]
  * [[Yup - Бібліотека для валідації \ перевірка введених користувачем]]
  * [[axios-http_prostij_http-klijent_alternativa_standartnomu_fetch_api|Бібліотека  Axios - простий HTTP-клієнт]]
  * [[https://mhnpd.github.io/react-loader-spinner/|React-loader Загрузчиики для реакта]]
  * [[https://medium.com/@umerfarooq.dev/transform-your-react-app-with-stunning-animated-backgrounds-d80fc0f7632b|animated-backgrounds - аніміровоні фони для react]]
  * [[https://react-hot-toast.com/|react-hot-toast Попапи\сповіщення]]
  * [[https://github.com/reactjs/react-modal?tab=readme-ov-file#examples|react-modal - модальні вікна для react]]
  * [[https://www.npmjs.com/package/react-helmet-async|react-helmet-async - дозволяє на сторінки додавати метатеги (title тощо)]]
  * [[React Router - Бібліотека маршрутизації для React]]
  * [[Reduce - Керування стейтами (базовий ванільний варіант)]]
  * [[Redux Toolkit - Керування стейтами (новий правильний варіант)]]
  * [[Persistor - синхронізація значень стейтів між Redux і локальним сховищем]]
  * [[createAsyncThunk - асинхронні запити в Redux Toolkit]]
===== Розширення для Браузерів =====
  * [[Redux DevTools - Інструменти розробника]]


===== Програмування в react =====
==== Умови ====
  * [[Оператор &&]]
  * [[Тернарний оператор]]
==== Колекції ====
  * [[map (react)]]
==== Стилі ====
  * [[Стилі (react)]]
  * [[Бібліоттека clsx]]
  * [[Використаня класа active в NavLink]]
==== Події ====
  * [[Обробка подій]]
  * [[Хук useState]]
  * [[Хук useEffect]]
  * [[Хук useId]]
  * [[Хук useRef]]
  * [[Хук useMemo]]
  * [[Хук useParams]]
  * [[Хук useNavigate]]
  * [[Хук useSearchParams]]
  * [[Хук useLocation]]
  * [[Хук useSelector]]
  * [[Отримання даних з форми react]]
  * [[React.lazy() та React.Suspense Динамічне завантаження модулів]]
==== Сховища react ====
  * [[Робота з LocalStorage у react]]
  * [[Redux Toolkit - Керування загальним сховищем стейтів]]
  * [[Persistor - синхронізація станів між redux і локальним сховищем]]

===== поради / іньше =====
  * [[https://react.dev/|Офіційна документація по react]]
  * rafce - сниппер для швидкого сформування структури модуля у реакті
  * [[Налаштування ESLint]]
  * [[Помилка при створенні реакт-додадку npm ERR! enoent ]]
  * Щоб повернути з модуоля декілька тегів - можна обгорнути у корневий ПУСТИЙ тег </>
  * Якщо створювати реакт через vite у ВЖЕ існуючій папці, то в якості назви проетку треба вказати . (точка), бо по факту назва проекта - то буде нова папка куди покладутся нові файли
  * [[Створення посилання повернення на попередню адресу сторінки]]