Inscreva-se agora

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.

React JS: Por que esse framework frontend de Javascript é tão poderoso?
Compartilhar artigo

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:

const upComponente = ( acao, dados ) => {
       switch(acao) {} 
       if(props.upParent) props.upParent(acao, dados);
}


Essa função tem dois parâmetros: acao e dados.

Acao irá selecionar a ação que o componente deverá executar e dados se possuir dados relacionados aquela ação.

const upComponente = ( acao, dados ) => {
    switch(acao){}
    if(props.upParent) props.upParent(acao, dados);
}

A segunda parte chama a função do componente ACIMA se existir.

const upComponente = ( acao, dados ) => {
    switch(acao){}
    if(props.upParent) props.upParent(acao, dados);
}

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:

  1. Bugs sempre vão existir na nossa vida 
  2. Assim como clientes chatos
  3. 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.

De quebra, se você curtiu React JS e quer aprender ainda mais, saca só esse vídeo do Canal do Youtube do Le Wagon para aprender a programar em React para iniciantes

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.

Tá em dúvida sobre sua carreira e ainda não tem certeza que quer se inscrever? Agende aqui gratuitamente uma Consultoria de Carreira em Tecnologia com nossos consultores!

Veja também:

Deseja saber mais sobre o nosso curso de 9 semanas?
Continue lendo
Learn to code

Aprendendo A Programar Em Casa Com Le Wagon

Nossos alunos contam um pouco de suas experiências participando do bootcamp Le Wagon de forma remota!

Learn to code

Mulheres da Tecnologia — Sim, elas fazem a diferença!

Mulheres programando, a diferença que elas fazem no mercado.

Learn to code

Aprender programação, por que? Seis motivos para começar agora.

Você já deve ter ouvido falar que todos devem aprender programação para o futuro, mas nós discordamos disso. Programar é uma atualidade importante e cada vez mais requisitada por qualquer empresa, mas por que?

Você tem interesse em estudar no bootcamp de programação número #1 do mundo?

Estamos em 39 ao redor do mundo