{"id":5928,"date":"2019-10-11T10:41:50","date_gmt":"2019-10-11T13:41:50","guid":{"rendered":"https:\/\/blog.umbler.com\/?p=5928"},"modified":"2021-10-18T14:56:51","modified_gmt":"2021-10-18T17:56:51","slug":"aprender-react-5-razoes-para-comecar-agora-mesmo","status":"publish","type":"post","link":"https:\/\/blog.umbler.com\/br\/aprender-react-5-razoes-para-comecar-agora-mesmo\/","title":{"rendered":"Aprender react: 5 raz\u00f5es para come\u00e7ar agora mesmo"},"content":{"rendered":"\n

“Aprender React \u00e9 o sonho de 1 a cada 5 Desenvolvedores Front-end, ouvi dizer<\/em>“<\/p><\/blockquote>\n\n\n\n

Se a estat\u00edstica \u00e9 assertiva ou n\u00e3o, n\u00e3o creio que seja o momento de discutir. <\/p>\n\n\n\n

Mas o que sabemos \u00e9 que, se algu\u00e9m falou isso, \u00e9 porque com certeza entende o crescimento e o potencial desta, que \u00e9 uma das libraries<\/em> mais famosas e queridas pelos Front-ends do meu Brasil (leia-se at\u00e9 do mundo). <\/p>\n\n\n\n

O React<\/strong> foi idealizado pelo Facebook<\/strong>, que foi o respons\u00e1vel por evangelizar o mercado sobre a tecnologia<\/a>. \u00c9 \u00f3bvio que tem muita coisa boa surgindo \u2014 (acho que \u00e9 legal voc\u00ea saber tamb\u00e9m que o Flutter<\/a><\/strong> existe), mas React<\/strong> ainda vale muito a pena e agora \u00e9 a hora que voc\u00ea vai saber o porqu\u00ea. <\/p>\n\n\n\n

Vamos l\u00e1? \ud83d\ude42<\/p>\n\n\n\n

1. Baixa complexidade de aprendizado<\/h2>\n\n\n\n

Se comparado ao Angular<\/strong>, por exemplo, o React tem um n\u00edvel de complexidade baix\u00edssimo. <\/p>\n\n\n\n

Isso n\u00e3o quer dizer que o React<\/strong> \u00e9 melhor que o Angular, apenas quer dizer que, se voc\u00ea quer apostar em uma tecnologia com curva de aprendizado menor, talvez devesse considerar o React.<\/p>\n\n\n\n

N\u00f3s escrevemos um artigo que compara os tr\u00eas frameworks\/libraries <\/em>mais populares da atualidade. Estamos falando do React, Angular e Vue<\/a><\/strong>.<\/a> D\u00e1 um confere!<\/p>\n\n\n\n

Aqui na GeekHunter<\/a><\/strong> n\u00f3s constru\u00edmos nosso software<\/em> usando Angular, que nos serviu muito bem para o fim que precis\u00e1vamos na \u00e9poca. <\/p>\n\n\n\n

Ent\u00e3o n\u00e3o vamos demonizar o Angular, j\u00e1 que foi este frameworkzinho <\/em>que abriu grandes caminhos para o Front-end que conhecemos hoje. <\/p>\n\n\n\n

Ainda sobre o aprendizado, h\u00e1 quem diga que a documenta\u00e7\u00e3o \u00e9 t\u00e3o eficiente que em menos de 1 m\u00eas voc\u00ea tem a possibilidade de construir um software<\/em> completo e funcional o usando. <\/p>\n\n\n\n

Curtiu? Se essa \u00e9 sua necessidade, vai de React<\/strong>, ent\u00e3o!<\/p>\n\n\n\n

2. React \u00e9 uma library de alto desempenho<\/h2>\n\n\n\n

Bem, quando eu falo alto desempenho<\/strong>, estou querendo dizer v\u00e1rias coisas, n\u00e3o apenas uma. O React foi desenvolvido pela equipe do Facebook, ent\u00e3o voc\u00ea j\u00e1 pode imaginar que \u201ccoisa fraca\u201d n\u00e3o \u00e9.<\/p>\n\n\n\n

Ali\u00e1s, como exemplo de alto desempenho, podemos citar o scroll <\/em>infinito do Facebook, que normalmente daria uma \u201ctravadinha\u201d, se tivesse sido desenvolvido usando outras tecnologias.<\/p>\n\n\n\n

Virtual DOM<\/h3>\n\n\n\n

O React emplacou, j\u00e1 na sua primeira vers\u00e3o, um algoritmo poderoso para manipula\u00e7\u00e3o de DOM, o Virtual DOM<\/strong>. <\/p>\n\n\n\n

Isso faz com que mudan\u00e7as no estado de aplica\u00e7\u00e3o primeiro reflitam no Virtual DOM e s\u00f3 sejam aplicadas depois de bons c\u00e1lculos das implica\u00e7\u00f5es que isso geraria no DOM original.

Em resumo, apenas a parte que mudou vai re-renderizar. Simples? N\u00e3o se voc\u00ea trabalha em um grande monolito, por exemplo. <\/p>\n\n\n\n

O que isso tem a ver com performance? Se voc\u00ea desenvolve em Javascript<\/strong> j\u00e1 faz um tempo deve saber que manipular o DOM em excesso prejudica a renderiza\u00e7\u00e3o, e a\u00ed tamb\u00e9m perde-se performance. <\/p>\n\n\n\n

Vai dizer que o Virtual DOM<\/em> n\u00e3o \u00e9 um gol de placa do React?!<\/p>\n\n\n\n

3. O mercado est\u00e1 superaquecido! <\/h2>\n\n\n\n

N\u00e3o h\u00e1 como negar, que, hoje, pequenas, m\u00e9dias e grandes empresas usam React<\/strong>. Dentre as grandes n\u00f3s encontramos nomes como Netflix<\/strong>, Facebook<\/strong> (a m\u00e3e do React!), Amazon<\/strong> e at\u00e9 Instagram<\/strong>. <\/p>\n\n\n\n

Isso significa que, al\u00e9m de terem muitas pessoas querendo aprender React para ter uma \u201cchance\u201d em empresas como essas, o suporte da tecnologia tamb\u00e9m se torna cada vez maior e especializado. <\/p>\n\n\n\n

Uma outra raz\u00e3o para que o mercado esteja t\u00e3o aquecido para \u201cReacters<\/em>\u201d \u00e9 a realidade daquele que abriu caminhos para o Front-end<\/em>, o saudoso Angular<\/strong> (Angular 8<\/a><\/strong> \u00e9 a \u00faltima vers\u00e3o!). <\/p>\n\n\n\n

O fato \u00e9 que o Angular <\/strong>j\u00e1 foi muito popular, mas, pela sua complexidade, est\u00e1 se tornando cada vez menos usado. Isso nos diz muito sobre a ascens\u00e3o do React, j\u00e1 que, desde o seu nascimento, esteve pau a pau com o Angular.  <\/p>\n\n\n\n

Esse t\u00f3pico tem total intersec\u00e7\u00e3o com o desempenho da tecnologia. Afinal, trata-se de um efeito cascata: bons desenvolvedores perseguem o bom desempenho da mesma forma que boas empresas perseguem bons profissionais. <\/p>\n\n\n\n

Como as vagas para react<\/a> <\/strong>n\u00e3o param de crescer e a tend\u00eancia \u00e9 crescer ainda mais \u2014 por conta dos players \u2018evangelizadores\u2019 \u2014 voc\u00ea j\u00e1 sabe que pode e deve aprender React sim!<\/p>\n\n\n\n

Quando que voc\u00ea come\u00e7ar\u00e1 mesmo? \ud83d\ude42<\/p>\n\n\n\n

4. React \u00e9 flex\u00edvel e escal\u00e1vel<\/h2>\n\n\n\n

Esse t\u00f3pico at\u00e9 poderia ser um subt\u00f3pico da se\u00e7\u00e3o \u201cdesempenho\u201d, mas consideramos uma vantagem t\u00e3o louv\u00e1vel, que reservamos um t\u00f3pico s\u00f3 para ela. <\/p>\n\n\n\n

Inevitavelmente, quando falamos de flexibilidade, tamb\u00e9m falamos de componentiza\u00e7\u00e3o. No React cada componente \u00e9 aut\u00f4nomo<\/strong>, isto \u00e9, voc\u00ea pode reutiliz\u00e1-lo em outros projetos, ganhando muito mais tempo. <\/p>\n\n\n\n

Essa caracter\u00edstica de \u201cflexibilidade\u201d do React tamb\u00e9m faz com que sua aplica\u00e7\u00e3o fique bem mais escal\u00e1vel, independente do seu tamanho, uma vez que a manipula\u00e7\u00e3o de componentes \u00e9 feita para ser simples.<\/p>\n\n\n\n

5. React \u00e9 leve, mas deixa sua aplica\u00e7\u00e3o robusta<\/h2>\n\n\n\n

\u00c9 fato que o Angular, pelo pack<\/em> imenso de ferramentas, pode deixar sua aplica\u00e7\u00e3o extremamente robusta. No entanto, esse n\u00e3o pode ser o principal argumento para optar pelo Angular.<\/p>\n\n\n\n

Afinal, como j\u00e1 dizia o Tio Ben \u201cCom grande poder vem grande responsabilidade<\/em>\u201d. Sim, a verdade nua e crua \u00e9 que o Angular pode fazer sua aplica\u00e7\u00e3o perder desempenho. <\/p>\n\n\n\n

Com o React voc\u00ea consegue, sim, criar uma aplica\u00e7\u00e3o robusta, e o melhor de tudo \u00e9 que n\u00e3o perder\u00e1 desempenho. A\u00ed \u00e9 que est\u00e1 o grande benef\u00edcio, o equil\u00edbrio entre as for\u00e7as.<\/p>\n\n\n\n

Como falamos em nosso artigo comparando os principais frameworks e libraries<\/strong><\/a>, o React \u00e9 leve. Tipo, leve pra caramba. 
<\/p>\n\n\n\n

>> React + react-dom v16.0 = <\/em>49.8 kb gzipped<\/em><\/strong>. <\/em><\/p>\n\n\n\n

Agora, falando da parte da robustez, o React tamb\u00e9m trouxe integra\u00e7\u00e3o com as vers\u00f5es atualizadas do ECMA Script<\/strong>, dando suporte \u00e0s classes e modulariza\u00e7\u00e3o. Tudo isso s\u00f3 torna mais f\u00e1cil voc\u00ea implementar novas features<\/em>. <\/p>\n\n\n\n

Mas React \u00e9 s\u00f3 felicidade, ent\u00e3o?<\/h2>\n\n\n\n

Entre os desenvolvedores front-end existe um consenso de que o React possui mais vantagens do que desvantagens. Isso n\u00e3o quer dizer que o React n\u00e3o tenha suas peculiaridades e pontos de melhoria. <\/p>\n\n\n\n

A quest\u00e3o \u00e9 que a maioria dos pontos de melhoria reside mais em opini\u00f5es pessoais de desenvolvedores, do que em consensos quase que absolutos. 
<\/p>\n\n\n\n

Vejam quais s\u00e3o os pontos para entender se isso interfere na sua decis\u00e3o de aprender react: <\/strong><\/p>\n\n\n\n

\u201cA documenta\u00e7\u00e3o do React \u00e9 pobre\u201d <\/h3>\n\n\n\n

Alguns desenvolvedores afirmam, por exemplo, que a documenta\u00e7\u00e3o do React \u00e9 pobre, enquanto para outros, o que est\u00e1 documentado \u00e9 mais do que o suficiente para rodar uma aplica\u00e7\u00e3o em poucos dias. 
<\/p>\n\n\n\n

\u00c9 quest\u00e3o de ponto de vista, mas acho que \u00e9 bom voc\u00ea estar atento(a) a essa quest\u00e3o.<\/p>\n\n\n\n

\u201cO mal funcionamento da API Animation\u201d <\/h3>\n\n\n\n

Houve um tempo onde o React tinha alguns problemas um pouco mais \u201cs\u00e9rios\u201d de performance, como \u00e9 o caso de renderiza\u00e7\u00e3o de anima\u00e7\u00f5es. <\/p>\n\n\n\n

Isso foi motivo o suficiente para muita gente sair falando mal do React e dizendo que o React <\/strong>n\u00e3o era a escolha ideal. <\/p>\n\n\n\n

Agora isso n\u00e3o pode mais ser dito, uma vez que a equipe React do Facebook \u2014 sim, os criadores do framework<\/em> \u2014 alteraram o modo como a API Animation <\/em>funciona. <\/p>\n\n\n\n

Essa altera\u00e7\u00e3o fez com que as tarefas de anima\u00e7\u00e3o fossem delegadas ao n\u00facleo nativo e, assim, resolvesse o problema. <\/p>\n\n\n\n

\u201cO React n\u00e3o \u00e9 Native\u201d <\/h3>\n\n\n\n

Alguns profissionais tamb\u00e9m afirmam que o desempenho do React, em rela\u00e7\u00e3o a aplicativos totalmente nativos, fica inferior. Voc\u00ea j\u00e1 deve imaginar que isso n\u00e3o \u00e9 verdade, j\u00e1 que o React \u00e9, sim, nativo.<\/p>\n\n\n\n

O ponto de diverg\u00eancia desses desenvolvedores reside no fato de que existem alguns gaps<\/em> de performance \u2014 que, particularmente, n\u00e3o considero t\u00e3o graves \u2014 mas que podem causar estranhamento a alguns profissionais. <\/p>\n\n\n\n

Me refiro \u00e0 comunica\u00e7\u00e3o entre os n\u00facleos, mais especificamente. A verdade \u00e9 que isso \u00e9 impercept\u00edvel para o cliente, mas \u00e9 percept\u00edvel para os entendedores da tecnologia.<\/p>\n\n\n\n

Em vias pr\u00e1ticas, acho que \u00e9 algo que voc\u00ea precisava saber, mas que n\u00e3o deve se preocupar. <\/p>\n\n\n\n

Espero que tenhamos ajudado a apoiar a sua decis\u00e3o de aprender React. Agora? Hands on<\/em><\/strong>!<\/p>\n\n\n\n

Este artigo foi escrito pela equipe da <\/em>GeekHunter<\/em><\/strong><\/a>. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

“Aprender React \u00e9 o sonho de 1 a cada 5 Desenvolvedores Front-end, ouvi dizer“ Se a estat\u00edstica \u00e9 assertiva ou n\u00e3o, n\u00e3o creio que seja o momento de discutir.  Mas o que sabemos \u00e9 que, se algu\u00e9m falou isso, \u00e9 porque com certeza entende o crescimento e o potencial desta, que \u00e9 uma das libraries […]<\/p>\n","protected":false},"author":64,"featured_media":5931,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-5928","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts\/5928"}],"collection":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/comments?post=5928"}],"version-history":[{"count":0,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts\/5928\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/media\/5931"}],"wp:attachment":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/media?parent=5928"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/categories?post=5928"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/tags?post=5928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}