Comece hoje com o React!

Com certeza você já deve ter escutado sobre esse tal de React, sobre sua história, sobre o seu pai Facebook ou até mesmo sobre a nova guerra entre Angular e React. Mas, o que você sabe sobre essa poderosa lib?

Lib?

Sim, React na verdade é uma lib muito poderosa, desenvolvida exclusivamente para a criação de UI (User Interface).

Foi criado pelo time do Facebook (na verdade pelo time do Instagram) em 2011, para resolver alguns dos seus problemas e foi liberado para o público em 2013.

Ele é feito para trabalhar com Web Components, manipulação de state e com o Virtual DOM que torna as renderizações mais eficientes.

React é simples e logo se tornou uma das libs mais usadas no mundo do front-end.

O que é melhor Lib ou Framework?

Não estou tomando lado na disputa entre o React e o Angular, na verdade, esse é o jeito que encontrei de explicar a diferença entre libs e frameworks e vou explicar o lado bom e ruim de ambos (React e Angular).

Agora vamos explicar a imagem: em ambos os lados temos um veículo, ambos te levam do ponto A ao ponto B, mas cada um deles foi construído para finalidades diferentes.

No caso do framework (Angular), além de ser maior, mais robusto, ele tem muito mais utilidades do que ”simplesmente te levar de um lugar para o outro”.

Já o React é construído para uma única finalidade, te levar de A até B da maneira mais rápida possível.

A conclusão que se chega é que nenhum é melhor, pois são diferentes, usados para construções diferentes.

E quem usa?

Não é só do grupo do Facebook que vive o React. Temos empresas das mais diversas áreas usando, como: Netflix, Airbnb, Walmart e até a nossa Globo.com.

Beleza, entendi, mas como e onde eu uso?

Usamos para desenvolver todo o front-end onde precisamos trabalhar com mudanças de estados em tempo real. Se você está trabalhando em um projeto onde precisa mostrar algo depois de uma ação ou executar algo após uma alteração em um campo de texto por exemplo, talvez React seja o que você precisa.

Pode me mostrar?

Claro, React roda em cima de ES5 (por razões de compatibilidade) e até pouco tempo atrás precisávamos instalar várias dependências (Babel como transpiler, tradutores, conexões e etc).
React utiliza também JSX (uma mistura de HTML e JS no mesmo arquivo, com sintaxe similar ao XML), todos configurados via webpack.

Sim, precisamos de tudo isso para o rodar o React, mas por sorte, a mesma galera que pensou nele criou um “generator” que configura tudo o que é necessário e ainda dá uma exemplo do poder da lib com um exemplo inicial.

Então agora vamos criar nosso primeiro projeto com React e nosso primeiro component, lembrando que você precisa ter o Node instalado 🙂

Vamos aos códigos \o/

1 – Para instalar o gerador, rode:

2 – Agora crie o nosso primeiro projeto rodando:

3 – Agora navegue até a pasta gerada:

4 – Suba o projeto rodando:

(Para saber mais sobre o Yarn dá uma olhada neste outro tutorial do OneBitCode)

Dando tudo certo, você verá seu primeiro projeto em React totalmente funcional e pronto para testar, vamos lá?

Abra seu projeto no seu editor favorito, você terá uma aplicação desse jeito:

Vamos no arquivo App.js, na pasta src

Dando uma olhada inicial, dá pra perceber que essa sintaxe é bem parecida com a do HTML.

O render() é o principal método de um component React e é onde vamos trabalhar na maior parte do nosso tempo e também onde fica todo nosso HTML.

Na linha 11 vamos modificar todo o texto do <'h1'> para um de sua escolha, depois que você salvar você vai ver ver a alteração na sua aplicação.

Parabéns, você criou e modificou seu primeiro projeto em React.

Mas isso tudo pra trocar uma frase? Cadê a famosa componentização?

Ok, hora de componentizar. Para mostrar como é simples e mágico, vamos fazer isso com o título, que tal?

1 – Crie dentro da pasta src um arquivo com o nome Title.js.

2 – Vamos importar o Component do React, no arquivo criado adicione:

3 – Agora vamos criar uma classe chamada Title e extender do Component colocando:

4 – Adicione o método render no arquivo que por enquanto não retorna nada.

5 – Agora altere novamente o render para acrescentar o nosso Html (o mesmo que retiramos do app.js).

obs: Quando o retorno de um componente é de apenas uma linha de HTML, você não precisa envolver ele com uma div, mas por boas práticas, vamos continuar assim, ok?

6 – Exporte o nosso component substituindo o conteúdo do arquivo desse jeito:

7 – Voltando para App.js, na linha 4, vamos importar o nosso componente Title acrescentando a seguinte linha:

8 – Agora, podemos substituir o <'h1'> do App.js, por nosso componente, dessa forma:


9 – E pronto, confira sua aplicação ela vai continuar do mesmo jeito, mas de uma forma componentizada.

Components que possuem components

Vamos trabalhar mais um pouco nessa componentização. Pensando como React, vamos transformar este header em um componente de componentes, que tal?

Primeiro, vamos criar um component para o logo do React similar ao do Title.js.

Crie um arquivo chamado Logo.js e coloque nele:

Seguindo, vamos criar um arquivo chamado Header.js, que será nosso componente pai e será formado por nossos dois componentes.

Crie um arquivo chamado Header.js e coloque nele:

*Nesse arquivo nós importamos os outros dois components já criados

Agora você tem um component criado por componentes. E o melhor, pode ser usado em qualquer lugar do seu código, vamos testar?

Voltando para o arquivo App.js, vamos remover a linha onde importamos e usamos o title e importar o nosso Header, vamos trocar o header atual pelo nosso componente Header, seu arquivo deve ficar assim:

Pronto, agora você tem uma app com componentes usando o poder do React para isso, muito legal né?

Conclusão

O ecossistema do React é gigantesco com milhares de devs em sua comunidade trabalhando todos os dias para
tornar seu uso melhor e mais simples. Também temos muitas libs que auxiliam o seu uso como o Redux, React-router e Redux-saga.

O uso é tão bom que gerou também o React-native, que é um framework para desenvolvimento mobile, onde usamos todo o poder de criar Web Components para desenvolver de forma nativa e com alta performance.

React é simples, elegante, completo e hoje sem dúvida é uma das melhores opções para o front-end.
Então seja bem vindo ao mundo React \o/

 

Você é novo por aqui?

Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!

O OneBitCode trás conteúdos de qualidade e em português sobre programação com foco em Ruby on Rails e outras tecnologias como Angular, Ionic, React, desenvolvimento de Chatbots e etc.

Se você deseja aprender mais, de uma forma natural e dentro de uma comunidade ativa, visite nosso Facebook e nosso Twitter, veja os screencasts e talks no Youtube, alguns acontecimentos no Instagram, ouça os Podcasts e faça parte de nossa Newsletter.

Além disso, também estamos com alguns e-Books muito interessantes para quem deseja se aprimorar como programador e também como freelancer (os e-Books são gratuitos!):

Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente!
Seja por
Facebook ou e-mail, estamos aqui para você 🙂

Bem-vindo à família OneBitCode \o/

Janeiro 16, 2018

Deixe um comentário

1 Comentário em "Comece hoje com o React!"

avatar
  Subscribe  
newest oldest most voted
Notify of
Vagnerlandio Nunes
Visitante

Gostaria de ver um exemplo de React com Rails.

Feito com s2 por OneBitCode
%d blogueiros gostam disto: