Créer des composants React à la volée

Table des matières

Créer des composants React à la volée

Motivations

Voici comment j'organise mes composants :

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

// 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

// myButton.module.scss
.btn{
 // styles...
}

Certes on peut créer des files templates 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é.

 touch create-component.sh

2. Le script

Ouvrez le fichier avec open create-component.sh et
ajoutez à ce fichier:

 #!/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:

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ù :

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 :

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

create-component Button ./src/components/

Hop! Le tour est joué! 😎

Blog