React é usada para construir uma interface de usuário (UI), pois é uma biblioteca do JavaScript. O React utiliza um novo método de renderizar sites permitindo ao usuário adicionar comandos com respostas excelentes.
Lançada em 2013 como uma ferramenta JavaScript de código livre. React seus componentes de ferramenta foram desenvolvidos pelo facebook, atualmente ela permanece na frente de suas principais concorrentes, que são é o Angular e o Bootstrap, duas das bibliotecas JavaScript mais bem vendidas.
E fácil de usar, pois o React tem o código aberto para interfaces gráficas (GUI) que tem o foco em: tornar a experiência do usuário com a interface mais eficiente, podendo ser categorizada como o “V” no padrão MVC (Model- View- Controlle).
React é utilizado nos sites como: Netflix, Imgur, Feedly, Airbnb, SeatGeek, HelloSign, Walmart e outros. Em 2015, teve o anuncio do modulo React Navite, que junto com o React, force a possibilidade do desenvolvimento de aplicativos para Android e IOS utilizando componenetes de interface de usuário nativos de ambas plataformas, sem precisa recorrer ao HTML.
Conhecido também comi React JS, pois o componente do React não é difícil de escrever porque usa o JSX, uma extensão da sintaxe opcional para JavaScript. Permitindo que você combine HTML com JavaScript. Sem uma combinação excelente, ele simplesmente simplifica toda estrutura de codificação escrita de um site, fazendo a renderização de múltiplas funções seja mais fácil.
Quando falamos em desenvolver componentes especiais ou aplicações de alto rendimento, JSX não é a extensão de sintaxe amais popular, mas é bastante eficiente.
Aprenda mais sobre React Curso de React para iniciantes!
Adicione o React e uma página HTML.
Adicionar um container DOM ao HTML
Primeiramente, abra a página HTML que você deseja alterar. Adicione uma tag <div> vazia para marcar o local onde você deseja exibir algo com o React. Por exemplo:
- <!– … HTML existente … –>
- <div id=”like_button_container”></div>
- <!– … HTML existente … –>
Adicionar as Tags Script
A seguir, adicione três tags <script> em sua página HTML logo antes do fechamento da tag </body>:
- <!– … HTML qualquer … –>
- <!– Adicionar o React. –>
- <!– Nota: ao fazer o deploy, substitua “development.js” por “production.min.js”. –>
- <script src=”https://unpkg.com/react@16/umd/react.development.js” crossorigin></script>
- <script src=”https://unpkg.com/react-dom@16/umd/react-dom.development.js” crossorigin></script>
- <!– Adicione nosso componente React. –>
- <script src=”like_button.js”></script></body>
Criar um Componente React
Crie um arquivo chamado like_button.js próximo a sua página HTML.
Abra este código inicial e copie o conteúdo no arquivo que você criou.
Depois do código inicial, adicione essas duas linhas no final do arquivo like_button.js:
- // … o código inicial que você copiou …
- const domContainer = document.querySelector(‘#like_button_container’);
- ReactDOM.render(e(LikeButton), domContainer);
Essas duas linhas de código encontram a <div> que adicionamos em nosso HTML no primeiro passo e então mostrará o componente React dentro dele.
Quer aprender React.js na prática? Clique aqui para saber como.
