Começando sua jornada React

Shreya Saxena Blocked Desbloquear Seguir Seguindo 9 de janeiro

Coisas que você deve saber antes de entrar no mundo do React.

Todos nós conhecemos o ReactJS como uma poderosa biblioteca JavaScript, que visa colocar o front-end no papel.

Mas o que é que vale a pena a perseguição?

Nós já tivemos muitas das tecnologias front-end para nós. Angular5, Vue.js, então por que Reagir? Por que tem sido tendências como as tecnologias mais usadas de 2018?

A resposta a essa questão está dentro da própria estrutura de como o Reagir é formulado. Aqui neste artigo, discutiremos as poucas coisas que tornam o React único.

Reagir divide tudo o que queremos em nossa página em partes conhecidas como " Componentes ". Em relação ao React, os componentes são os blocos de construção simples de uma página da Web . Esses componentes permitem que nosso código seja modular e específico na abordagem e nos ajuda a fornecer reutilização . Eles são como as partes de um quebra-cabeça que, quando combinadas, formam nossa página. Essa estrutura de componente pode ser usada para manter nossa base de código e desenvolva nossos aplicativos muito mais facilmente. Um componente React pode ser formado estendendo a classe React.Component.

 A classe Hello estende React.Component 
{
render ()
{
return <h1> Olá a todos </ h1>;
}
}

Reagir atua como o V no MVC , ao contrário do Angular, que realmente lida com a parte do MVC (além disso, o Angular é uma estrutura inteira). O React atua como nossa parte do View, sendo a estrutura da interface do usuário . O React possui dois tipos de componentes, a saber:

  1. Componentes de Classe
  2. Componentes Funcionais

Componentes de classe são os componentes com um estado . Estado basicamente se refere aos dados relacionados ao componente fornecido. Enquanto, por outro lado, os componentes funcionais referem-se aos componentes que possuem alguma ação ou qualquer funcionalidade relacionada a ela. Essas são funções normais do JavaScript.

Por exemplo, em uma forma geral da Web, os atributos como nome, email, endereço serão considerados como um componente de classe, pois sempre haverá entradas de dados relacionadas a ele, sempre que cada formulário for preenchido por qualquer usuário. Ao mesmo tempo, o botão de envio será um componente funcional, pois toda vez que o botão de envio for clicado, ele precisará fornecer o mesmo recurso de armazenamento para o usuário. Por esse motivo, os componentes de classe também são conhecidos como Componentes com estado, enquanto os componentes funcionais são conhecidos como estado sem estado.

Com cada componente, é associado um conjunto de propriedades , conhecidas como adereços na linguagem React. Esses adereços são apenas uma maneira de passar dados dinâmicos pelos componentes . Adereços nos ajudam a comunicar dados de um componente para outro, renderizando-os no método de renderização. Os acessórios são transmitidos de maneira semelhante à usada para passar argumentos para uma função / método em qualquer linguagem de programação.

Esses adereços são imutáveis por natureza, uma vez que são completamente dependentes dos dados recebidos pelo usuário final e, portanto, não podem ser modificados dentro do componente. Esses adereços são então passados do pai para o componente filho. Por exemplo: este snippet de código receberia a propriedade name e resultaria na obtenção da personalização Hello para um nome específico.

 A classe Hello estende React.Component 
{
render ()
{
return <h1> Olá, {this.props.name}! </ h1>;
}
}

Além desses recursos principais, o React usa o JSX , uma extensão de sintaxe, que é como um híbrido de HTML e XML, os dois mais comuns em um diretório de desenvolvedores. O JSX é uma extensão adicional à versão ES6 do ECMAScript (o ECMAScript é o nome oficial padronizado para JavaScript). Isso facilita o aprendizado e agiliza a compreensão da maioria deles, levando a um gráfico de aprendizado exponencial.

Aqui ocorre uma pergunta. Navegadores gerais são capazes de interpretar JavaScript, que é a linguagem da web, então como os navegadores interpretam a sintaxe do JSX?

A resposta para isso está no processo popularmente conhecido como transpilar , que significa transformação + compilação de código. Essa transpilação é feita pelo Babel, um compilador de javascript , que fornece suporte a JSX para navegadores , primeiro convertendo o código JSX em javascript e, em seguida, compilando-o para processamento adicional. Além disso, Babel faz mais do que isso. A versão mais recente do ECMAScript, ES6 (a maioria dos aplicativos React atualmente usam a versão ES6) é convertida para ES5 por ele para uso em versões mais antigas do navegador. Assim, tornar Babel uma ferramenta importante para o desenvolvimento de React (preferencialmente ao usar o ES6).

Além dos mencionados acima, o React fornece flexibilidade para os desenvolvedores, permitindo fácil DOM (Document Object Manipulation ). Isso pode ser entendido pelo seguinte:

Reagir é usado para renderizar os vários componentes na página da Web. Agora suponha que em um ponto precisamos manipular qualquer componente em particular, então traremos mudanças em nosso código e então renderizar o componente novamente será necessário. No caso da API DOM real, é necessário renderizar novamente todos os componentes, mesmo que qualquer um deles seja atualizado . Isso levou ao problema do gargalo de desempenho, que dificultou a manipulação de componentes, gastando recursos e tempo.

Reagir resolve esse problema usando o VirtualDOM. Este VirtualDOM atua como um agente entre o desenvolvedor e o DOM real. Isso facilita toda a estrutura dos componentes como uma árvore, com cada componente organizado como um nó (logicamente). Agora, sempre que qualquer componente for atualizado, o React precisará renderizar novamente apenas esse componente em particular, pois ele atualizará apenas o nó necessário. Assim, economizando-nos todo o tempo e recursos e aumentando o desempenho.

Estas são algumas das principais características e vantagens que tornam o React o que é. Para iniciar essa jornada de criação de aplicativos da Web interativos, essa poderosa biblioteca de interface do usuário requer muito mais aprendizado e prática!

Aprendizagem Feliz!