Saltar al contenido
Tutoriales de sap

Introducción a los componentes web UI5 para React

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

  1. Abra el directorio actual con un editor de su elección (por ejemplo, Visual Studio Code).

  2. Dentro de la carpeta de su proyecto, navegue hasta src. Allí, cree un nuevo archivo y asígnele el nombre MyApp.jsx.

  3. 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

  1. 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.

  2. Importe su componente probado.

    import { MyApp } from "./MyApp";
  3. Agregue el componente al return El valor de App().
    function App() {
  return (
    <ThemeProvider>
      <MyApp />
    </ThemeProvider>
  );
}

Hacer App.js este archivo ahora debería verse así:

import React from "react";
import { MyApp } from "./MyApp";
import { ThemeProvider } from "@ui5/webcomponents-react/lib/ThemeProvider";

function App() {
  return (
    <ThemeProvider>
      <MyApp />
    </ThemeProvider>
  );
}

export default App;

Hecho

Inicie sesión para responder la pregunta

Paso 4: inicie la aplicación para comenzar a desarrollar

Ahora puede iniciar la aplicación en modo de desarrollo. Ejecute el siguiente comando desde el directorio raíz del proyecto.

npm start

Abierto http: // localhost: 3000 para verlo en el navegador.

Si realiza cambios en el código, la página se recargará automáticamente. Verá los errores de compilación y las advertencias de pelusa en la consola.

SUGERENCIA: Puede colocar una ventana del navegador junto al editor en su pantalla para ver los cambios en vivo en acción.

separar