Плагины, упрощающие разработку в 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, которые затем обрабатываются редьюсерами для обновления состояния.

Ну и напоследок, пример использования Redux в React для управления состоянием счётчика:

1. Установите необходимые пакеты:

npm install redux react-redux

2. Создайте файл store.js, который будет содержать конфигурацию Redux-хранилища:

import { createStore } from 'redux';
import rootReducer from './reducers'; // Подключаем корневой редьюсер

const store = createStore(rootReducer); // Создаем хранилище с корневым редьюсером

export default store;

3. Создайте файл reducers.js, где будут объединены все редьюсеры:

import { combineReducers } from 'redux';
import counterReducer from './counterReducer'; // Подключаем редьюсер для счетчика

const rootReducer = combineReducers({
  counter: counterReducer, // Добавляем редьюсер для счетчика в корневой редьюсер
  // Другие редьюсеры...
});

export default rootReducer;

4. Создайте файл counterReducer.js, который будет содержать редьюсер для счетчика:

const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;

5. Используйте Redux в компонентах React:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const count = useSelector((state) => state.counter.count); // Получаем состояние счетчика из хранилища
  const dispatch = useDispatch(); // Получаем функцию для отправки действий

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};

export default Counter;

Всем привет!
На этой неделе решил сделать вот такую тему. Глянем актуальные NOSQL бд и попробуем с некоторыми поработать.

Ну вы поняли...
Сегодня говорим про бд.

Различия SQL и NoSQL

Для начала разберемся что это такое:
- SQL - это реляционная бд (данные хранятся в таблицах с определенной структурой). Между таблицами есть связи в виде отношений.
- NoSQL - это нереляционные бд (данные хранятся в виде набора документов). Документы не имеют структуры и не связаны отношениями.

В сравнении с NoSQL, SQL бд дают большую гибкость в формировании запросов на работу с данными.

NoSQL масштабируемая горизонтально за счёт добавления новых узлов (серверов), а SQL вертикально путем увеличения мощности сервера.

NoSQL требуют меньшего администрирования и проще, так как не следуют правилам ACID (атомарность, согласованность, изоляция, долговечность).

Существует несколько популярных NoSQL баз данных, каждая из которых предназначена для различных типов приложений и задач.
Топ 3 самых популярных NoSQL баз данных:

1. MongoDB: MongoDB - это документо-ориентированная база данных, которая хранит данные в формате JSON-подобных документов. Она широко используется для веб-приложений, аналитики данных и других приложений, где требуется гибкая структура данных.

2. Cassandra: Apache Cassandra - это распределенная база данных с открытым исходным кодом, предназначенная для обработки больших объемов данных и обеспечения высокой доступности. Она часто используется для хранения временных рядов, журналов событий и других приложений, где требуется масштабируемость и отказоустойчивость.

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