Créer des composants React à la volée
Published: 2023-04-07 11:29:42

{% embed https://youtu.be/tMfx4Cb4IVk %}

[**⚛️ Le code sur Github**](https://github.com/maxiim3/create-component-cli)

## Table des matières

- [Créer des composants React à la volée](#créer-des-composants-react-à-la-volée)
  * [Motivations](#motivations)
  * [1. Créer le fichier](#1-créer-le-fichier)
  * [2. Le script](#2-le-script)
  * [3. Enregistrez le fichier](#3-enregistrez-le-fichier)
  * [4. Utilisation](#4-utilisation)

## Motivations

Voici comment j'organise mes composants : 

```md
composant /
|
 --- MyButton/
     |
      --- myButton.module.scss
     |
      --- MyButton.tsx
|
 --- MyArticle/
     |
      --- myArticle.module.scss
     |
      --- MyArticle.tsx
```

Pour le composant MyButton, il faut ensuite 'relier' le module et le composant :
- TypeScript 
```tsx
// MyButton.tsx
import styles from "./myButton.module.scss"

type MyButtonProps = {label:string}

const MyButton = (props: MyButtonProps) => {
    const {label} = props
    return (<button className={styles.btn}>{label}</button>)
}

export default MyFirstAuto
```
- CSS
```scss
// myButton.module.scss
.btn{
 // styles...
}
```

Certes on peut créer des [_files templates_](https://www.jetbrains.com/help/phpstorm/using-file-and-code-templates.html) mais il s'agit toujours de créer : 
- le dossier, 
- puis de nommer les fichiers, 
- importer le module dans le composant
- ajouter la classe...

Des étapes qui peuvent s'avérer répétitives et faire perdre beaucoup de temps. ⌛


## 1. Créer le fichier
Créez un nouveau fichier appelé create-component.sh et ouvrez-le dans votre éditeur de texte préféré.
```bash
 touch create-component.sh
 ```

## 2. Le script

 Ouvrez le fichier avec `open create-component.sh` et 
 ajoutez à ce fichier:
```bash
 #!/bin/bash

if [ $# -ne 2 ]; then
    echo "Usage: create-component <ComponentName> <path>"
    exit 1
fi

component_name="$1"
path="$2"

# Convert to PascalCase and camelCase
component_name_pascal="$(tr a-z A-Z <<<"${component_name:0:1}")${component_name:1}"
component_name_camel="$(tr A-Z a-z <<<"${component_name:0:1}")${component_name:1}"

# Create directory
component_dir="${path}/${component_name_pascal}"
mkdir -p "${component_dir}"

# Create ComponentName.tsx
tsx_file="${component_dir}/${component_name_pascal}.tsx"
cat > "${tsx_file}" <<- EOM
import styles from "./${component_name_camel}.module.scss"

type ${component_name_pascal}Props = {}

const ${component_name_pascal} = (props: ${component_name_pascal}Props) => {
    const {} = props
    return (<div className={styles.component}></div>)
}

export default ${component_name_pascal}
EOM

# Create componentName.module.scss
scss_file="${component_dir}/${component_name_camel}.module.scss"
cat > "${scss_file}" <<- EOM
.component {
}
EOM

echo "Component '${component_name_pascal}' created at '${component_dir}'"
```


## 3. Enregistrez le Enregistrer le fichier 

Enregistrer le fichier et rendez-le exécutable:
```bash
chmod +x create-component.sh
```

Puis, déplacez le script dans un répertoire de votre PATH, par exemple, /usr/local/bin, afin de pouvoir l'exécuter de n'importe où :
```bash
sudo mv create-component.sh /usr/local/bin/create-component
```

## 4. Utilisation 

Maintenant, vous pouvez utiliser la commande create-component [componentName] [path] pour créer vos composants. Par exemple :
```bash
create-component BasedButton /path/to/components
```

Cela créera un répertoire BasedButton dans le chemin spécifié, ainsi que les fichiers BasedButton.tsx et basedButton.module.scss.

🎉

Vous aurez sans doute besoin de relancer votre terminal. 
Lorsque l'on veut créer un composant `Button` dans `src/components/[ici]` , il n'y a plus qu'à entrer la commande 
```bash
create-component Button ./src/components/
```

Hop! Le tour est joué! 😎