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

Construindo Meu Novo Portfólio com React, Typescript e Node

Estou reconstruindo meu portfólio do zero e resolvi compartilhar as etapas do meu processo aqui com vocês. Para este projeto vou utilizar React, Typescript e Node.js, Yarn e Vite e vou detalhar cada etapa aqui.

Se quiser acompanhar meu processo e criar o seu portfolio também ou refazer, como no meu caso, se sinta mais que convidade. Se tiver qualquer dúvida é só comentar embaixo que vou tentar responder.

Antes de começarmos, para você conseguir acompanhar, certifique-se de que você tenha os seguintes passos configurados corretamente em seu ambiente de desenvolvimento:

1. Node.js

• Certifique-se de ter o Node.js instalado em sua máquina. Se você ainda não o possui, você pode baixá-lo [aqui]. Recomendo a versão 12.2.0 ou superior.

• Para verificar se você tem o Node instalado é só digitar o seguinte comando no terminal:

node -v

2. Visual Studio Code (VSCode)

• Caso ainda não tenha o Visual Studio Code instalado, você pode fazer o download da versão mais recente [aqui].

Agora que temos o básico, vamos começar com a instalação do Yarn:

3. Instalando o Yarn

Para instalar o Yarn, siga estas etapas:

Dependendo do seu sistema, você pode seguir estas instruções:

3.1 — No macOS, você pode instalar o Yarn usando o Homebrew com o seguinte comando no terminal:

npm install yarn


3.2 — No Windows, você pode baixar o instalador do Yarn via npm. Execute o seguinte comando para instalar o Yarn globalmente:

npm install --global yarn

Verifique se o Yarn está instalado executando:

yarn --version

Se o Yarn estiver instalado corretamente, ele retornará a versão instalada em seu sistema.

Agora que temos o Yarn pronto, podemos prosseguir para a instalação do Vite.

4. Instalando Vite

Para instalar o Vite em seu computador, siga estas etapas:

4.1. Abra o terminal (no macOS e Linux) ou o prompt de comando (no Windows).

4.2. Digite o seguinte comando para instalar o Vite globalmente usando o npm:

npm install -g vite

4.3. Aguarde até que a instalação seja concluída. Quando terminar, o Vite estará pronto para uso.

Agora que configuramos todas as ferramentas necessárias, estamos prontos para começar a construir nosso portfólio incrível com React, Typescript e Node.js. Fique atento para as próximas atualizações, onde compartilharei cada passo do desenvolvimento.

Próximo passo: Iniciando o projeto! Até lá.