Коллеги, сделал конспектирование третьей главы Clean code (функции)
https://github.com/WebWoodProg/literature-analysis/blob/main/%D0%A7%D0%B8%D1%81%D1%82%D1%8B%D0%B9%20%D0%BA%D0%BE%D0%B4%20-%20%D0%A0%D0%BE%D0%B1%D0%B5%D1%80%D1%82%20%D0%9C%D0%B0%D1%80%D1%82%D0%B8%D0%BD.md

Syncthing https://syncthing.net/

Сегодня, столкнулся с необходимостью работы над одними и теми же файлами с нескольких устройств. Работа проходила в obsidian, о котором я писал выше. Суть в том чтобы писать контент в obsidian и иметь доступ ко всем данным и с ПК и с мобильного приложения. И чтобы это все синхронизировались автоматически при любом изменении. Был вариант делать все через github, благо есть плагин. Но тут два неудобства. 1-е не хочется засорять github или заводить новый, 2-е github ограничен объемом данных и плюс это все лежит где то в облаке. На помощь мне пришла программа SyncThing. Работает шикарно. Суть в том, что ты указываешь папки на устройствах и она синхронизирует данные в них на всех указанных устройствах. Теперь я делаю любые изменения в тексте или файлах на телефоне, и эти же изменения автоматически происходят и на компе. Так можно забыть о том что не хватает памяти на телефоне для хранения фото и видео и чего либо ещё, так как все будет скидываться на комп автоматически.

Коллеги, добавил четвертую главу (комментарии)
https://github.com/WebWoodProg/literature-analysis/blob/main/%D0%A7%D0%B8%D1%81%D1%82%D1%8B%D0%B9%20%D0%BA%D0%BE%D0%B4%20-%20%D0%A0%D0%BE%D0%B1%D0%B5%D1%80%D1%82%20%D0%9C%D0%B0%D1%80%D1%82%D0%B8%D0%BD.md#p4

Всем привет!
На этой неделе мы погрузимся во фронтенд. Поработаем с React. Рассмотрим полезные библиотеки.

Почему React, а не Angular или Vue?
Показываю наглядно...

Немного поясню данную диаграмму.
Вы конечно можете не согласиться и встретить на просторе интернета где angular опережает react, где Vue занимает долю менее 1%. Но... Обратите внимание! Это не диаграмма популярности библиотеки или фреймворка. Это процент созданных приложений с использованием соответствующей технологии. React практически всегда предпочтительнее чем Angular для создания маленьких проектов. Не спорю, что если мы берём огромный сервис, то для дальнейшего его поддержания и масштабирования выбирают Angular, но задайте себе вопрос, а каких проектов больше "китов" или "мелких рыбешек"? 🧐

Плагины, упрощающие разработку в VS Code:

Auto Complete Tag - автоматически закрывает теги, оформляет правильную табуляцию, быстро переименовывает теги с двух сторон.

Better comments - расширяет комментарии (добавляя новые стили и смысловой контекст стандартным комментариям)

Bracket Pair Color - раскрашивает скобки в зависимости от уровня вложенности

Easy icon - спец. иконки для разных расширений (вкусовщина)

ES7 + React - очень удобные сниппеты для работы с REACT

Google Fonts - шрифты Google

Live Server - запускает приложение на локальном сервере в реальном времени

Пишите в комментариях какими плагинами пользуетесь вы)

Всем привет✋
Сегодня продолжаем говорить про React. Обсудим создание проекта, его структуру и сборщики пакетов.

https://youtu.be/hq-gIihAs5A?si=cPPtl8aOxmbJ_zbH

Максимально раскрыл отличие данных пакетных менеджеров Михаил Башуров. Рекомендую видео к просмотру.

Этапы создания React приложения с помощью npm:

1. Установите Node.js, если у вас его еще нет, с официального сайта https://nodejs.org/.
2. Откройте командную строку или терминал.
3. Установите Create React App, выполнив команду:
  

   npm install -g create-react-app
   

4. Создайте новый проект React, перейдя в папку, где вы хотите создать проект, и выполнив команду:

      npx create-react-app my-react-app
   

   Замените my-react-app на имя вашего проекта.

5. После установки зависимостей выполните команду:
  

   cd my-react-app
   npm start
   

Это запустит ваше новое React приложение в режиме разработки.

И на последок рассмотрим одну из типовых структур папок для React приложения с использованием Redux и Api

- src
  - actions
    - actionTypes.js
    - actionCreators.js
  - reducers
    - rootReducer.js
    - someReducer.js
  - components
    - Component1
      - Component1.js
      - Component1.css
    - Component2
      - Component2.js
      - Component2.css
  - pages
    - Page1
      - Page1.js
      - Page1.css
    - Page2
      - Page2.js
      - Page2.css
  - services
    - apiService.js
  - store
    - configureStore.js
  - App.js
  - index.js


- actions содержит файлы для определения типов действий и создания действий,
- reducers содержит файлы для определения корневого редуктора и других редукторов,
- components содержит переиспользуемые компоненты,
- pages содержит компоненты, представляющие отдельные страницы приложения,
- services содержит файлы для работы с API,
- store содержит файл для конфигурации Redux-хранилища.

Всем привет!
Сегодня мы поговорим об основных элементах react приложения.
- функциональные и классовые компоненты
- props

Что такое компоненты в REACT?

По своей сути, это структурные блоки приложения из которых и строится весь интерфейс. Вся сладость в том, что данные блоки потом очень удобно переиспользовать сколько угодно раз.
Получается так, что REACT проект собирается как конструктор из данных блоков (компонентов).

Компоненты могут быть классовыми и функциональными. На данный момент, более современным подходом считается использование функциональных компонентов, но в некоторых проектах, когда нужно ввести логику работы с классами, используются и классовые.

Компоненты могут быть вложенными друг в друга. При этом каждый компонент обладает своими свойствами и состояниями, которые возможно передавать от родительского компонента к дочернему. Все это позволяет создать иерархию компонентов, облегчающую разработку и масштабирование приложения.

В React, "props" (сокращение от "properties") - это способ передачи данных от родительского компонента к дочернему компоненту. Props являются неизменяемыми и представляют собой объект, содержащий все переданные родительским компонентом значения.

Пример использования props в React:

import React from 'react';

// Пример функционального компонента, который принимает props
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Пример использования компонента Greeting с передачей значения через props
function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

export default App;

В этом примере компонент Greeting принимает name через props, и значение name передается из родительского компонента App. Когда Greeting используется дважды в App, каждый раз передается разное значение name, и компонент Greeting отображает приветствие с этим значением.

Всем привет.
Сегодня мы поговорим про хуки в react. А ещё дам отличную шпору.

Хуки (hooks) в React - это функции, которые позволяют вам использовать состояние и другие возможности React без написания классов.
Хуки позволяют вам переиспользовать логику состояния, эффектов и других функций между различными компонентами.

Некоторые из самых популярных хуков в React:

1. useState: Этот хук позволяет добавить состояние в функциональный компонент. Он возвращает пару значений: текущее состояние и функцию, которая позволяет обновить это состояние.

2. useEffect: Этот хук позволяет выполнять побочные эффекты в функциональном компоненте. Например выполнения запросов к API или подписки на события.

3. useContext: Этот хук позволяет использовать контекст в функциональном компоненте (передавать данные через дерево компонентов без необходимости передачи пропсов через каждый уровень).

4. useRef: Этот хук создает изменяемый объект, который будет сохраняться между рендерами компонента. Он полезен для доступа к DOM-элементам или для хранения любых мутабельных значений.

Ну и в завершении, делюсь с вами полезной ссылкой на шпаргалку по React.

https://devhints.io/react

Всем привет!
Сегодня мы поговорим про Redux. Как он работает и как им пользоваться.

Что такое REDUX (если прям просто)?
Это объект с данными. И к этим данным у нас есть доступ из других компонентов React. Мы их можем менять, хранить, считывать. По сути это некоторое хранилище для нашего приложения.

Принцип работы Redux включает в себя следующие основные концепции:

1. Actions - это простые объекты, которые описывают, что произошло в приложении. Они отправляются в store с помощью функции dispatch.

2. Reducers - это чистые функции, которые принимают текущее состояние и действие, и возвращают новое состояние. Они обрабатывают действия и обновляют состояние в store.

3. Store - это объект, который содержит текущее состояние вашего приложения. Он также позволяет подписываться на изменения состояния и обновлять его с помощью метода dispatch.

Как именно это работает?!
Все изменения состояния происходят путем отправки действий в store, которые затем обрабатываются редьюсерами для обновления состояния.