Como configurar o React.JS no lado do cliente em desenvolvimento de pilhas Mern

Reagir.JS é considerado o nível superior no desenvolvimento da pilha Mern. É um declarativo Estrutura JavaScript usado para desenvolver aplicativos dinâmicos do lado do cliente. Ele também permite criar interfaces complexas, conectando os componentes de seus dados do servidor de back -end e depois renderizá -los como HTML. O React também se destaca em lidar com interfaces orientadas a dados e com estado com código mínimo e outras funcionalidades, como manipulação de erros, listas, formas, eventos, que você espera de uma estrutura da web moderna.

Este artigo demonstrará como configurar o Reagir.JS aplicação em lado do cliente em Desenvolvimento da pilha Mern. Então vamos começar!

Observação: Assegure-se de ter "Nó.JS”Instalado em seu sistema. Instale -o primeiro antes de pular no React.Desenvolvimento de aplicativos JS se você ainda não o tiver.

Como configurar o React.JS no lado do cliente em desenvolvimento de pilhas Mern

Nó.JS também tem um “npm”Node Package Manager, que instalará todos os pacotes JavaScript necessários em seu React.Projeto JS. Também compreende uma ferramenta de pacote de nó “npx”Ferramenta que você pode usar para executar pacotes executáveis.

Para configurar o React.JS no lado do cliente no desenvolvimento de pilhas Mern, você primeiro precisa selecionar um diretório para instalar o React.Projeto baseado em JS. Você pode usar o “Prompt de comando”Para esse fim. No entanto, utilizaremos o “Código do Visual Studio”Terminal, facilitando a operação com o React.Aplicação JS.

Para fazer isso, em primeiro lugar, procure o “Código do Visual Studio”Aplicação e abra:

No aplicativo aberto, clique no “Arquivo”Opção da barra de menus e selecione o“Pasta aberta”Opção:

Agora, navegue pela pasta onde você deseja colocar seu reagir.Arquivo relacionado ao aplicativo JS. No nosso caso, selecionamos o “Funcionário-Mern-ProjetoPasta, presente na “Disco local (e :)”:

Em seguida, pressione Ctrl + Shift + ' Para abrir o terminal do Código do Visual Studio. Você também pode executar a operação especificada com a ajuda do menu "terminal":

Neste ponto, estamos todos prontos para configurar o React.Aplicação JS no desenvolvimento da pilha Mern. A execução do “npx”Comando com o“Criar-react-app”A opção ajuda você a criar um reagir.Aplicação JS. Por exemplo, o abaixo foi dado “npx"Comando criará um"Mern-EMSYSTEM" Reagir.Aplicativo JS que terá todas as dependências necessárias em sua pasta do projeto:

> NPX CREATE-REACT-APP MERN-EMSYSTEM

Aguarde alguns minutos, pois a instalação dos pacotes levará algum tempo:

A saída livre de erros abaixo indica que instalamos com sucesso o “Mern-EMSYSTEM" Reagir.Aplicativo JS:

O código do Visual Studio carregará automaticamente o Criar React.Pasta de aplicativos JS. Agora, faremos algumas mudanças no “índice.html”Arquivo do“Mern-EMSYSTEM" Reagir.Aplicativo JS:

O "índice.html”Arquivo do seu reagem.O aplicativo JS será de alguma forma assim:

Aqui, "React app" representa o "título" nosso "Mern-EMSYSTEM" aplicativo:

Vamos utilizar o reagir criado.Aplicação JS para desenvolver um sistema de gerenciamento de funcionários com Mern Stack. Então, em primeiro lugar, mudaremos o título de nosso “Mern-EMSYSTEM" Reagir.Aplicativo JS para “Sistema de gerenciamento de funcionários”E salve o aberto“índice.html" arquivo:

Na próxima etapa, mudaremos o diretório de trabalho atual para “Mern-EMSYSTEM”Usando o terminal:

> CD MERN-EMSYSTEM

Agora, escreva o abaixo-dado “npm”Comando para iniciar o desenvolvimento do servidor da web:

> NPM START

Como você pode ver na saída que “Mern-EMSYSTEM”O projeto é compilado com sucesso e pronto para visualizar no navegador:

Digitando o “LocalHost: 3000”Na barra de endereço do nosso navegador, veremos a seguinte interface para“Mern-EMSYSTEM" Reagir.Aplicativo JS:

Você também pode alterar o conteúdo do “Aplicativo.JS”Arquivo JavaScript para manusear ou visualizar os componentes do seu aplicativo React:

Por exemplo, adicionando o seguinte código em nosso “Aplicativo.JS”O arquivo salvará o“Sistema de gerenciamento de funcionários”Conteúdo dentro de um contêiner:

importar './Aplicativo.CSS ';
função app ()
retornar (

Sistema de gerenciamento de funcionários

);

exportar aplicativo padrão;

A partir da imagem abaixo, você pode ver que o adicionado “Sistema de gerenciamento de funcionários”Conteúdo para o nosso reagir.O aplicativo JS é exibido com sucesso:

Isso foi tudo sobre o procedimento de configuração de reação.Aplicativo JS no lado do cliente no desenvolvimento da pilha Mern. Você pode fazer mais personalização de acordo com seus requisitos.

Conclusão

Reagir.JS é uma biblioteca JavaScript utilizada para desenvolver o front-end dos aplicativos com base na pilha Mern. Permite aos usuários criar componentes e código da interface do usuário em javascript. Devido à sua capacidade de lidar com a rápida mudança nos dados e construir uma forte conexão com o back-end, é comumente usado no desenvolvimento de aplicativos de pilha Mern. Este artigo demonstrou o procedimento de configuração Reagir.JS aplicação em lado do cliente em Desenvolvimento da pilha Mern.