Aprenda a trabalhar com React e construa junto comigo um site para portfólio (parte 1)

Olá pessoal, como estão? Hoje trago uma maneira interessante de aprender a desenvolver um projeto em React, ampliando suas funcionalidades com outras bibliotecas para garantir o pleno funcionamento. Abaixo, listamos todas as tecnologias que serão empregadas:

Tecnologias Utilizadas:

- React

- Styled Components

- Axios

- React Icons

- React Router Dom

- Jest (Testes)

Iniciando o Projeto:

Antes de começarmos a codificar, é essencial iniciar um boilerplate para a nossa aplicação. Para gerenciar esse boilerplate e as versões, utilizaremos o Git e o Github. Vou criar um repositório remoto no Github chamado “meu-portfolio-com-react-2024”. Você pode nomear seu repositório conforme preferir. Este repositório é público, e você pode acessar a sua estrutura através deste link: https://github.com/Andre-Rodrigues-Dev-Web/meu-portfolio-com-react-2024.

Estrutura de Branches:

Para organizar nosso trabalho, adotaremos o GitFlow, que consiste nas seguintes camadas:

- main

- release

- develop

- branches feats

- branches fix

Essas branches ajudarão no lançamento de features, garantindo um fluxo de entrega contínuo. Mas que não haja problemas no entendimento do uso de cada branch, aí vai uma breve explicação.

Main:

Essa branch será responsável pelo nosso ambiente de produção, partir dela criaremos nossas novas features, nunca suba alterações diretamente nessa branch, sempre suba seguindo o seguinte fluxo: crie uma nova branch feat, ao subir jogue na develop para validar as novas features em ambiente de develop, após revisada e testadas as novas features leve as alterações para branch release, e por fim lance na Main.

Release:

Essa branch é com foco no nosso ambiente de homologação, e você não deve também fazer alterações diretas nessa branch.

Develop:

Branch para realizar testes de novas features no ambiente de desenvolvimento, sempre tenha em mente de jogar as novas features aqui através de sua branch/feat criada, ou então suas correções pelas branchs/fix.

Branchs feat:

Branchs criadas para cada nova feature incrementada ao projeto.

Branchs fix:

Essas branchs tem como foco as correções (bugs), dessa forma evitamos conflitos com novas funcionalidades.

Iniciando a Aplicação com o Boilerplate:

Definiremos nosso ponto de partida para a aplicação, o que será útil tanto no início quanto em casos de problemas. Para isso, crie uma branch em seu repositório chamada “feat/boilerplate”. Essa branch será usada raramente, apenas para atualizar pacotes se necessário, sem adicionar novas features.

Abra o terminal e digite o seguinte comando:

npx create-react-app nome-seu

Eu coloquei no projeto aqui ao criar meu nome mesmo, você pode colocar o seu para pegar a identidade de seu portfólio. Agora vamos baixar os próximos pacotes de libs, vale destacar que para baixar as outras libs, você deve está dentro do diretório do projeto. Instale as seguintes libs abaixo:

npm i axios;
npm i styled-components
npm i react-router-dom;
npm install react-icons –save;
npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

Configurando nosso teste

Após baixarmos nossos pacotes precisamos definir algumas estruturas, entre elas nosso teste jest, para isso vamos começar criando um arquivo chamado babel.config.js. Dentro desse arquivo adicionamos as seguintes linhas de código:

module.exports = {
 presets: [
 '@babel/preset-env',
 '@babel/preset-react',
 ],
};

Agora em nosso arquivo package.json, precisamos adicionar as linhas para execução do teste quando formos mandar o comando via terminal, segue o código:

"scripts": {
 "test": "jest",
 "test:watch": "jest --watch"
}

Para testar basta abrir seu terminal (dentro da pasta do projeto), e digitar: npm test, tudo estando certinho ele vai realizar um teste.

Por hora essa foi a primeira parte, nosso próximo passo será estrutura nossos diretórios em nosso boilerplate, desde já grande abraço e até o próximo passo.