Accueil > Skills > React JS: Por que esse framework frontend de Javascript é tão poderoso?
React JS: Por que esse framework frontend de Javascript é tão poderoso?
Aqui você vai entender as nuances da biblioteca de javascript React JS e compreender tecnicamente quais características a torna tão poderosa, para que grandes empresas como Facebook e Twitter a utilizem no core de seus negócios.
Índice de conteúdo
Aprendizados para iniciantes em React JS
Principais aprendizados dos 6 primeiros meses.
Antes de mais nada um breve aviso:
Eu já programo em outras linguagem e isso faz TODA diferença. Assim como aprender outras línguas fica mais fácil depois das duas primeiras.
Se quiser entender um pouco mais do que eu fiz para aprender a programar independente da linguagem veja esse post.
Se você quer aprender a programar e ainda não sabe como começar, sugiro dar uma lida nesse conteúdo aqui para aprender programação do zero!
README.md: Primeiros passos em React JS
Comecei no ReactJS porque queria transformar a minha metodologia de gestão de tempo, projetos e atividades, ByDelta, em uma ferramenta. ( Até então usava papel mesmo para gerenciar as minhas atividades e projetos. )
E já desenvolvo em PHP desde 2005 e VB , C# desde… melhor não comentar. ( sim… já me falaram… um dinossauro.)
Os critérios de escolha do ReactJs ( em relação Vue e Angular ) e o processo vamos discutir em outro post.
React JS e Javascript
Javascript é uma linguagem ( muito bizarra diga-se de passagem ) e o ReactJS ( JS! ) é um conjunto de "facilidades" que permite aos desenvolvedores acelerarem o seu código, ou seja, ser mais produtivo.
ReactJS NÃO é linguagem, é uma biblioteca.
Deveria colocar o "mais produtivo" entre inúmeras aspas pois produtividade está diretamente relacionado à experiência na linguagem porém é fato que o ReactJS facilita o trabalho.
Segue então o melhor do compilado dos últimos 6 meses:
React JS #01: Componentes e Composition
ANTES de fazer qualquer projeto ReactJS, aprenda a pensar e composição. Principalmente se você, assim como eu, vem da programação orientada a objetos e os conceitos de hierarquia.
Como exemplo:
Imagine um objeto Gato e outro Cachorro.
Com Hierarquia você cria uma classe ANIMAL e tanto GATO quanto CACHORRO EXTENDS ANIMAL.
O que é comum entre objetos gatos e cachorros você coloca na CLASSE ANIMAL e o que for específico você coloca em cada objeto.
ANIMAL => Olhos, Boca, Pelo.GATO EXTENDS ANIMAL => Mia e herda os atributos de ANIMALGATO EXTENDS ANIMAL => Late e herda os atributos de ANIMAL ReactTJS funciona melhor com COMPOSITION => SOMA! Isso significa que GATO = Olhos + boca + pelo + miaIsso significa que CACHORRO = Olhos + boca + pelo + late
ReactJS parte do princípio que você irá criar componentes para cada uma das características.
Esse conceito por si só me custou boas horas de programação pois exige que você pense em componentes PEQUENOS e reutilizáveis.
React JS #02: Lifecycle
Essa pra mim é a principal dica de qualquer linguagem: entenda como ela processa o código e você irá economizar muito tempo de desenvolvimento.
O ReactJS ainda adiciona o conceito de hooks e suas variantes de Lifecycle não facilitam.
O fato é que ANTES da primeira linha de código precisamos entender como o código vai ser processado e isso ajuda a evitar erros de aprendizado.React JS webhooks
React JS #03: Props e State
Para entender os conceito tem inúmeros vídeos na internet ( e outros tantos posts ). Já o bom uso pode confundir bastante.
Vamos lá!
Props passa informações de pai pra filho.
State são informações locais e que precisam de manter seu ESTADO durante o lifecycle.
Entendido isso saiba que toda vez que você criar um STATE para e pense se é neste componente mesmo que você deseja criar. A maior parte dos meus erros foi justamente não pensar onde o STATE deveria ser declarado.
Dica do state é justamente criar componentes que funcionam sozinhos ou em conjunto com outros, ou seja, independentes. (pense em composition)
React JS #04: Atualização ascendente
( dei o nome de upParent/atualizaPai)
Passar dados descende (de pai para filho) é com o props e está tudo certo. E o caminho de volta?
Tentei utilizar vários padrões (não vou citar aqui para não dar discórdia) porém acabei "inventando" um meu. Coloco entre aspas pois provavelmente existe apesar de não ter encontrado.
Se você usa algum padrão e já está satisfeito ótimo. Não existe correto, existe o que funciona pra você.
Obs.: eu sei programar porém explicar conceitos em texto não é meu forte. Qualquer dúvida, comenta no post que respondo.
Como funciona: TODO componente deve ter uma função no seguinte formato:
De forma geral funciona como uma atualização de baixo para cima. (Quase um… bubble sort. rsrs)
A grande "mágica" desse padrão é por exemplo quando o componente filho com uma acao "salvar" chama o props.upParent("salvar") e cada pai que ele passa verifica se precisa fazer alguma ação.
Esse efeito cascata ascendente permite fazer alterações nos pais a partir dos filhos em toda a árvore de componentes.
Se você gostou e/ou te ajudou me manda uma DM no @bydeltaapp ? Estou querendo saber se realmente é um padrão novo ou se alguém já publicou!
Compilando React JS
ReactJS assim como outras linguagem promete facilitar a vida dos desenvolvedores e o faz! Mas não faz milagre.
Entender as premissas do ReactJS ( lifecycle, props, state ) é FUNDAMENTAL para ter uma experiência um pouco melhor.
Existem 3 fatos inerentes da programação:
Bugs sempre vão existir na nossa vida
Assim como clientes chatos
Usuários fazem coisas bizarras
Para saber mais pode me procurar no bydelta.butec.com.br que inclusive é todo em ReactJS.
Conclusão
Se você já programa em JAVA ou em alguma orientada a objetivo, gaste um tempo para abandonar a hierarquia e dedicar ao composition do ReactJS.
Agora que você já sabe como aprender a programar, que tal conhecer os cursos de programação da Le Wagon e começar sua carreira como desenvolvedor com o pé direito? Escolha sua cidade e faça sua inscrição.
