Tudo que você precisa para começar a criar seu portfolio com React e TypeScript (Parte 2)

Configurando Seu Projeto React com Vite

Olá novamente, desenvolvedores! Se você ainda não conferiu a Parte 1 deste guia, onde instalamos as ferramentas necessárias, não hesite em [clicar aqui] para começar do zero. Agora que estamos prontos, vamos prosseguir com a criação do nosso projeto React usando Vite.

1. Iniciando um Novo Projeto Vite

Primeiro, abra o seu Visual Studio Code (VSCode) e acesse o terminal. Eu geralmente utilizo o Git Bash, mas você pode escolher o terminal que preferir. No terminal, execute o seguinte comando:

npm create vite@latest

Este comando irá iniciar o processo de criação de um novo projeto Vite. Ele solicitará que você insira o nome do seu projeto. Você pode chamá-lo do que quiser, vou chamar o meu de “portfoliov2”, pois esta é a segunda iteração do meu portfólio. Após inserir o nome, você será solicitado a escolher algumas opções, como a linguagem e o gerenciador de pacotes.

Coloque o nome que quiser!

2. Configurando as Opções do Projeto

Escolha as seguintes opções:

- Template: Selecione “React” para criar um projeto React.

Vamos usar React para o projeto.

- JavaScript/TypeScript: Escolha “TypeScript” para tirar o máximo proveito da tipagem estática que o TypeScript oferece.

Escolha TypeScript

Agora que você fez essas seleções, o Vite irá criar a estrutura inicial do seu projeto React em uma pasta com o nome que você escolheu (“portfoliov2”, no meu caso).

3. Navegando até a Pasta do Projeto

Para entrar na pasta do seu projeto, use o comando cd (change directory, directory é basicamente “pasta”) seguido pelo nome do projeto. No meu caso, eu usaria o seguinte comando:

cd portfoliov2

Isso fará com que você entre no diretório recém-criado, onde todo o código-fonte do seu projeto React está localizado.

4. Instalando as Dependências

Agora que você está dentro da pasta do projeto, é hora de instalar todas as dependências necessárias. Para fazer isso, execute o seguinte comando:

yarn

Isso instruirá o Yarn a instalar todas as bibliotecas e pacotes necessários para o seu projeto React. Aguarde até que o processo seja concluído.

Pronto! Agora você tem um projeto React configurado e pronto para ser desenvolvido. Na próxima parte deste guia, exploraremos como iniciar o servidor de desenvolvimento, fazer alterações e ver seu aplicativo React ganhar vida.

Continue acompanhando este tutorial sobre como iniciar um projeto React com Vite. Estamos apenas começando, e as próximas etapas serão ainda mais empolgantes!

Fique à vontade para compartilhar seus pensamentos e perguntas nos comentários abaixo. Estou aqui para ajudar!

Até a próxima! 🚀