Guia React JS

Por que e como usar.

O que é ReactJS?

ReactJS tem sido muito popular no campo de desenvolvimento web. Então, o que exatamente é ReactJS ?.

React é uma biblioteca JavaScript projetada pelo Facebook que é usada para desenvolver interfaces de usuário. É usado para desenvolver páginas / sites altamente reativos e não fragmentados. Ao contrário das páginas da web tradicionais, onde você tem que esperar devido à latência causada pela solicitação e resposta para a próxima página, o ReactJS ajuda a desenvolver um site extremamente rápido quebrando esse ciclo e atualizando o conteúdo na mesma página quando o evento acontece.

Isso também pode ser feito com JavaScript e HTML simples (CSS se necessário). Quando a página é carregada, você pode manipular a árvore DOM com funções JavaScript e alterar o conteúdo da página. Torne-a interativa sem precisar solicitar uma nova página HTML. Então, por que precisamos do React JS?

Por que React JS?

Você pode de fato alcançar o site interativo de página única com Vanilla JavaScript, já que no final ReactJs é JavaScript e XML. Mas à medida que sua base de código cresce, será pouco claro e inimaginável manipulá-la ou fazer alterações nela. Você terá que seguir uma abordagem imperativa e repetitiva para criar um componente interativo. A manipulação de um elemento no vanilla JavaScript será em nível global. Você acabará afetando outros elementos enquanto desenvolve novos.

É preferível usar o React devido aos seguintes motivos:

SPA : React ajuda você a construir um aplicativo de página única. Com ReactJS você pode controlar / manipular / alterar o conteúdo de toda a página com o mínimo de código.

Abordagem declarativa : Usa um design declarativo com todo o açúcar sintático ajudando a escrever um código de alto nível de manutenção. Você apenas tem que definir o objetivo e o React irá lidar com a instrução JavaScript DOM e sob quais situações elas são usadas.

IU orientada a componentes: React adota o conceito de componente. Os componentes são blocos de construção reutilizáveis ​​na IU. Com ReactJS você pode criar um componente encapsulado que gerencia seus dados e evita o cenário de afetar outros estados e ações do componente na árvore DOM. Este é apenas um dos traços que o tornam. Ajuda a reutilização do código, separação de interesses e evita repetições.

Como começar a usar o React?

Configurar o ambiente React é realmente. Tudo no ReactJS é JavaScript.

Se você quiser um projeto inicial com todas as bibliotecas, crie um aplicativo ReactJS completo. Você pode executar o seguinte comando em seu terminal:

npx create-react-app <your-app-name>

cd <your-app-name>
npm start

npm start não apenas assistir e entregar, mas também transformar o código sintático de açúcar JSX, (que será discutido mais adiante) no
JavaScript bruto.

A estrutura do seu projeto deve ser semelhante a esta. O index.jsarquivo é o primeiro a ser executado quando você executa o npm start. Este arquivo manipula o elemento de id root em index.html. Ele chama o método render e o substitui pelo conteúdo retornado por App.js.

ReactDom.render é um método que é chamado para renderizar o elemento React ou o elemento DOM (primeiro parâmetro) como filho do elemento de destino (segundo parâmetro).

App.jsretorna um componente . Component é uma função especial que retorna o elemento React. O HTML retornado é denominado JSX (JavaScript XML). JSX é o açúcar sintático para React.createElement(component, props, …children)(por agora, vamos apenas dizer que React.createElement é como document.createElement e document.appendChild). Você pode fazer alterações no conteúdo da página por meio da alteração do arquivo App.js em src.

Tente fazer alterações neste HTML substituindo pelo código abaixo e salve o arquivo para ver as alterações na página.
<div> <h1> This is my first App.</h1> </div>

Se você não quer se confundir com conceitos complexos do ReactJS de antemão e trabalhar até a configuração mais básica, você só precisa adicionar os scripts abaixo em seu index html.

<script 
   crossorigin 
   src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script 
  crossorigin
  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
</script>

Agora vamos apenas criar um index.jse manipular o conteúdo HTML index.html.

Isso criará o elemento h1 com algum texto por meio de React.createElement. React.createElement pega os agrumentos da seguinte maneira, respectivamente:

• O primeiro argumento é uma tag de elemento passada como string
• O segundo argumento é adereços para esse elemento. Os adereços são apenas os atributos do elemento. Você pode passar objeto de atributos ( className, estilo ou qualquer atributo personalizado ) ou passar nulo de nenhum dado que seja necessário para ser passado.
• O último argumento são os elementos filhos ou o texto.

JSX nada mais é do que uma sintaxe especial no React (açúcar sintático para React.createElement) que ajuda um desenvolvedor a escrever código legível e sustentável. Portanto, não é necessário conhecer JSX com antecedência para aprender os conceitos do ReactJS, mas é uma convenção de uso.

Portanto, concluímos a criação de nosso primeiro aplicativo básico com e sem JSX.

Observação: cada componente deve começar com letra maiúscula. Isso ajuda o React a considerar o elemento que começa com letra minúscula como elemento DOM e o elemento que começa com letra maiúscula como elemento personalizado do React.