Ruthenus

5 followers · 8 following

View GitHub Profile

Recently created

Least recently created

Recently updated

Least recently updated

sunmeat / index.html

Last active September 17, 2025 22:20

робота з файлами HTML5 Files API

	<!DOCTYPE html>
	<html lang="uk">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Робота з файлами</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	max-width: 800px;

sunmeat / different files

Last active September 17, 2025 22:35

робота з файлами через Node.js

	1. встановити node.js за посиланням https://nodejs.org/en

	2. виконати такі команди в терміналі git bash:
	cd C:/Users/Alex/Desktop
	mkdir file-server
	cd file-server
	npm init -y
	npm install express multer
	mkdir public
	mkdir uploads

sunmeat / different files.jsx

Last active October 1, 2025 19:35

умовний рендеринг

	App.jsx:

	import React, { useState, useEffect } from 'react';
	import './App.css';

	function App() {
	const [isLoggedIn, setIsLoggedIn] = useState(false); // початковий стан авторизації
	const [isReady, setIsReady] = useState(false); // стан готовності компоненти

	// імітація завантаження даних, тут може бути прелоадер

sunmeat / different files.jsx

Last active October 26, 2025 19:56

react useRef extended example

	App.jsx:

	// npm install framer-motion chart.js react-chartjs-2 three @react-three/fiber
	import React, {useRef, useEffect, useState} from 'react';
	import {motion, useAnimation} from 'framer-motion'; // motion використовується неявно для створення анімації, тому ESLint йде геть :)
	import {Canvas, useFrame} from '@react-three/fiber';
	import * as THREE from 'three'; // імпортуємо весь модуль бібліотеки Three.js і присвоюємо його об’єкту з ім’ям THREE
	import {Line} from 'react-chartjs-2';
	import {
	Chart as ChartJS,

sunmeat / different files.jsx

Last active October 26, 2025 21:14

useEffect з підпискою на Websocket, оновленням тайтла та логуванням

	App.jsx:

	import { useState, useEffect, useRef } from 'react';
	import './App.css';

	function App() {
	const [messages, setMessages] = useState([]);
	const [unreadCount, setUnreadCount] = useState(0);
	const [log, setLog] = useState([]);
	const ws = useRef(null);

sunmeat / different files.jsx

Last active October 27, 2025 18:39

useReducer - покроковий візард (багатоетапна форма)

	App.jsx:

	import {useEffect, useReducer, useRef, useState} from 'react';
	import './App.css';

	// початковий стан
	const initialState = {
	step: 1,
	components: {
	core: true,

sunmeat / different files.jsx

Last active October 27, 2025 18:38

useReducer - прогноз погоди

	App.jsx:

	import { useReducer, useEffect, useState } from 'react';
	import './App.css';

	// початковий стан
	const initialState = {
	loading: false,
	data: null,
	error: null,

sunmeat / different files.jsx

Last active October 27, 2025 18:58

useContext - автентифікація

	App.jsx:

	import React, {createContext, useContext, useState} from 'react';
	import './App.css';

	// контекст автентифікації
	const AuthContext = createContext();

	// провайдер контексту автентифікації
	function AuthProvider({children}) {

sunmeat / different files.jsx

Last active October 28, 2025 19:56

react + php + mysql

	mysql table structure:

	USE 4115733_words; // your DB name here
	CREATE TABLE cart (
	id INT AUTO_INCREMENT PRIMARY KEY,
	product_id INT NOT NULL,
	title VARCHAR(255) NOT NULL,
	price DECIMAL(10, 2) NOT NULL,
	image VARCHAR(255) NOT NULL
	);

sunmeat / different files.jsx

Last active October 28, 2025 19:18

tanstack query example react

	App.jsx:

	import {useState} from 'react';
	import {QueryClient, QueryClientProvider, useQuery} from '@tanstack/react-query'; // npm install @tanstack/react-query
	import './App.css';

	// https://tanstack.com/query/latest

	// екземпляр QueryClient
	const queryClient = new QueryClient(); // https://tanstack.com/query/latest/docs/framework/react/quick-start