Как я ускоряю работу с React-компонентами 🚀

Сегодня хочу поделиться трюком, который значительно ускорил мою разработку в React. Речь о создании базовых шаблонов компонентов.

В чем суть?
Каждый раз, когда начинаешь писать новый компонент, приходится проделывать одно и то же:
✅ Создавать файл,
✅ Импортировать React,
✅ Прописывать базовую структуру,
✅ Экспортировать компонент.

Решение: создать alias-команду или snippet в VS Code, который автоматически генерирует заготовку компонента!

Как это сделать?
🔹 Вариант 1. Используем VS Code Snippets
1. Открываем команду Preferences: Configure User Snippets
2. Выбираем javascript (или typescript),
3. Добавляем сниппет:

"React Functional Component": {
  "prefix": "rfc",
  "body": [
    "import React from 'react';",
    "",
    "const ${1:ComponentName} = () => {",
    "  return (",
    "    <div>",
    "      ${2:Hello, world!}",
    "    </div>",
    "  );",
    "};",
    "",
    "export default ${1:ComponentName};"
  ],
  "description": "Создает базовый функциональный компонент"
}

Теперь, когда я пишу rfc и нажимаю Tab, код заполняется автоматически! 🔥

🔹 Вариант 2. Используем CLI-команду
Если вы используете bash или zsh, можно создать команду:

echo "import React from 'react';\n\nconst Component = () => {\n  return <div>Hello, world!</div>;\n};\n\nexport default Component;" > NewComponent.js

Теперь одним вызовом скрипта можно создать новый файл с базовой структурой!


Сниппеты и автоматизация таких рутинных задач позволяют не тратить время на однотипные действия. Используете что-то подобное в своей работе? Делитесь своими лайфхаками! 👇

✍️ @React_lib