React JS

🖥 Полезные советы по написанию чистого React кода

▶️Деструктурирование свойств —
— это хороший способ сделать код чище и улучшить возможности по его поддержке. Дело в том, что это позволяет чётко выражать или объявлять то, что использует некая сущность. При этом такой подход не принуждает разработчиков вчитываться в реализацию компонента для того, чтобы выяснить состав свойств, связанных с ним.

// до рефакторинга
async function authenticate({ user_id, token }) {
  try {
    const response = await axios.post('https://someapi.com/v1/auth/', {
      user_id,
      token,
    })
    console.log(response)
    return response.data
  } catch (error) {
    console.error(error)
    throw error
  }
}

// после рефакторинга
async function authenticate({ user_id, jwt_token, token = jwt_token }) {
  try {
    const response = await axios.post('https://someapi.com/v1/auth/', {
      user_id,
      token,
    })
    console.log(response)
    return response.data
  } catch (error) {
    console.error(error)
    throw error
  }
}

Сущность jwt_token будет оцениваться в тот момент, когда код дойдёт до token. В результате, если jwt_token окажется действительным токеном, и сущность token окажется равной undefined, в token попадёт значение jwt_token. Если же в token уже было какое-то значение, не являющееся по правилам JS ложным (то есть — некий реальный токен), то в token просто останется то, что там уже было.


▶️Размещайте файлы компонентов в продуманной структуре папок
Например, эта структура может выглядеть наподобие

- src
    - components
- Breadcrumb
    - index.js
    - Breadcrumb.js
    - CollapsedSeparator.js
- Input
    - index.js
    - Input.js
    - utils.js
    - focusManager.js
- Card
    - index.js
    - Card.js
    - CardDivider.js
- Button.js
- Typography.js

📎 Читать подробнее

@react_tg

🖥 Создание приложения React-Electron с нуля

Прежде чем начать, убедитесь, у вас стоят:
1. Node.js (версия 12 или новее)
2. npm или yarn


1️⃣шаг: настройка структуры проекта

Создайте новую директорию для вашего проекта и перейдите к ней в вашем терминале:

mkdir react-electron-app
cd react-electron-app
mkdir -p src electron public
touch src/App.tsx src/index.tsx electron/main.ts
touch public/index.html

Теперь ваш проект должен иметь следующую структуру:

react-electron-app
├── electron
│   └── main.ts
├── public
│   └── index.html
└── src
    ├── App.tsx
    └── index.tsx

2️⃣шаг: выполните следующую команду в терминале, чтобы инициализировать проект с файлом package.json:

npm init -y

3️⃣шаг: установите необходимые зависимости для проекта:

npm install --save react react-dom typescript electron
npm install --save-dev concurrently electron-builder electron-is-dev wait-on cross-env

4️⃣шаг: настройка Typerscript

Создайте файл tsconfig.json в корне проекта:

touch tsconfig.json

Добавьте следующее содержимое в файл tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2023",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

5️⃣шаг: настройка приложения React

Замените содержимое файла src/App.tsx следующим кодом:

function App() {
  return (
    <div className='App'>
      <p>
        Привет, мир!
      </p>
    </div>
  );
}

export default App;

Замените содержимое файла src/index.tsx следующим кодом:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Замените содержимое файла public/index.html следующим кодом:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Приложение React-Electron</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

6️⃣шаг: настройка основного процесса Electron

Замените содержимое файла electron/main.ts следующим кодом:

import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as isDev from 'electron-is-dev';

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  win.loadURL(
    isDev
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, '../build/index.html')}`
  );

  win.webContents.openDevTools();
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

7️⃣шаг: настройка скриптов в package.json

Откройте файл package.json и добавьте следующие скрипты в раздел “scripts”:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "eject": "react-scripts eject",
  "electron:dev": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://127.0.0.1:3000 && tsc -p electron -w\" \"wait-on http://127.0.0.1:3000 && tsc -p electron && electron .\"",
  "electron:build": "yarn build && tsc -p electron && electron-builder",
  "electron:dist": "yarn build && tsc -p electron && electron-builder --mac --dir"
}

8️⃣шаг: Теперь вы можете запустить свое приложение React-Electron, выполнив следующую команду:

npm run electron:dev

Победа!

@react_tg

🖥 Создание PDF с помощью React

🌟 Относительно недавно разработчики Onedoc выпустили UI Kit под названием React Print. Он предназначен для создания PDF-файлов с помощью React и TypeScript.
С его помощью можно подготавливать шаблоны счетов, брошюр и любых других документов.

Пользуйтесь)

🖥 GitHub

@react_tg

🖥 Boa — экспериментальный лексер, парсер и компилятор Javascript

Тут на днях года состоялся релиз Boa v0.18 — экспериментального лексера, парсера и компилятора Javascript, а также движка ECMAScript, написанного на языке программирования Rust.

🔥 Новая версия Boa позволяет легко встраивать JS-движок в различные проекты, и а также использовать его из WebAssembly и командной строки.

Разработчики пояснили, что этот выпуск Boa также знаменует собой серьёзное обновление дизайна сайта проекта и появление нового логотипа.

«Поскольку Boa используется все большим количеством проектов, важно, чтобы мы могли предоставить стабильный и надёжный API. Нам кажется, что мы ещё не достигли этого результата, но после обсуждения с командой мы решили нацелиться на выпуск версии 1.0 в ближайшем будущем. Это станет для нас важной вехой, и мы надеемся, что к тому времени у нас будет много новых функций и улучшений», — пояснили разработчики проекта.

Впервые проект Boa был представлен на конференции JSConf EU 2019 разработчиком Джейсоном Уильямсом.

🖥Исходный код проекта выложен на GitHub под лицензией MIT
4.6К⭐️

@react_tg

🖥 5 вещей, которые сделают ваш React проект лучше

*️⃣Используйте JSX-сокращения
Допустим, вам нужно управлять видимостью компонента Navbar с помощью пропса showTitle:
Плохо

return (
  <Navbar showTitle={true} />
);    

Хорошо

return(
  <Navbar showTitle />  
);  

*️⃣Используйте тернарные операторы
Отличный способ для выбора между двумя компонентами по некоторому условию
Плохо

const { role } = user;

if(role === ADMIN) {
  return <AdminUser />
}else{
  return <NormalUser />
}  

Хорошо

const { role } = user;

return role === ADMIN ? <AdminUser /> : <NormalUser />   

*️⃣Используйте преимущества объектных литералов
Если у вас выбор между тремя и более компонентами, литералы объектов могут сделать код более читаемым – используйте их вместо сложных условий.
Плохо

const {role} = user

switch(role){
  case ADMIN:
    return <AdminUser />
  case EMPLOYEE:
    return <EmployeeUser />
  case USER:
    return <NormalUser />
}  

Хорошо

const {role} = user

const components = {
  ADMIN: AdminUser,
  EMPLOYEE: EmployeeUser,
  USER: NormalUser
};

const Component = components[role];

return <Component />;  

*️⃣Используйте фрагменты
Нет никакого преимущества в использовании div вместо Fragment. Зачем нам лишний элемент в DOM?
Плохо

return (
  <div>
     <Component1 />
     <Component2 />
     <Component3 />
  </div>  
)   

Хорошо

return (
  <>
     <Component1 />
     <Component2 />
     <Component3 />
  </>  
)    

*️⃣Не определяйте функцию внутри рендера
Лучше не смешивать логику и рендер внутри компонента.
Плохо

return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>    // NOTICE HERE
      This is a bad example 
    </button>  
)  

Хорошо

const submitData = () => dispatch(ACTION_TO_SEND_DATA)

return (
  <button onClick={submitData}>  
    This is a good example 
  </button>  
)   

📎 Ещё больше полезных советов

@react_tg

🖥 Годный ролик с созданием 6 проектов на ReactJS

📎 Вот пересказ содержимого от YaGPT

В ролике автор касается таких тем, как:
⏩Передача индекса и корректного варианта ответа в компонент result.
⏩Преобразование ответа в формат JSON и извлечение данных.
⏩Отображение вопросов и вариантов ответов при помощи списка и функции для обработки кликов на вариантах.
⏩Рендеринг пользователей, добавление их в список приглашений и удаление из него.

В целом ролик очень полезный и неплохо помогает попрактиковаться и прокачать свой React

@react_tg

🔥Подборка лучших обучающих каналов для программистов.

➡️ Делитесь с коллегами и cохраняйте себе, чтобы не потерять

🖥 Frontend
Javascript академия - крупнейший js канал
React - лучшие гайды и советы по работе с react
Frontend - тутрориалы, уроки, гайды, код
PHP
Книги frontend
Задачи frontend

⚡Машинное обучение

Machine Learning - полезные статьи новости гайды и разбор кода
Ml Собеседование - подготовка к собеседовению мл, алгоритмам, кодингу
Ml ru - актуальные статьи, новости, код и обучающие материалы
Ml Jobs - вакансии ML
ML Книги - актуальные бесплатные книги МО
ML чат

🚀 Data Science

Анализ данных - полезные фишки, код, гайды и советы, маст-хэв датасаентиста
Data Jobs - ds вакансии
Аналитик данных
Data Science книги - актуальные бесплатные книги
Big data

🏆 Golang
Golang - подробные гайды, разбор кода, лучшие практики, заметки
Golang собеседование
Golang вакансии
Golang книги
Golang задачи и тесты
Golang чат
Golang news - новости go

#️⃣C#

С# академия
С# заметки — код, лучшие практики, заметки программиста c#
С# задачи и тесты
С# библиотека - актуальные бесплатные книги
C# вакансии - работа

🐍 Python

Python/django
Python Собеседование - подготовка к собеседовению python и разбор алгоритмов
Pro python - статьи, новости, код и обучающие материалы
Python Jobs - вакансии Python
Python чат
Python книги

☕ Java

Java академия
Java вакансии
Java чат
Java вопросы с собеседований
Java книги

🛢Базы данных
Sql базы данных
Библиотека баз данных
SQL чат

💻 C++

C++ академия
С++ книги
C++ задачи - подготовка к собеседовению мл, алгоритмам
C++ вакансии

💥 Хакинг Kali Linux

Kali linux
linux_kal - kali чат
Информационная безопасность

🐧 Linux

Linux academy

🦀 Rust
Rust программирование
Rust чат
Rust книги для программистов

📲 Мобильная разработка
Android разработка
Мобильный разработчик гайды и уроки

🇬🇧 Английский для программистов

🧠 Искусственный интеллект
ИИ и технологии
Neural - нейросети для работы и жизни
Книги ИИ
Artificial Intelligence

🔥 DevOPs
Devops для программистов
Книги Devops

🌟 Docker/Kubernets
Docker
Kubernets

📓 Книги
Библиотеки Книг для программситов

💼 Папка с вакансиями:
Папка Go разработчика:
Папка Python разработчика:
Папка Data Science
Папка Java разработчика
Папка C#
Папка Frontend

🖥 NLUX — библиотека ReactJS для создания разговорных пользовательских интерфейсов

В современном мире взаимодействие с компьютерами и приложениями становится все более естественным и удобным благодаря использованию разговорных интерфейсов и искусственного интеллекта. Однако, интеграция такого функционала в веб-приложения может стать вызовом для разработчиков.
В этом может помочь библиотека NLUX (Natural Language User Experience), предоставляющая инструменты для создания разговорных пользовательских интерфейсов в приложениях на ReactJS.

NLUX революционизирует интеграцию разговорного искусственного интеллекта в приложения на ReactJS. Представляя собой двойное предложение, то есть не только компоненты/хуки React, но и автономную библиотеку для JavaScript, библиотека NLUX разработана для внедрения функциональности чат-ботов, управляемых искусственным интеллектом, в веб-приложения.

NLUX выделяется своей легкостью интеграции и способностью обеспечивать пользователям интеллектуальные взаимодействия на естественном языке, что делает ее мощным инструментом для улучшения вовлеченности и удовлетворенности пользователей. Библиотека также позволяет нам настраивать личность бота, используя естественные языковые подсказки.

📁 Подробнее про NLUX на Хабре

🖥 GitHub

@react_tg

🖥 Решение проблемы с получением значения поля в ReactJS

Если в двух словах, то для надежного получения значения из поля ввода в React используйте управляемые компоненты. Привяжите значение поля к состоянию с помощью атрибута value и обновляйте его при помощи обработчика события onChange. Принцип работы приведен ниже:

class InputComponent extends React.Component {
  state = { value: '' };

  handleValueChange = (event) => this.setState({ value: event.target.value });

  render() {
    // Заметьте взаимодействие состояния и поля ввода — вот так все и работает!
    return <input value={this.state.value} onChange={this.handleValueChange} />;
  }
}

В этом коде создается текстовое поле ввода, значение которого привязано к состоянию компонента.

@react_tg

⁉️ Только начинаешь свой путь в IT, и для трудоустройства не хватает реального опыта работы?

Знакомая история? Тогда давай к нам! 🚀

PREAX — онлайн-стажировка для frontend-разработчиков.

Помогаем накопить реальный 💪 опыт, формируем кадровый резерв для работодателей и привлекаем лучших к коммерческим заказам.

ЧТО ВНУТРИ?

🔖 Пять больших проектов. Пополнишь портфолио крутыми кейсами.

🔖 Спринты и дедлайны. Научишься рассчитывать время и укладываться в сроки.

🔖 Работа с легаси. Исправишь ошибки, оптимизируешь код и сделаешь рефакторинг.

🔖 Пачка код-ревью. Поделишься опытом и увидишь, как сделать свой код еще лучше.

🔖 Поддержка сообщества. Сможешь задать вопрос и получить совет, если нужна помощь.

🔖 Новый стек технологий. Закрепишь на практике и расширишь стек технологий.

🔖 Гибкий график. Сможешь выстраивать нагрузку, легко совмещая её с работой или учебой.

В итоге получишь реальный опыт работы в команде!

Попробуй! 1-й спринт — 🆓 БЕСПЛАТНО!

Реклама, ООО «Преакс Плэтформ», ОГРН 1237700372755

🖥 Обработка имён классов в React 🖥

Интерактивные элементы UI имеют более одного состояния отображения. Например, модальное окно может быть открыто или закрыто, а переключатель — включён или выключен. Обычно эти состояния меняют с помощью классов.

Работая напрямую с DOM, мы можем использовать classList, который содержит удобные методы для добавления и удаления классов. В React из коробки нет никаких удобств. Свойство className — это всего лишь строка, а строки неудобны для обработки:

class Button extends React.Component {
  render () {
    const { isPressed, isHovered, label } = this.props;
    let btnClass = 'btn';
    if (isPressed) {
      // Приходится конкатенировать классы
      btnClass += ' btn-pressed';
    } else if (isHovered) {
      btnClass += ' btn-over';
    }
    return <button className={btnClass}>{label}</button>;
  }
};

Для решения этой задачи создатели React рекомендуют использовать пакет 'classnames'. Принцип его работы прост. Вместо манипулирования строчкой напрямую, мы формируем правильный объект, который уже будет преобразован в строку:

import cn from 'classnames';

class Button extends React.Component {
  render () {
    const { isPressed, isHovered, label } = this.props;
    // Значение — это `true` или `false`
    // При значении `true` класс включен, при `false` — выключен
    // `'btn'` — это класс, который будет подставлен в любом случае
    const btnClass = cn('btn', {
      'btn-pressed': isPressed,
      'btn-over': !isPressed && isHovered,
    });
    return <button className={btnClass}>{label}</button>;
  }
};

Подставим конкретные значения:

const btnClass = cn('btn', {
  'btn-pressed': false,
  'btn-over': true,
});

console.log(btnClass); // 'btn btn-over'

Функция cn() принимает на вход любое количество аргументов. Если аргумент имеет строковой тип, то он считается обязательным классом. Если это объект, тогда работает логика, описанная выше:

const btnClass = cn('btn', 'another-class', {
  'btn-pressed': isPressed,
  'btn-over': !isPressed && isHovered,
});

@react_tg

💡Обрабатывай асинхронные ошибки как профи

Асинхронные операции, такие как получение данных из внешних API или обработка взаимодействия с пользователем требуют аккуратной обработки ошибок.

🔵Try-Catch с Async/Await
— надежное решение для обработки ошибок в асинхронном коде. Инкапсулируя асинхронные операции внутри try блока, разработчики получают возможность корректно перехватывать и обрабатывать ошибки, которые могут возникнуть во время выполнения.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error; // Re-throw the error to propagate it further
  }
}

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

🔵Promise.catch()
Promise.catch() метод служит надежным защитником от асинхронных ошибок, предлагая краткое решение для обработки отклонений. Добавляя предложение .catch() в нашу цепочку обещаний, разработчики могут перехватывать и обрабатывать ошибки, возникающие во время выполнения асинхронных операций.

fetch('https://api.example.com/data')
  .then((response) => response.json())
  .then((data) => {
    // Process the data
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
    // Display a user-friendly error message
    alert('An error occurred while fetching data.');
  });

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

В общем, обработка ошибок, особенно асинхронных, в приложениях React требует многогранного подхода.
🔤А какой вариант обработки ошибок близок именно вам? Было бы интересно услышать

@react_tg

⚡️ ReactRover позволяет развертывать React-приложения одним щелчком мыши

Особенности:
🔵Поддержка Vite и CRA
🔵Функциональность пользовательского имени сайта
🔵Поддержка переменных окружения
🔵Ведение журналов в реальном времени
🔵Аутентификация пользователей

🖥 GitHub

@react_tg

💻 Проверь свои скиллы — задача по написанию hook для загрузки данных

На первой итерации решение может выглядеть как-то так:

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((respData) => setData(respData));
  }, []);

  return data;
}

В этом коде не хватает зависимости. Если url изменится, то запроса данных не произойдет.

Дальше код может стать таким:

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    setData(null); // не забыть сбросить данные перед загрузкой
    fetch(url)
      .then((res) => res.json())
      .then((respData) => setData(respData));
  }, [url]); // <-- не забыть зависимость

  return data;
}

На этом этапе можно остановиться, и подумать, как улучшить этот hook.

Пропустим ещё несколько итераций, и финальный код, который можно считать неплохим решением, выглядит так:

function useFetch(url) {
   const [data, setData] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);

   useEffect(() => {
      // флаг отмены
      let cancelled = false;

      setIsLoading(true);
      setData(null);
      setError(null);
      fetch(url)
         .then((res) => res.json())
         .then((respData) => {
            if (!cancelled) setData(respData);
         })
         .catch((e) => {
            if (!cancelled) setError(e);
         })
         .finally(() => {
            if (!cancelled) setIsLoading(false);
         });

      return () => {
         // выставим признак того, что запрос отменен
         cancelled = true;
      };
   }, [url]);

   return [data, isLoading, error];
}

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

@react_tg

💡Как использовать forwardRef с generic компонентами

Одно из ограничений forwardRef в том, что он отключает выведение типа для generic компонентов. Например:

const Table = <T,>(
  props: {
    data: T[];
    renderRow: (row: T) => React.ReactNode;
  },
  ref: React.ForwardedRef<HTMLTableElement>
) => {
  /** --snip-- */
};
 
const ForwardReffedTable = React.forwardRef(Table);

<Table
    data={["a", "b"]}
    renderRow={(row) => { // Тип выводится: row: string
      return <tr>{row}</tr>;
  }}
/>;

<ForwardReffedTable
    data={["a", "b"]}
    renderRow={(row) => { // Тип не выводится: row: unknown
      return <tr>{row}</tr>;
  }}
/>;

Чтобы исправить выведение типа для generic компонентов, можно создать утилитарную функцию для вызова forwardRef с правильными типами:

function fixedForwardRef<T, P = {}>(
  render: (props: P, ref: React.Ref<T>) => React.ReactNode
): (props: P & React.RefAttributes<T>) => React.ReactNode {
  return React.forwardRef(render) as any;
}

// Вызов forwardRef с правильным выведением типа:
const ForwardReffedTable = fixedForwardRef(Table); 

🔗 Подробнее

@react_tg

Реализация React Query в веб-приложении

В этом уроке рассмотрим, как интегрировать React Query в базовое веб-приложение.

React Query — мощная библиотека для управления, кэширования и синхронизации состояния сервера в приложениях React. Мы создадим простое приложение, получающее данные из API с открытым исходным кодом, и используем Bootstrap для применения стилей.

Цели проекта

Создать веб-приложение для получения данных из нижеуказанного API с помощью React Query.

📌Читать

@react_tg

CopilotKit

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

CopilotKit принимает на вход описание вашего приложения и передаст его в свою инфраструктуру React для создания:
- ИИ-чатботов в приложении
- Текстовые области с поддержкой ИИ
- RAG, вызов функций и интеграция

Библиотека имеет встроенную поддержку LangChain, LangGraph и LangServe. Вы можете использовать их для расширения возможностей движка.

Также в библиотеку встроены нативные UI/UX-компоненты, которые вы можете использовать в своих приложениях:
- CopilotChat
- CopilotSidebar
- CopilotPopup
- CopilotTextarea

Библиотека имеет открытый исходный код. Вы можете использовать ее самостоятельно. Вы можете использовать ее с любым LLM, включая GPT-4.

Этот проект занял второе место на HackerNews и ProductHunt. Он был трендом на GitHub.

Эта библиотека работает с любом приложении React, но команда работает над ее расширением.

🐱 GitHub

@react_tg

💡Frontend совет

Для определения min-width и width в CSS достаточно одной функции max

➡️ Демо: здесь

#css #tip

@react_tg