React.js usa a extensão JSX de JavaScript para fornecer uma maneira mais fácil de codificar nosso aplicativo. As funções são uma das partes mais importantes de qualquer aplicativo da web e, usando-as, podemos realizar cálculos otimizados e renderização da IU que, em última análise, nos fornece um site totalmente construído. Neste artigo, discutiremos como podemos adicionar uma função em JSX.

Criando o aplicativo React e instalando o módulo:

  • Etapa 1: crie um aplicativo React usando o seguinte comando:

    npx create-react-app foldername

  • Etapa 2: depois de criar a pasta do projeto, ou seja , nome da pasta , mova para ela usando o seguinte comando:

    cd foldername

  • Etapa 3: Depois de configurar o ambiente react em seu sistema, podemos começar criando um arquivo App.js e criar um diretório com o nome dos componentes nos quais escreveremos nossa função desejada.



Estrutura do projeto: terá a seguinte aparência.

Agora vamos ver como adicionar uma função com JSX.

Exemplo 1: Neste exemplo, vamos considerar um exemplo para demonstrar como uma função pode ser adicionada ao nosso aplicativo. Agora dentro do diretório do componente, criaremos um arquivo display.js que conterá a função display que será adicionada ao aplicativo.

import React from "react";
  
// This is the function that will be added to the application
function Display() {
  return <h1>GeeksForGeeks</h1>;
}
  
export default Display;

Agora, a etapa final é incorporar nossa função ao aplicativo. Isso pode ser feito importando a função para o arquivo App.js e usando o nome da função como uma tag JSX personalizada.

import "./styles.css";
// Importing the function
import Display from "./components/display";
  
export default function App() {
  return (
    <div className="App">
      {/* Creating custom JSX tag to return the function */}
      <Display></Display>
    </div>
  );
}

Saída: Assim, podemos ver que é realmente simples adicionar funções ao nosso código JSX. O exemplo fornecido era bastante simples, mas a renderização complexa e os cálculos desejados também podem ser feitos dentro das funções e, em seguida, podem ser usados ​​no código do nosso aplicativo.

Exemplo 2: Agora, neste exemplo, criaremos o arquivo display.js com uma alteração. Desta vez, poderemos alterar o conteúdo do cabeçalho do arquivo App.js.

import React from "react";
  
// The contents of the header can 
// be modified in this function
function Display(props) {
  return <h1>{props.name}</h1>;
}
  
export default Display;

Agora, iremos incorporar a função no arquivo App.js como fizemos no exemplo anterior.

import "./styles.css";
// Importing the function
import Display from "./components/display.js";
  
export default function App() {
  return (
    <div className="App">
      {/*Customised JSX tag with different inputs*/}
      <Display name="Geeks"></Display>
      <Display name="For"></Display>
      <Display name="Geeks"></Display>
    </div>
  );
}

A partir do código, podemos prever a saída agora. Observe que você pode renderizar sua saída personalizada apenas alterando a propriedade name na tag.

Saída:

Referências: