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

 

logo

Welcome to React

 

 

To get started, edit src/App.js and save to reload.

 

); } } export default App;

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).

 

React no OneBitCode

 

) } }

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:

 

React no OneBitCode

 

) } } export default Title

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:

logo
abril 12, 2019

1
Deixe um comentário

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Vagnerlandio Nunes Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Vagnerlandio Nunes
Visitante
Vagnerlandio Nunes

Gostaria de ver um exemplo de React com Rails.

Feito com s2 por OneBitCode
%d blogueiros gostam disto: