Показать страницуИстория страницыСсылки сюдаODT преобразованиеНаверх Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно. ====== 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 у ВЖЕ існуючій папці, то в якості назви проетку треба вказати . (точка), бо по факту назва проекта - то буде нова папка куди покладутся нові файли * [[Створення посилання повернення на попередню адресу сторінки]] /sites/data/pages/react.txt Последнее изменение: 2024/08/18 09:24 — tro