Explicar el fragmento de código básico de JSX

En este artículo, aprenderemos sobre los fragmentos de código básicos de reaccionar JSX. La forma completa de la palabra JSX es JavaScript-XML. Esta es una extensión de la sintaxis del lenguaje JavaScript. JSX nos permite implementar fragmentos de código HTML en React directamente con muy pocos cambios en la sintaxis. 

Importancia de JSX: en términos de sintaxis, no es obligatorio escribir código JSX en reaccionar. Pero la estructura de archivos incorporada consiste en los componentes que están escritos en código JSX simple. Los desarrolladores lo encuentran útil ya que el código JSX muestra mensajes de error y advertencia más útiles mientras trabajan con la interfaz de usuario dentro del proyecto JavaScript. El código JSX también parece más limpio y fácil de depurar que las plantillas creadas con el método ‘ React.createElement( ) y React.appendChild() ‘.

Ahora vamos a crear un componente JSX dentro de una aplicación de reacción. Mire la explicación detallada del componente.

Explicación del fragmento de código JSX: ahora vamos a aprender las propiedades básicas de los fragmentos de código JSX.

• Inserción de código HTML de varias líneas: al insertar el código HTML en un elemento JSX, si el código HTML es de varias líneas, coloque el código HTML entre paréntesis. Puede ver claramente en el siguiente ejemplo que el código HTML dentro de ‘jsxElement’ está encerrado entre paréntesis.
• Un elemento de nivel superior: si hay varios elementos en el fragmento de código HTML, deben envolverse con un elemento principal. En nuestro ejemplo hemos envuelto nuestro <h1> y el elemento <p> con un elemento <div>.
• Atributo ‘ className’ que reemplaza a ‘class’: El atributo ‘class’ convencional de HTML es similar a la palabra clave ‘class’ de JavaScript. Entonces, para evitar cualquier colisión, el atributo HTML ‘clase’ se renombra a ‘className’. El atributo ‘className’ reemplaza al atributo ‘class’ y hace el mismo trabajo que el atributo ‘class’.
• Los elementos deben estar cerrados: mientras se escribe HTML no es necesario cerrar todas las etiquetas, al menos el sistema no arrojará ningún error si algunas etiquetas no están cerradas. Pero en el caso de JSX, no puede dejar un elemento sin cerrar todas las etiquetas. Tirará un error.

Ejemplo: 

Creando una aplicación de reacción:

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

npx create-react-app name_of_the_app

Paso 2: después de crear la aplicación de reacción, muévase al directorio según el nombre de su aplicación usando el siguiente comando:

cd name_of_the_app

Estructura del proyecto: Tendrá el siguiente aspecto.

Creación del elemento JSX: ahora vamos a crear un elemento JSX dentro del componente de la aplicación del archivo App.js. Los pasos se discuten a continuación.

• Borre todo dentro del componente de la aplicación del archivo App.js.
• Cree una nueva variable llamada ‘jsxElement’ dentro del componente de la aplicación.
• Establezca el valor de la variable ‘jsxElement’ en el fragmento de código HTML que desea mostrar. Si el fragmento de código tiene varias líneas, asegúrese de que el fragmento de código HTML esté entre paréntesis.
• Devuelve la variable ‘jsxElement’ del componente de la aplicación.
• La variable ‘jsxElement’ es un ejemplo de un elemento JSX básico. Y el HTML dentro del elemento JSX es el ejemplo de un ‘fragmento de código básico de JSX’.

Archivo App.js

// The App.js file
import './App.css';
  
function App() {
  
  let jsxElement=(
    <div className="App">
      <h1 className="heading">Welcome To GeeksforGeeks</h1>
      <p>Hello World</p>
    </div>
  );
  return jsxElement;
}
  
export default App;

Archivo App.css: el archivo App.css se importa en la parte superior. Es el archivo ‘App.css’ predeterminado que aparece con la estructura del proyecto de reacción. Después de crear el elemento JSX, lo modificamos y agregamos nuestros propios estilos en su interior.

/* App.css File */
.App {
    margin-left: 100px;
}
  
.heading {
    color: #308d46;
}

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

inicio de npm

Producción: