Skip to content

Instantly share code, notes, and snippets.

View sunmeat's full-sized avatar
🐈
MEOW

Oleksandr Zahoruiko sunmeat

🐈
MEOW
View GitHub Profile
@sunmeat
sunmeat / App.jsx
Created May 30, 2025 11:59
GET fetch API example REACT
import React, {useState} from 'react';
const PixabaySearch = () => {
const [query, setQuery] = useState('nature');
const [imageType, setImageType] = useState('photo');
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const apiKey = '50059311-67b92461e0c6542f48deaee0e';
@sunmeat
sunmeat / App.jsx
Created May 30, 2025 11:47
отправка данных формы методом POST XMLHttpRequest REACT
import React, {useState} from 'react';
const PetForm = () => {
const [formData, setFormData] = useState({
name: '',
status: 'available',
category: '',
tags: '',
photos: [],
});
@sunmeat
sunmeat / App.jsx
Created May 30, 2025 11:42
получение файлов + демо POST метода для XMLHttpRequest REACT
import React, {useState} from 'react';
const App = () => {
const textUrl = 'https://gist.githubusercontent.com/sunmeat/5120f241ab0f407138b7c1dc479a2f02/raw/a01e873da40a27bada0192e4e75e632586623329/index.html';
const imageUrl = 'https://raw.githubusercontent.com/sunmeat/gallery/main/MyApplication/cats/cat%20(1).jpg';
const jsonObjectUrl = 'https://jsonplaceholder.typicode.com/users/1';
const jsonArrayUrl = 'https://jsonplaceholder.typicode.com/posts';
const postUrl = 'https://petstore.swagger.io/v2/pet';
const [text, setText] = useState('');
@sunmeat
sunmeat / App.jsx
Created May 30, 2025 11:39
GET XmlHttpRequest example REACT
import {useState} from 'react';
const apiKey = '50059311-67b92461e0c6542f48deaee0e';
function App() {
const [query, setQuery] = useState('nature');
const [imageType, setImageType] = useState('photo');
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
@sunmeat
sunmeat / different files.jsx
Created May 29, 2025 12:55
useContext - авторизация на сайте
App.jsx:
import React, {createContext, useContext, useState} from 'react';
import './App.css';
// контекст аутентификации
const AuthContext = createContext();
// провайдер контекста аутентификации
function AuthProvider({children}) {
@sunmeat
sunmeat / different files.jsx
Created May 29, 2025 12:19
useContext - тема приложения
App.jsx:
import React, {createContext, useContext, useState} from 'react';
import './App.css';
// контекст для темы
const ThemeContext = createContext();
/* ThemeContext используется для хранения текущей темы (theme) и функции переключения (toggleTheme),
которые передаются всем компонентам через ThemeContext.Provider в компоненте App
@sunmeat
sunmeat / different files
Created May 29, 2025 11:39
useReducer - разные модули приложения
// cartReducer.jsx
const initialCartState = {
items: [],
total: 0,
};
function cartReducer(state, action) {
switch (action.type) {
case 'ADD_ITEM':
return {
@sunmeat
sunmeat / different files.jsx
Last active July 1, 2025 13:37
useReducer - прогноз погоды
App.jsx:
import { useReducer, useEffect, useState } from 'react';
import './App.css';
// начальное состояние
const initialState = {
loading: false,
data: null,
error: null,
@sunmeat
sunmeat / different files.jsx
Created May 29, 2025 11:16
useReducer - инсталлятор
App.jsx:
import {useEffect, useReducer, useRef, useState} from 'react';
import './App.css';
// начальное состояние
const initialState = {
step: 1,
components: {
core: true,
@sunmeat
sunmeat / different files.jsx:
Created May 29, 2025 09:41
простой пример на редюсер
App.jsx:
import {useReducer} from 'react';
import './App.css';
// начальное состояние
const initialState = {
count: 0,
};