React.js: introdução ao React.js

Olá, meu nome é Tony e estou dentro. Com essas lições você aprenderá por que escolher React em vez de simples JavaScript em HTML e crie um novo aplicativo React usando Create Utilitário de aplicativo React. Nesta lição, daremos uma olhada no que React realmente é e como surgiu. React é uma biblioteca JavaScript. É open source, o que significa que é fonte. O código pode ser acessado e visualizado por qualquer pessoa. E foi criado pelo Facebook com. A intenção de unificar a web também. Como design de interface de usuário móvel sob um guarda-chuva comum. Na verdade, já existe há algum tempo com o primeiro versão de. React sendo apresentado ao público como. Já em 2013. No entanto, desde cerca de 2018, cresceu aos trancos e barrancos levando a outras estruturas avançadas, como NextJS na verdade, usando o React como base e construindo em cima. Das suas capacidades já impressionantes e abrangentes. React é usado principalmente para aplicativos dinâmicos. O que significa que seu conteúdo muda conforme os dados. Por trás das mudanças na interface. Agora, com o site padrão da velha escola. Não foi o caso. Então, toda vez que um usuário iria. Para um novo URL associado a um. Aplicativo, uma nova solicitação HTTP teria que ser emitida e todos dos conteúdos que compõem a página. Então, cada gráfico, tudo para despesas gerais menu, a barra lateral, o rodapé seria. Tem que ser reobtido do zero e renderizado novamente no tempo e vez novamente. Se você pode imaginar, isso não é. Muito eficiente e o React resolve esse problema. Através do uso de renderização parcial e hidratação de dados. O que isso significa é que uma vez que nosso modelo é carregado no navegador, apenas o. Os dados que variam do estado exibido atualmente são atualizados. Ao contrário do site da velha escola que dependia. O modelo cliente-servidor da velha escola. O que isso significa que as únicas peças. Essas mudanças na tela do usuário são as que diferem do estado atualmente exibido. Como tal, navegar de uma página para outra não causa mais uma completa renderização de cada coisa que um usuário vê. Isso leva a uma transferência de dados muito mais eficiente estratégia, pois menos dados precisam ser transmitidos do servidor para o cliente. Além disso, outro recurso utilizado pelo React para alcançar um aumento de desempenho é o uso de Shadow Dom. Agora você provavelmente já está familiarizado. Com nosso Dom padrão, mas apenas para. Certifique-se de que estamos todos ligados. A mesma página, dom é uma sigla. Que significa Módulo de Objeto de Documento. Quando a nossa página web, também chamada de documento, é carregado no navegador, seu conteúdo é analisado e todos as informações sobre o objeto, its. A estrutura, bem como todas as suas partes constituintes, são carregadas na memória. Do cliente ou do navegador. Mas infelizmente para nós, juntamente com tudo o que diz respeito para a nossa aplicação, outras coisas acabam lá também e. Eles pertencem à funcionalidade principal do navegador. Isso não é muito útil para nós. E é aqui que Shadow Dom entra em Shadow Dom é um subconjunto do Dom regular, e sua principal vantagem é. Que a única informação que mantém é a informação que refere-se ao nosso aplicativo e absolutamente nada mais. Ter menos coisas em nossa sombra, Dom. Than Dom é obviamente benéfico. E ter tudo isso aplicado à nossa aplicação significa apenas que pudermos. Armazene, extraia e manipule apenas as peças que necessitamos. Isso leva a um aumento significativo de desempenho. React é baseado em componentes, o que significa que. Alcançando os resultados que buscamos, iremos desmembrar nossos aplicação em uma série de componentes para encapsular cada parte visual da interface do usuário. Isso nos dá a capacidade de reutilizar. Nosso componente em todo o site, agilizando nosso esforços de desenvolvimento. E, além disso, leva à uniformidade. A aplicação, possibilitando assim uma navegação mais suave, menos confusa e experiência do usuário mais abrangente, desde. Componentes usados ​​para coisas semelhantes serão usados ​​em um maneira semelhante em todo o aplicativo. Por último, para aqueles que podem estar familiarizados com outros JavaScript frameworks, o react fornece uma ligação de dados unilateral. O que isso significa são os dados contidos. Nossa aplicação flui em uma direção, em uma direção apenas, do pai superior. Para o componente filho inferior. Em nossa próxima lição, veremos por que usaríamos Reaja sobre JavaScript simples em HTML. Obrigado por assistir. Tchau.