Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 7, 2023 11:29 am GMT

Crer des composants React la vole

Table des matires

  • Crer des composants React la vole
    • Motivations
    • 1. Crer le fichier
    • 2. Le script
    • 3. Enregistrez le fichier
    • 4. Utilisation

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.tsximport 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
// myButton.module.scss.btn{ // styles...}

Certes on peut crer des files templates mais il s'agit toujours de crer :

  • le dossier,
  • puis de nommer les fichiers,
  • importer le module dans le composant
  • ajouter la classe...

Des tapes qui peuvent s'avrer rptitives et faire perdre beaucoup de temps.

1. Crer le fichier

Crez un nouveau fichier appel create-component.sh et ouvrez-le dans votre diteur de texte prfr.

 touch create-component.sh

2. Le script

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

 #!/bin/bashif [ $# -ne 2 ]; then    echo "Usage: create-component <ComponentName> <path>"    exit 1ficomponent_name="$1"path="$2"# Convert to PascalCase and camelCasecomponent_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 directorycomponent_dir="${path}/${component_name_pascal}"mkdir -p "${component_dir}"# Create ComponentName.tsxtsx_file="${component_dir}/${component_name_pascal}.tsx"cat > "${tsx_file}" <<- EOMimport 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.scssscss_file="${component_dir}/${component_name_camel}.module.scss"cat > "${scss_file}" <<- EOM.component {}EOMecho "Component '${component_name_pascal}' created at '${component_dir}'"

3. Enregistrez le Enregistrer le fichier

Enregistrer le fichier et rendez-le excutable:

chmod +x create-component.sh

Puis, dplacez le script dans un rpertoire de votre PATH, par exemple, /usr/local/bin, afin de pouvoir l'excuter 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 crer vos composants. Par exemple :

create-component BasedButton /path/to/components

Cela crera un rpertoire BasedButton dans le chemin spcifi, ainsi que les fichiers BasedButton.tsx et basedButton.module.scss.

Vous aurez sans doute besoin de relancer votre terminal.
Lorsque l'on veut crer un composant Button dans src/components/[ici] , il n'y a plus qu' entrer la commande

create-component Button ./src/components/

Bash Script pour crer des composants la vole - YouTube

J'ai crer un script pour augmenter de 200% ma productivit!

favicon youtube.com

Le code sur Github

Hop! Le tour est jou!


Original Link: https://dev.to/maxiim3/creer-des-composants-react-a-la-volee-a81

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To