React에서 앱을 사용할 수 있는 방법

Esse post tem o objetivo de documentar os passos que 활용 para atualizar uma aplicação react desenvolvida em meados de 2019, que desde então, não passou por nenhum processo de atualização de bibliotecas.

Alguns passos utilizados aqui podem ser aplicados em vários projetos Node, mas o foco aqui será um pequeno projeto em ReactJS.

프리미로스 파소스

컨테이너 도커를 실행하기 위해 React의 프로젝트를 활용합니다.

Antes de fazer qualquer alteração, criei uma branch a partir da master para poder trabalhar de forma segura e sem riscos, se tudo der errado, desfaço as alterações e começo novamente 😊.
git checkout -b app_upgraded

Dockerfile 이미지 생성

docker de node:12.2.0-alpine para node:16.15.0-alpine 이미지를 사용하십시오.

Dentro da 파스타는 프로젝트를 시작하고 파스타 node_modules e rebuildamos o projeto para criação da nova imagem e subimos o container para inciar aplicação .

# apaga recursivamnte a pasta node_modules
rm.-rf node_modules

# Apaguei containers e networks existentes para este projeto
docker-compose down 

# Sobe um container a partir da nova imagem construída
docker-compose up --build

Atualizando as bibliotecas com 원사

O ReactJS, assim como assim como as outras bibliotecas dependentes da nossa aplicado, pode ser atualizada utilizando o comando interativo do yarn.

Antes de executar o comando para atualização, foi preciso atualizar a versão do nodejs no dockerfile como mostrei no passo anterior.

Com o container em pé, entrei dentro dele e executei o comando do yarn para atualização.

yarn upgrade-interactive --latest --exact

Será feito uma verificação das dependsências da aplicação e retornada uma lista de bibliotecas com a opção para você selecionar todas ou somente aquelas que você gostaria de atualizar.



A lista é composta pelas colunas name, range, from, to e url.

범위: 오랫동안 정보를 저장하지 않고, 저장하지 않아도 정보를 제공하지 않습니다.

출처: Informa a versão atual da biblioteca.

to: Informa para qual versão você irá após a atualização.

url: url com a documentação da biblioteca. Para atualização major, recomendo dar uma olhada no link da biblioteca antes de fazer a atualização.

As bibliotecas são categorizada por cores que indicam o grau de complexidade da cada atualização, podendo ser entendido como:

Verde: atualizações patch, de baixa complexidade, podem ser correções de bugs .

Amarelo: atualizações minor, de média complexidade, requer mais atenção.

Vermelho: atualizações major, de alta complexidade, requer um grande cuidado e muito mais atenção na atualização pois provavelmente você terá que fazer alterações no código fonte para se adequar a nova versão.

✍🏼Dica do Sucesso: Não existem testes automatizados implementados para essa aplicação, isso faz com que atualizações desse tipo sejam muito mais arriscadas.
O ideal seria fazer primeiros os testes automatizados desses componentes, e somente depois atualizar, tornando todo esse processo muito mais tranquilo e seguro.

Como estou trabalhando em outra branch, resolvi marcar para atualizar todas as bibliotecas.

A atualização durou alguns poucos minutos e logo iniciei a aplicação, e então inciaram-se os problemas.

Em breve, tem a parte 2 com as Correções e ajustes após a atualização das bibliotecas