Saltar al contenido

Cómo generar reaccionar componentes de CLI utilizando plopOct, 13thIn este tutorial, vamos a aprender acerca de la generación de nuevos reaccionar …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de la generación de nuevos reaccionar componentes de los usingplop.js CLI. En

angular-cli tenemos un comando para generar nuevos componentes, pero en el comando create-reaccionar aplicación, que no tienen un comando para generar nuevos componentes, pero plop.js nos ofrece una manera de generar componentes de la CLI ( interfaz de línea).

Configuración de la aplicación

En primer lugar, vamos a crear una nueva aplicación para el uso de crear reaccionan reaccionan de la aplicación.

npx create-react-app my-app

vez que la aplicación se ha creado correctamente, ahora cambiar el directorio de trabajo mediante la ejecución de comandos a continuación.

cd my-app

plop.js Instalación

Ahora instala el plop.js mediante la ejecución de comandos a continuación.

npm i -D plop

Ahora abra la carpeta de mi aplicación en el editor de código favorito.

configuración Crear plop

crear un plopfile.js en la carpeta de aplicación de la raíz y añadir el siguiente código.

module.exports = function (plop) {
plop.setGenerator('component', {
description: 'Creating new react components',
prompts: [{
type: 'list',
name: "input",
message: 'Choose your component',
choices: ['class', 'functional'],
},
{
type: "input",
name: "name"
}
],
actions: function (data) {
const actions = [];
if (data.input === 'functional') {
actions.push(
{
type: 'add', //adding file to your propject
templateFile: 'plop-templates/functional-component.hbs',
path: 'src/{{pascalCase name}}.js' //component path
}
)
} else {
actions.push(
{
type: 'add',
templateFile: 'plop-templates/class-component.hbs',
path: 'src/{{pascalCase name}}.js'
}
)
}
return actions;
}
});
};

En el código anterior, tenemos una serie mensajes con dos objetos que nos ayuda a tomar una entrada desde el CLI y pasar esos datos a la función de las acciones.

Dentro de la función actuaciones, se ha añadido un condicional que elegir entre el componente funcional o clase.

Creación plop-plantillas

Ahora tenemos que crear un plop-plantillas de modo que plop.js genera los nuevos componentes basados ​​en esa plantilla.

Dentro de la aplicación raíz carpeta crear una nueva carpeta llamada-plop plantillas y crear dos nuevos-component.hbs filescalled clase y funcional component.hbs a continuación, añadir a continuación el código.

import React, { Component } from 'react';

class {{ pascalCase name }} extends Component{

state = {

}

render(){
return (

{{ pascalCase name }}

);
}
}

export default {{ pascalCase name }}; import React from 'react';

function {{pascalCase name}}() {
return (

{{pascalCase name}}

);
}

export default {{pascalCase name}};

Adición de secuencia de comandos para package.json

Ahora abrir su archivo package.json y añadir el siguiente script para su objeto de secuencias de comandos.

"generate": "plop"

Con esta nuestra configuración plop es completa Ahora abra su carrera NPM terminal y ejecute generar.

Se le pide una pregunta con la clase dos opciones o funcional.

? Choose your component (Use arrow keys)
❯ class
functional

En el siguiente paso, se le pedirá un nombre de componente.

? Choose your component class
? name: Mycomponent

Introduzca su nombre de componente y pulsa enter.

Ahora dentro de su carpeta src verá un archivo nuevo componente llamado Mycomponent.js. Código

repositorio