Criando um app de terminal (CLI) para criar arquivos react #2

Tabela de Conteúdos

• Parte 1: Estrutura
• Parte 2: Criando arquivo
• Parte 3: Criando pasta para o componente
• Parte 4: Criando estilo
• Final

Parte 1: Estrutura

Essa é a parte 2 do projeto para criar um aplicativo de linha de comando que cria arquivos para projetos react.

Vamos ao código, anteriormente criamos as classes CreateComponentCommand e a CreateComponentSettings no mesmo arquivo, vamos remover a CreateComponentSettings para o seu proprio arquivo.

.
├── ...
├── Program.cs
├── CreateComponentCommand.cs
└── CreateComponentSettings.cs

A estrutura de arquivos do projeto deve ficar assim. E os arquivos assim:

CreateComponentSettings.cs

using Spectre.Console.Cli;

namespace reactcomponent;

internal class CreateComponentSettings : CommandSettings
{
    [CommandArgument(0, "<componentName>")]
    public string ComponentName { get; set; }
}

CreateComponentCommand.cs

using Spectre.Console.Cli;

namespace reactcomponent;
internal class CreateComponentCommand : Command<CreateComponentSettings>
{
    public override int Execute(CommandContext context, CreateComponentSettings settings)
    {
        Console.WriteLine($"nome do component {settings.ComponentName}");
        return 0;
    }
}

Program.cs

using reactcomponent;

using Spectre.Console;
using Spectre.Console.Cli;

var app = new CommandApp();

app.Configure(app =>
{
    app.AddCommand<CreateComponentCommand>("create");
});

app.Run(args);

Parte 2: Criando arquivo

Em para criarmos o arquivo precisamos pegar a localização que o programa foi chamado no terminal, em C# podemos utilizar uma propriedade da classe Environment. Podemos alterar o que vai ser exibido para exibir a pasta, o programa vai ficar assim:

\*CreateComponentCommand.cs*\
...
public override int Execute(CommandContext context, CreateComponentSettings settings)
{
    Console.WriteLine($"nome do component {settings.ComponentName} {Environment.CurrentDirectory}");
    return 0;
}
...

Com isso podemos criar o arquivo, por enquanto ele vai ser criado na pasta que o programa foi chamado.

CreateComponentCommand.cs

...
public override int Execute(CommandContext context, CreateComponentSettings settings)
{
    File.Create(Environment.CurrentDirectory + $@"\{settings.ComponentName}.jsx");
    return 0;
}
...

Ao rodarmos o comando no terminal, passando o "Nav" deverá ser criado o arquivo Nav.jsx na pasta do programa.

dotnet run -- create Nav

Agora temos um programa que criar um arquivo jsx com o nome passado por parâmetro.

Parte 3: Criando pasta para o componente

Normalmente ao criarmos componente react, vamos colocar esse componente em sua própria pasta. Podemos fazer isso em C# de maneira fácil, primeiro vamos pegar o caminho atual e adicionar ao fim o nome da pasta, neste caso vai ser o mesmo nome do component, depois vamos verificar se esse diretório existe, pois se não existir devemos criar o mesmo. Com o diretorio criado podemos então criar o arquivo nesse novo diretório.

CreateComponentCommand.cs

...
public override int Execute(CommandContext context, CreateComponentSettings settings)
{
    var directory = new DirectoryInfo(Environment.CurrentDirectory + $@"\{settings.ComponentName}");

    if (!directory.Exists)
    directory = Directory.CreateDirectory($@"{Environment.CurrentDirectory}\{settings.ComponentName}");

    File.Create(directory.FullName + $@"\{settings.ComponentName}.jsx");
    return 0;
}
...

Executando o comando para rodar o aplicativo novamente pelo terminal, podemos ver que ele está criando o arquivo e pasta correspondente ao nome que passarmos como argumento.

Parte 4: Criando estilo

Não só de arquivo jsx vive o ser humano. Precisamos de alguns estilos também, com tudo que temos até agora fica fácil saber o que precisamos adicionar para que o programa consiga criar um arquivo css também. Porém um padrão que gosto de seguir é ao criar um novo componente é utilizar o arquivo que contém o mesmo com o nome de index.jsx ao invés do nome do component, por isso vamos fazer uma pequena alteração além de apenas criar o arquivo css.

CreateComponentCommand.cs

...
public override int Execute(CommandContext context, CreateComponentSettings settings)
{
    ...

    File.Create(directory.FullName + @"\index.jsx");
    File.Create(directory.FullName + @"\styles.css");
    return 0;
}
...

Precisamos apenas substituir a linha que criar o arquivo jsx com o argumento, para o padrão "index" e adicionarmos uma linha abaixo para criarmos o arquivo de estilos. Ao rodarmos o aplicativo, teremos os seguintes novos arquivos:

dotnet run -- create Menu

Final

Com isso deixamos o nosso aplicativo muito mais funcional e útil que quando finalizarmos a parte 1. Porém ainda é necessário publicar esse programa para que possamos utilizar o mesmo em qualquer diretório do nosso sistema, veremos isso na parte 3.

Github