├── 5c4571a2fa1dbabf5da105be189e8c2c.gif ├── Axios.md ├── CheatsheetGit.md ├── Event.md ├── README.md ├── Redux.md ├── SQLSequlize.md └── ed939c081109b024f2ecd2d9ba4de04d.jpeg /5c4571a2fa1dbabf5da105be189e8c2c.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sabrenda/React-CSR/6f2f521357b38aae3982c3cbd0b007738e490368/5c4571a2fa1dbabf5da105be189e8c2c.gif -------------------------------------------------------------------------------- /Axios.md: -------------------------------------------------------------------------------- 1 |

axios Axios

2 | 3 | [⚙️ Menu](README.md) 4 | 5 | ### Ссылки: 6 | - GitHub: https://github.com/axios/axios 7 | - Web: https://axios-http.com/ 8 | 9 | ### Что такое Axios? 10 | **Axios** - это HTTP-клиент, основанный на Promise для node.js и браузера. Он изоморфный (= он может работать в браузере и node.js с той же базой кодов). На стороне сервера он использует нативный node.js http-модуль, тогда как на стороне клиента (браузер) он использует XMLHttpRequests. 11 | 12 | ### Особенности 13 | 14 | - Делает XMLHttpRequests запросы из браузера 15 | - Делает http запросы из node.js 16 | - Поддерживает Promise API 17 | - Перехватывает запросы и ответы 18 | - Преобразовывает данные запроса и ответа 19 | - Отменяет запросы 20 | - Автоматическое преобразование для JSON-данных 21 | - Поддержка на стороне клиента для защиты от XSRF 22 | 23 | ### Установка 24 | 25 | Если вы используете Node.js, установите его с помощью npm: 26 | - `npm install axios` 27 | 28 | Если вы работаете в браузере, вы можете добавить ссылку на CDN в ваш HTML файл: 29 | - `` 30 | 31 | --- 32 | 33 | ### Как использовать Axios: 34 | 35 | 1. Импортируйте Axios (если используете Node.js): 36 | ```js 37 | const axios = require('axios'); 38 | ``` 39 | 2. Выполните HTTP-запрос: 40 | 41 | GET-запрос: 42 | ```js 43 | axios.get('https://api.example.com/data') 44 | .then(response => { 45 | console.log(response.data); 46 | }) 47 | .catch(error => { 48 | console.error('Error:', error); 49 | }); 50 | ``` 51 | POST-запрос: 52 | ```js 53 | const data = { 54 | key1: 'value1', 55 | key2: 'value2' 56 | }; 57 | 58 | axios.post('https://api.example.com/data', data) 59 | .then(response => { 60 | console.log(response.data); 61 | }) 62 | .catch(error => { 63 | console.error('Error:', error); 64 | }); 65 | ``` 66 | 3. Обрабатывайте ответ сервера внутри функции **.then()** и ошибки с помощью функции **.catch()**. 67 | 68 | Axios также предоставляет другие возможности, такие как настройка базового URL, использование промежуточного обработчика (interceptors), отмена запросов, установка таймаутов и т. д. 69 | 70 | --- 71 | 72 | ### Пример работы в React: 73 | 74 | ```js 75 | import React, { useState, useEffect } from 'react'; 76 | import axios from 'axios'; 77 | 78 | const ExampleComponent = () => { 79 | const [data, setData] = useState([]); 80 | 81 | useEffect(() => { 82 | const fetchData = async () => { 83 | try { 84 | const response = await axios.get('https://api.example.com/data'); 85 | setData(response.data); 86 | } catch (error) { 87 | console.error('Error:', error); 88 | } 89 | }; 90 | 91 | fetchData(); 92 | }, []); // Пустой массив зависимостей означает, что запрос будет выполнен только при монтировании компонента 93 | 94 | return ( 95 |
96 | {data.map(item => ( 97 |
98 | {/* Отображение данных */} 99 |
100 | ))} 101 |
102 | ); 103 | }; 104 | 105 | export default ExampleComponent; 106 | ``` 107 | 108 | В этом примере: 109 | 110 | 1. Мы импортируем React, useState, useEffect и axios. 111 | 2. Создаем состояние data для хранения данных, полученных с сервера. 112 | 3. Внутри useEffect, объявляем асинхронную функцию fetchData, которая выполняет HTTP-запрос с помощью Axios. 113 | 4. Вызываем функцию fetchData для выполнения запроса при монтировании компонента. 114 | 5. Обрабатываем полученные данные и ошибки с помощью try и catch. 115 | 6. Отображаем данные в пользовательском интерфейсе. 116 | 117 | Обратите внимание, что этот пример использует асинхронные функции и await для обработки промисов. Если вы предпочитаете использовать методы .then() и .catch(), вы также можете адаптировать пример для этого стиля. 118 | -------------------------------------------------------------------------------- /CheatsheetGit.md: -------------------------------------------------------------------------------- 1 | # Git :octocat: 2 | [⚙️ Menu](README.md) 3 | 4 | ### Работа в команде 1. 5 | ```c 6 | Тим лид fork проекта (если он есть) 7 | Тим лид клонирует себе репозиторий и выполняет первичную настройку 8 | Тим лид раздаёт роли и ставит адекватные задачи 9 | Тим лид делает 10 | git add -A // добавляем изменения 11 | git commit -m "initial commit" // добавляем комментарий 12 | git push origin main (или master) // стягиваем все последние изменения на ветке 13 | 14 | Работа каждого члена команды: 15 | git clone 16 | git checkout -b BRANCHNAME // создание своей ветки из ветки в которой находишься (без флага -b будет просто переход на данную ветку) 17 | пишете код ... 18 | git add -A // добавляем изменения 19 | git commit -m "MESSAGE" // добавляем комментарий 20 | git checkout main (или master) // переходим на main 21 | git pull origin main (или master) // стягиваем все последние изменения на ветке 22 | Разрешаете конфликты 23 | git checkout BRANCHNAME // переходим на нашу ветку 24 | git merge main (master) // мерджим с мейном 25 | git push origin BRANCHNAME // пушим на указанную ветку 26 | Открываете pull request на GitHub 27 | Просите тим лида принять pull request и выполнить слияние в main 28 | Чтобы продолжить кодировать: 29 | git checkout main 30 | git pull origin main 31 | продолжи с пункта 2 32 | ``` 33 | 34 | ### Способ 2. от Артема 35 | ```c 36 | Это флоу через ребэйз 37 | 38 | git checkout develop 39 | git fetch origin develop 40 | git checkout -b myBranch 41 | кодим 42 | git add . 43 | git commit -m "Made some changes on myBranch" 44 | тянем изменения с дева 45 | git fetch origin develop 46 | git rebase origin/develop 47 | если возникли конфликты - решаем их и потом 48 | git add . 49 | git rebase --continue 50 | git push origin myBranch 51 | 52 | А это через мердж 53 | 54 | git checkout develop 55 | git fetch origin develop 56 | git checkout -b myBranch 57 | кодим 58 | git add . 59 | git commit -m "Made some changes on myBranch" 60 | тянем апдейты с дева 61 | git fetch origin develop 62 | мерджим пришедшие изменения в нашу ветку 63 | git merge origin/develop 64 | если есть конфликты htiftv потом 65 | git add . 66 | git commit -m "Resolved conflicts" 67 | 68 | git push origin myBranch 69 | ``` 70 | 71 | ### Доп 72 | 73 | ```c 74 | git merge --abort // отменить мердж когда находитесь в процессе слияния или решаете конфликты 75 | $ git reset --soft HEAD~1 // если вы хотите откатиться на комит 76 | после можно проверить написав 77 | $ git log 78 | ``` 79 | -------------------------------------------------------------------------------- /Event.md: -------------------------------------------------------------------------------- 1 | ### [Event handlers] 2 | 3 | [⚙️ Menu](README.md) 4 | 5 | - Event handlers (обработчики событий) в React - это функции, которые вызываются при определенных событиях пользовательского интерфейса, таких как клики, нажатие клавиш, изменение формы и т. д. Они позволяют реагировать на действия пользователя и обновлять состояние или вызывать другие функции в ответ на эти действия. 6 | 7 | - В React обработчики событий привязываются к элементам DOM с использованием специальных свойств, которые называются событиями (events). Названия событий в React обычно состоят из двух частей: on + , где - имя события, например, Click, Change, Submit и т. д. 8 | 9 | 1. События мыши: 10 | - onClick: клик по элементу 11 | - onDoubleClick: двойной клик по элементу 12 | - onMouseDown: нажатие кнопки мыши над элементом 13 | - onMouseMove: движение мыши над элементом 14 | - onMouseOut: курсор мыши выходит за пределы элемента 15 | - onMouseOver: курсор мыши наводится на элемент 16 | - onMouseUp: отпускание кнопки мыши над элементом 17 | 18 | 2. События клавиатуры: 19 | - onKeyDown: нажатие клавиши 20 | - onKeyPress: нажатие и удержание клавиши 21 | - onKeyUp: отпускание клавиши 22 | 23 | 3. События формы и элементов ввода: 24 | - onChange: изменение значения элемента ввода *(например, ``, `