Instalando o React.js no Mac

O software é uma biblioteca JavaScript de front-end gratuita e de código aberto. Em 2013, o React.JS foi estabelecido pelo Facebook.

É uma biblioteca de interface do usuário (UI) que é usada para criar e manipular componentes de interface do usuário. É um pacote que permite aos desenvolvedores criar aplicativos SPA orientados a dados altamente eficientes.

Baseia-se na programação funcional, baseia-se no conceito de imutabilidade e promove a arquitetura baseada em componentes com base no princípio de reutilização única.

Neste artigo, veremos os procedimentos de como instalar o react no mac. Depois de concluir os estágios de instalação, recomendamos que você participe do treinamento React online.

Vamos explorar alguns termos antes-

NodeJS e NPM

• Você primeiro precisa instalar o NodeJS e o NPM para obter a instalação do React no Mac.
• É um mecanismo JavaScript que permite executá-lo fora do navegador.
• O NPM (gerenciador de pacotes do nó) é usado na linha de comando. É para instalar bibliotecas como ReactJS.
• Você pode instalar o NodeJS através do site oficial. Quando você instala o NodeJS, ele também baixa o NPM para você.
• Após baixar o NodeJS de seu site, encontre o arquivo “.pkg”. Basta clicar duas vezes sobre isso. Ele irá lançar um pop-up para instalação.
• Você será direcionado para o processo de instalação. Clique em “Instalar” ou “Modificar local de instalação”
• Quando o processo estiver concluído, você será avisado com uma mensagem final. Seu NodeJS e NPM estão instalados.

Instalando o ReactJS no MacOS

Depois de instalar o NodeJS e o NPM, pode-se instalar o ReactJS. Isso é feito executando npm install-save react react-dom.

Criar projeto ReactJS

Como instalamos o ReactJS, pode-se criar um novo diretório de projeto react. Isso é feito executando npx create react project. criar-reagir-aplicativo.

React- Introdução

Antes de prosseguir com a instalação do React-Lib no Mac, devemos primeiro obter um entendimento básico do React.

• O React é um pacote que auxilia desenvolvedores e arquitetos da Web a atender às expectativas dos clientes que exigem alto fluxo de dados e interfaces de usuário rápidas e responsivas no contexto dos dados.
• Ele é construído em uma arquitetura baseada em componentes. A página da Web pode ser representada por componentes Pai e Filho.
• Ele depende em grande parte do Virtual DOM, que funciona como um otimizador de desempenho para operações DOM.
• Uma página da Web HTML tem uma árvore DOM, que o navegador usa para renderizar a página da Web.

Quando um usuário interage com uma página, isso envolve a adição e inserção de informações com base na ação do usuário. como em Um usuário adicionou um item ao carrinho. O carrinho agora exibe o item alterado como resultado da decisão do usuário.

Nos bastidores, o documento HTML passa por uma transformação que permite que a página modificada seja compartilhada.

Como dito anteriormente, a árvore DOM representa o documento HTML. No caso anterior, o DOM requer alguns ajustes, que incluem a inserção e exclusão de nós HTML específicos.

Isso ajuda a exibir as informações essenciais que simbolizam o que um usuário está tentando fazer no contexto da revisão de seu

decisão de compra.

Podemos ver o DOM como uma árvore para melhor compreendê-lo.

A árvore tem raízes, bem como galhos. Da mesma forma, o elemento HTML está na parte superior do DOM e os nós abaixo dele são conectados ao nó pai. Em termos de analogia de árvore, o nó pai pode ser representado como o tronco, com outros nós conectando-se ao tronco. E o React é usado para melhorar as operações de inserção e exclusão nesses nós.

Há uma penalidade de memória associada a esta operação de inserção e exclusão no HTML DOM. Em termos de operações de atualização do DOM, o DOM virtual funciona como um otimizador de desempenho.

Ele mantém duas cópias: uma do DOM real (react DOM) e uma das atualizações a serem feitas. O processo de minimizar a modificação no react DOM também é pesquisado como parte do processo de reconciliação.

Node.js e npm

O Node.js executa o código do JavaScript. É um ambiente de tempo de execução de código aberto e multiplataforma para JavaScript. É alimentado pelo motor Chrome V8. O mecanismo Chrome V8 é escrito em C++. O Node é compatível com Windows, Mac e Linux.

Depois de instalar o Node.js, podemos executar o aplicativo baseado em React localmente em nosso sistema durante o desenvolvimento. Isso também nos permite implantar nosso programa no servidor de produção.

O Node.js inclui os seguintes recursos:

• Usa JavaScript como sua linguagem principal
• E/S sem bloqueio
• Suporta programação assíncrona
• Pode gerenciar várias solicitações de conexão utilizando um único servidor.

Npmjs.org é um repositório de código online de milhares de módulos (npm) que nos permite instalar módulos de nós usando comandos simples.

Alguns módulos são autocontidos, enquanto outros requerem interdependência para funcionar corretamente. O Node.js nos permite realizar operações de leitura e escrita no servidor. Também permite trabalhar com bancos de dados.

Em vez de criar funcionalidades do zero, podemos caçar um módulo e reutilizar e estender sua funcionalidade.

As iniciativas do desenvolvedor geralmente envolvem restrições de tempo e orçamento. Quando se trata de Node. desenvolvimento baseado em js, npmjs.org é uma tábua de salvação para a comunidade de desenvolvedores.

Resumindo

Neste tutorial, aprendemos sobre o React.js e a abordagem de arquitetura baseada em componentes no React.js. Também obtivemos uma visão geral de alto nível do DOM virtual.

Discutimos o conceito de reconciliação, o uso do Node.js no mundo do JavaScript e sua capacidade de gerenciar saídas de E/S sem bloqueio para atender solicitações de conexão do cliente simultaneamente.

Testamos duas técnicas para instalação do Node.js: uma com o gerenciamento de pacotes e outra com a linha de comando.

Para começar a usar o React.js rapidamente, usamos o módulo create-react-app. Também podemos usar a linha de comando para instalar o React.js.

Para evitar ficar sobrecarregado com muitos detalhes, usamos a técnica create-react-app para este tutorial. Vimos nosso primeiro aplicativo react rodando depois de desenvolvê-lo. Avaliamos rapidamente os arquivos importantes que estão operando o aplicativo para nos familiarizarmos com o código do ponto de vista do desenvolvimento.

Leia também:

• Os vírus do Mac estão vivos Mate-os e habite em tranquilidade!