React.js (introdução e trabalho)
Introdução ao ReactJS: Vamos entender isso com um exemplo prático.
Digamos que um de seus amigos postou uma fotografia no Facebook. Agora você vai e curtiu a imagem e então começou a conferir os comentários também. Agora, enquanto você está navegando nos comentários, vê que a contagem de curtidas aumentou em 100, pois você gostou da foto, mesmo sem recarregar a página. Essa mudança mágica na contagem é por causa de Reactjs.
React é uma biblioteca JavaScript declarativa, eficiente e flexível para construir interfaces de usuário. É 'V' em MVC. ReactJS é uma biblioteca de front-end baseada em componentes de código aberto responsável apenas pela camada de visualização do aplicativo. É mantido pelo Facebook.
O React usa um paradigma declarativo que torna mais fácil raciocinar sobre seu aplicativo e tem como objetivo ser eficiente e flexível. Ele projeta visualizações simples para cada estado em seu aplicativo, e o React atualizará e renderizará com eficiência o componente certo quando seus dados forem alterados. A visão declarativa torna seu código mais previsível e fácil de depurar.
Um aplicativo React é feito de vários componentes, cada um responsável por renderizar uma pequena parte reutilizável de HTML. Os componentes podem ser aninhados em outros componentes para permitir que aplicativos complexos sejam construídos a partir de blocos de construção simples. Um componente também pode manter um estado interno - por exemplo, um componente TabList pode armazenar uma variável correspondente à guia aberta no momento.
Nota: React não é uma estrutura. É apenas uma biblioteca desenvolvida pelo Facebook para resolver alguns problemas que enfrentávamos anteriormente.
Pré - requisitos : Baixe os pacotes do Node com sua versão mais recente.
Exemplo: crie um novo projeto React usando o comando abaixo:
npx create-react-app myapp
Nome do arquivo App.js: Agora altere o arquivo App.js com o código fornecido a seguir:
import React,{ Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h1>Hello, Learner.Welcome to GeeksforGeeks.</h1>
</div>
);
}
}
export default App;
Saída:
Como funciona: ao construir aplicativos do lado do cliente, uma equipe de desenvolvedores do Facebook percebeu que o DOM é lento (o Document Object Model (DOM) é uma interface de programação de aplicativos (API) para documentos HTML e XML. Ele define a estrutura lógica de documentos e a forma como um documento é acessado e manipulado.). Portanto, para torná-lo mais rápido, o React implementa um DOM virtual que é basicamente uma representação de árvore do DOM em JavaScript. Portanto, quando precisar ler ou gravar no DOM, ele usará a representação virtual dele. Em seguida, o DOM virtual tentará encontrar a maneira mais eficiente de atualizar o DOM do navegador.
Ao contrário dos elementos DOM do navegador, os elementos React são objetos simples e baratos de criar. O React DOM cuida da atualização do DOM para corresponder aos elementos do React. A razão para isso é que o JavaScript é muito rápido e vale a pena manter uma árvore DOM nele para acelerar sua manipulação.
Embora o React tenha sido concebido para ser usado no navegador, devido ao seu design também pode ser usado no servidor com Node.js.
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva