Use CLI para generar componentes en ReactJS

1. Use generate-react-cli para generar componentes para React Project
2. Usar extensiones de código de Visual Studio

Las aplicaciones web de React a menudo se componen de árboles de componentes complejos. Por lo tanto, puede ser beneficioso tener una estructura organizada para almacenar todos los componentes en la carpeta del proyecto.

Hay muchas formas de generar un entorno inicial para crear una aplicación React. La más fácil es usar create-react-app, desarrollada por el equipo de React en Facebook.

Los desarrolladores de React a menudo necesitan copiar y pegar códigos repetitivos básicos para generar componentes. Sin embargo, hay muchas soluciones disponibles para generar rápidamente el código necesario.

Use generate-react-cli para generar componentes para React Project

Este paquete puede ayudarlo a ahorrar mucho tiempo en copiar y pegar código repetitivo al crear nuevos componentes.

Instale este paquete y ejecute el siguiente comando básico en la interfaz de línea de comandos.

npx generate-react-cli component SomeComponent

Generará una nueva carpeta llamada SomeComponent, que tendrá JavaScript, CSS y otros archivos personalizados, según el tipo de proyecto.

La estructura de su proyecto se verá así:

|-- /src
    |-- /components
        |-- /SomeComponent
            |-- SomeComponent.js
            |-- SomeComponent.css
            |-- SomeComponent.test.js

Cuando utilice el comando generar-reaccionar-cli para generar un componente por primera vez, le hará preguntas, que puede responder para obtener el tipo específico de archivos para su proyecto. Por ejemplo, puede especificar que necesita archivos TypeScript en lugar de JavaScript genérico.

Una vez que haya respondido todas las preguntas, GRC creará un archivo generate-react-cli.json que almacena sus elecciones. El comando comprobará este archivo para determinar qué tipo de archivos generar de forma predeterminada.

Puede ir a este archivo y cambiar las opciones para ajustar la funcionalidad del comando generar-reaccionar-cli.

Además, puede anular el comportamiento predeterminado agregando instrucciones únicas al escribir el comando generar-reaccionar-cli.

Imaginemos que también desea generar un archivo de libro de cuentos para un componente. Puede hacerlo ejecutando el siguiente comando.

npx generate-react-cli component Box --withStory=true

De forma predeterminada, GRC continuará generando archivos de componentes sin un libro de cuentos. Pero una sola vez, también generará un archivo de libro de cuentos.

Usar extensiones de código de Visual Studio

Una solución más sencilla es usar las extensiones de código disponibles para Visual Studio Code.

Tiene que crear manualmente carpetas y archivos para los componentes, pero puede usar accesos directos para generar el código repetitivo.

Por ejemplo, con esta extensión, puede ingresar rcc y presionar la pestaña, y la extensión generará el código necesario para usted.