Componentes são os blocos de construção da aplicação do React e têm uma parte independente de alguma funcionalidade que você pode reutilizar no front-end do seu projeto. O arquivo de componente pode compreender as funções e classes JavaScript simples; No entanto, você pode utilizá -los como elementos HTML personalizados. Os componentes são utilizados para adicionar menus, botões ou qualquer outro conteúdo da página ao seu reagir.JS Front-end, e também é usado para incluir as informações de remarcar e estados.

Este artigo demonstrará como criar a componente em Reagir.JS. Então vamos começar!

Como criar um componente no React.JS

Em React.JS, componentes exibem o que queremos ver em nosso aplicativo React. Um componente de reação pode levar o "adereços" ou propriedades como parâmetros e retornar uma hierarquia de visualização para exibir usando o método de renderização. O código adicionado no método renderizar definirá o que você deseja mostrar na tela. Reagir.JS pega o corpo do método de renderização e depois exibe os resultados de acordo com ele. Os aplicativos de reação podem atualizar com eficiência e depois renderizar os componentes adicionados quando os dados mudarem.

Antes de criar um componente em nosso React.Aplicativo JS, em primeiro lugar, mostraremos como a interface do nosso reagir.O aplicativo JS se parece:

Para esse fim, vamos nos mudar para o nosso React.Pasta de aplicativos JS executando o seguinte comando no terminal:

> CD MERN-EMSYSTEM

Neste ponto, você deve garantir que você reaja.O aplicativo JS está em execução na porta especificada. Caso contrário, escreva o comando abaixo do jogo para iniciar seu servidor da web front-end:

> NPM START

Aqui está a interface básica do nosso aplicativo do sistema de gerenciamento de funcionários:

Agora, abra uma nova janela do terminal clicando no botão "+", que é destacado na imagem abaixo:

Utilizaremos a nova janela do terminal para instalar a estrutura de bootstrap CSS para facilitar o estilo:

> NPM Instale Bootstrap

Na próxima etapa, abra o "Aplicativo.js " Arquivo javascript, localizado no "SRC" diretório:

Agora, importe o “Bootstrap” Arquivo CSS adicionando as seguintes linhas:

Importar "Bootstrap/Dist/CSS/Bootstrap.min.CSS ";

Imprensa “Ctrl+S” para salvar as mudanças adicionais e depois criar um novo “Componentes” pasta no "SRC" pasta:

Depois de fazer isso, criaremos um novo “Instruções.js " Arquivo de componentes:

Em seguida, abra o criado “Instruções.js " Arquive e adicione o código abaixo dado nele:

Nossa idéia é criar um componente personalizado que exibirá um título, alguma descrição e uma imagem relacionada ao nosso sistema de gerenciamento de funcionários reagir.Aplicação JS. Para esse fim, em primeiro lugar, imporemos o "Reagir" e os seus "Componente" classe e o “Ems.png ” imagem, que queremos adicionar a este componente de instruções. O "Componente" A classe base pode ser estendida para criar os componentes necessários.

O "Componente" A classe possui várias funções que podem ser utilizadas para aprimorar a funcionalidade do método criado e “Render ()” é um desses métodos. “Render ()” é usado para devolver o código JSX que você deseja visualizar no navegador:

importar react, componente de 'react';
importar EMS de './ems.png ';
As instruções da classe de exportação estendem o componente
render ()
retornar(

Projeto Mern do funcionário

Este é um sistema de gerenciamento de funcionários

;

)


exportar instruções padrão;

Depois de adicionar o código no "Instrução.js ", imprensa “Ctrl+S” para salvá -lo e depois abrir seu "Aplicativo.js " arquivo:

Seu react criado.O componente JS não será útil até você importá -lo para o seu "Aplicativo.js " Arquive e embrulhe os componentes criados com os colchetes do ângulo.

Aqui nós importamos o “Instruções” componente e adicionou o componente especificado como "" no "retornar()" função do Aplicativo():

importar reagem de 'react';
Importar "Bootstrap/Dist/CSS/Bootstrap.min.CSS ";
Importar instruções de './componentes/instruções ';
função app ()
retornar (


);

exportar aplicativo padrão;

Depois de importar o “Instruções” Componente, vamos executar nosso reagir.Aplicativo JS:

> NPM START

Da saída, você pode ver que nosso “Instruções” O componente está exibindo com sucesso o conteúdo adicionado:

Conclusão

Em React.JS, componentes são os elementos independentes que podem ser reutilizados em uma página. Eles exibem o que queremos ver em nosso aplicativo React. Você também pode dividir aplicativos complexos em seções menores que podem ser mais fáceis de projetar e gerenciar com a ajuda de componentes. Este artigo demonstrou como criar a componente no Reagir.JS aplicativo. Além disso, o procedimento de criação e uso de um componente personalizado também é fornecido a você.