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

Как я ускоряю работу с 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