Introducción a los componentes web UI5 para React

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.

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.

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;

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.