React es una gran herramienta de desarrollo de inicio para crear aplicaciones de una sola página (SPA). UI5 Web Components para React proporciona la implementación de React compatible con SAP de Fiori al aprovechar la Componentes web UI5.
SAP Fiori proporciona una experiencia de usuario coherente y holística para el software SAP. Al crear diseños visualmente agradables con un fuerte enfoque en la facilidad de uso, la experiencia es intuitiva y simple en todos los dispositivos.
Este primer tutorial comenzará creando una aplicación React que podrá consumir UI5 Web Components para React.
Paso 1: Inicie la aplicación con create-react-app
Navegue a una carpeta donde desea crear su aplicación web y luego abra una terminal. Luego usa el siguiente comando:
npx create-react-app my-app --template @ui5/cra-template-webcomponents-react
cd my-app
Aprovecha este comando crear-reaccionar-aplicación para crear una aplicación React con todas las dependencias necesarias en UI5 Web Components para React.
Hecho
Inicie sesión para responder la pregunta
Paso 2: crea tu nuevo componente raíz
Abra el directorio actual con un editor de su elección (por ejemplo, Visual Studio Code).
Dentro de la carpeta de su proyecto, navegue hasta src. Allí, cree un nuevo archivo y asígnele el nombre MyApp.jsx.
Ahora agregue las siguientes líneas de código MyApp.jsx.
import React from "react";
export function MyApp() {
return <div>My root component</div>;
}
Estructura del componente de reacción
Este es un componente muy simple, pero ya te muestra la estructura básica de todos los componentes. El archivo comienza con las declaraciones de importación en las primeras líneas. El componente se define entonces como una función (o sonó). Esta función comienza con las definiciones del aparato y la lógica, las incluiremos en un tutorial más adelante, y terminaremos volviendo a colocar los componentes JSX o HTML en una declaración de retorno.
Con esto creaste tu primero React componente. Para traer realmente el componente, deberá agregarlo a su src/App.js.
Hecho
Inicie sesión para responder la pregunta
Paso 3: inserte su nuevo componente
I App.js quitar todo dentro del <ThemeProvider>. Usted puede className propiedad y la import del logo y "./App.css" ya que ya no son necesarios para este tutorial.
Importe su componente probado.
import { MyApp } from "./MyApp";
Agregue el componente al return El valor de App().
Inicie sesión en XS Advanced CLI como XSA_ADMIN. Usar comando xs-admin-login desde el indicador en la máquina virtual como hxeadm Nota: Si no está usando…
Los tutoriales anteriores son una continuación de los tutoriales anteriores. Se asume que ha creado un TPCH usuario con los permisos correctos e iniciado sesión…