Criando um app de terminal (CLI) para criar arquivos react #2
Published: 2024-02-09 11:15:10

## Tabela de Conteúdos
 * [Parte 1: Estrutura](#parte-1)
 * [Parte 2: Criando arquivo](#parte-2)
 * [Parte 3: Criando pasta para o componente](#parte-3)
 * [Parte 4:  Criando estilo](#parte-4)
 * [Final](#final)

## Parte 1: Estrutura <a name="parte-1"></a>

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.

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

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


### CreateComponentSettings.cs
```csharp
using Spectre.Console.Cli;

namespace reactcomponent;

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

### CreateComponentCommand.cs
```csharp
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
```csharp
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 <a name="parte-2"></a>

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:

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

![Resultado depois de rodar o programa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdo0r2ddmu49zmz8m2zx.png)

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

### CreateComponentCommand.cs
```csharp
...
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.

```bash
dotnet run -- create Nav
```

![Arquivo Nav.jsx criado na pasta raiz do programa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8upjtarhkrydjklq89r.png)

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

## Parte 3: Criando pasta para o componente <a name="parte-3"></a>

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
```csharp
...
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 <a name="parte-4"></a>

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
```csharp
...
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:

```bash
dotnet run -- create Menu
```

![Arquivos index.jsx e styles.css criado na pasta com o nome passado como argumento](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnl1abty0euazg5fpp9t.png)

## Final <a name="final"></a>

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](https://github.com/jos3s/reactcomponent/tree/d95aa9d1669dd7ad33f9171e47b9f938505a56ce)