¿Cómo agregar una función en JSX?

React.js usa la extensión JSX de JavaScript para brindarnos una manera más fácil de codificar nuestra aplicación. Las funciones son una de las partes más importantes de cualquier aplicación web y, al usarlas, podemos realizar cálculos optimizados y renderizar la interfaz de usuario, lo que finalmente nos proporciona un sitio web completamente construido. En este artículo, discutiremos cómo podemos agregar una función en JSX.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de configurar el entorno de reacción en su sistema, podemos comenzar creando un archivo App.js y crear un directorio con el nombre de los componentes en el que escribiremos nuestra función deseada.

Estructura del proyecto: Tendrá el siguiente aspecto.

Ahora veamos cómo agregar una función con JSX.

Ejemplo 1: En este ejemplo, consideraremos un ejemplo para demostrar cómo se puede agregar una función a nuestra aplicación. Ahora, dentro del directorio del componente, crearemos un archivo display.js que contendrá la función de visualización que se agregará a la aplicación.

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

Ahora, el paso final es incorporar nuestra función en la aplicación. Esto se puede hacer importando la función al archivo App.js y usando el nombre de la función como una etiqueta 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>
  );
}

Salida: Por lo tanto, podemos ver que es realmente simple agregar funciones a nuestro código JSX. El ejemplo proporcionado fue bastante simple, pero la representación compleja y los cálculos deseados también se pueden hacer dentro de las funciones y luego se pueden usar en nuestro código de aplicación.

Ejemplo 2: Ahora, en este ejemplo, crearemos un archivo display.js con un cambio. Esta vez podremos cambiar el contenido del encabezado del archivo 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;

Ahora, ahora incorporaremos la función en el archivo App.js como hicimos en el ejemplo 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 del código, podemos predecir la salida ahora. Tenga en cuenta que puede generar su salida personalizada simplemente cambiando la propiedad de nombre en la etiqueta.

Producción:

Referencias:

• https://www.geeksforgeeks.org/reactjs-funcional-components/

• https://reactjs.org/docs/faq-functions.html