DEV Community

maxiim3
maxiim3

Posted on

1 1

Créer des composants React à la volée

⚛️ Le code sur Github

Table des matières

Motivations

Voici comment j'organise mes composants :

composant /
|
 --- MyButton/
     |
      --- myButton.module.scss
     |
      --- MyButton.tsx
|
 --- MyArticle/
     |
      --- myArticle.module.scss
     |
      --- MyArticle.tsx
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • CSS
// myButton.module.scss
.btn{
 // styles...
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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}'"
Enter fullscreen mode Exit fullscreen mode

3. Enregistrez le Enregistrer le fichier

Enregistrer le fichier et rendez-le exécutable:

chmod +x create-component.sh
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

Hop! Le tour est joué! 😎

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay