Cree un sitio mínimo en reacción con Oracle Content Management sin supervisión

Introducción

React es un marco JavaScript ampliamente utilizado para crear aplicaciones web.

Para consumir nuestro contenido de Oracle Content Management en una aplicación React, podemos utilizar el ejemplo mínimo de React disponible como repositorio de código abierto en GitHub.

En este tutorial, crearemos un sitio mínimo simple en React aprovechando Oracle Content Management como CMS horizontal y su kit de desarrollo de software (SDK) para la entrega de contenido en JavaScript. Oracle Content Management también incluye soporte para GraphQL para todo el contenido publicado y todos los tipos de activo. Este ejemplo de React está disponible en GitHub.

El tutorial consta de tres tareas:

1. Preparación de Oracle Content Management
2. Crear el sitio mínimo en React
3. Preparar la aplicación para su despliegue

Requisitos

Antes de continuar con este tutorial, le recomendamos que lea primero la siguiente información:

• conceptos clave
• Repositorios de activos

Para seguir este tutorial, necesitará:

• una suscripción a Oracle Content Management
• una cuenta de Oracle Content Management con el rol de administrador de contenido
• una computadora Windows o Mac con Node versión 10 o superior

Lo que estamos construyendo

Con el mínimo de React, puede recuperar fácilmente imágenes y otro contenido del repositorio de Oracle Content Management.

Para echar un vistazo a lo que estamos creando, este es el estado final de nuestro tutorial, un sitio básico mínimo de React que consume contenido de Oracle Content Management:

https://headless.mycontentdemo.com/samples/oce-react-minimal-sample

Este es el aspecto de la página inicial al final de este tutorial:

Este es el aspecto de la página de contacto al final de este tutorial:

Este es el aspecto de la página de personas al final de este tutorial:

Para continuar, deberá tener una suscripción activa a Oracle Content Management y conectarse con el rol de administrador de contenido.

Tarea 1: Preparación de Oracle Content Management

Si aún no tiene una instancia de Oracle Content Management, consulte el inicio rápido para obtener información sobre cómo registrarse en Oracle Cloud, aprovisionar una instancia de Oracle Content Management y configurar Oracle Content Management como CMS sin cabecera.

Para este tutorial, tendrá que crear un modelo de contenido. Hay un paquete de activos descargable disponible que rellenará el repositorio vacío con tipos de contenido y contenido asociado.

Para preparar Oracle Content Management:

1. Cree un canal y un repositorio de activos.
2. Cree un modelo de contenido mediante uno de estos dos métodos:
   • Método 1: Importar el paquete de activos de muestras de Oracle Content Management
   • Método 2: Cree su propio modelo de contenido

Creación de un canal y un repositorio de activos

Primero debe crear un canal y un repositorio de activos en Oracle Content Management para poder publicar contenido.

Para crear un canal y un repositorio de activos en Oracle Content Management:

1. Conéctese a la interfaz web de Oracle Content Management como administrador.

2. Seleccione Contenido en el menú de navegación izquierdo y, a continuación, seleccione Canales de publicación en la lista de selección de la cabecera de página.

   

3. En la esquina superior derecha, haga clic en Crear para crear un nuevo canal. Asigne el nombre 'OCEMinimalChannel' al canal para este tutorial y mantenga el acceso público. Haga clic en Guardar para crear el canal.

   

4. Seleccione Contenido en el menú de navegación izquierdo y, a continuación, seleccione Repositorios en la lista de selección de la cabecera de página.

   

5. En la esquina superior derecha, haga clic en Crear para crear un nuevo repositorio de activos. Asigne el nombre 'OCEMinimalRepository' al repositorio de activos para este tutorial.

   

6. En el campo Canales de publicación, seleccione el canal OCEMinimalChannel para indicar a Oracle Content Management que el contenido del repositorio OCEMinimalRepository se puede publicar en el canal OCEMinimalChannel. Haga clic en Guardar cuando haya terminado.

   

Creación de un modelo de contenido

El siguiente paso es crear un modelo de contenido. Puede utilizar uno de estos métodos:

• Método 1: Importar el paquete de activos de muestras de Oracle Content Management
• Método 2: Cree su propio modelo de contenido

Importar el paquete de activos de muestras de Oracle Content Management

Puede descargar un paquete de activos de ejemplo de Oracle Content Management preconfigurado que contiene todos los tipos de contenido y activos necesarios para este tutorial. Si lo prefiere, también puede crear su propio modelo de contenido en lugar de descargar el paquete de activos de ejemplo.

Puede cargar una copia del contenido que estamos utilizando en este tutorial desde el paquete de activos de muestras de Oracle Content Management. Esto le permitirá experimentar con los tipos de contenido y modificar el contenido. Si desea importar el paquete de activos de muestras de Oracle Content Management, descargue el archivo del paquete de activos OCESamplesAssetPack.zip y extráigalo en el directorio que desee:

1. Descargue el paquete de activos de muestras de Oracle Content Management (OCESamplesAssetPack.zip) desde la página descargas de Oracle Content Management. Extraiga el archivo zip descargado en una ubicación de la computadora. Después de la extracción, esta ubicación incluirá un archivo denominado OCEMinimal_data.zip.

2. Conéctese a la interfaz web de Oracle Content Management como administrador.

3. Seleccione Contenido en el menú de navegación izquierdo y, a continuación, seleccione Repositorios en la lista de selección de la cabecera de página. A continuación, seleccione OCEMinimalRepository y haga clic en el botón Importar contenido de la barra de acción superior.

   

4. Cargue OCEMinimal_data.zip desde la computadora local en la carpeta Documentos.

   

5. Una vez cargado, seleccione OCEMinimal_data.zip y haga clic en Aceptar para importar el contenido en el repositorio de activos.

   

6. Una vez que el contenido se haya importado correctamente, navegue a la página Activos y abra el repositorio OCEMinimalRepository. Verá que todas las imágenes y elementos de contenido relacionados se han agregado al repositorio de activos.

   

7. Haga clic en Seleccionar todo en la parte superior izquierda y, a continuación, en Publicar para agregar todos los activos importados al canal de publicación que ha creado anteriormente, OCEGettingStartedChannel.

   

8. Antes de publicar, debe validar todos los activos. En primer lugar, agregue OCEMinimalChannel como canal seleccionado y, a continuación, haga clic en el botón Validar.

   

9. Después de validar los activos, puede publicar todos los activos en el canal seleccionado haciendo clic en el botón Publicar en la esquina superior derecha.

   

Una vez hecho esto, puede ver en la página Activos que todos los activos se han publicado. (Puede hacerlo mediante el icono situado encima del nombre del activo).

Después de importar el paquete de activos de muestras de Oracle Content Management, puede empezar a crear el sitio mínimo en React.

Crear su propio modelo de contenido

En lugar de importar el paquete de activos de muestras de Oracle Content Management, también puede crear su propio modelo de contenido.

Para este tutorial, estamos utilizando un tipo de contenido denominado 'MinimalMain' como tipo de contenido principal para este ejemplo. Este tipo de contenido consta de logotipos de cabecera y pie de página, y una lista de páginas que se deben incluir en la navegación.

Para crear tipos de contenido para el modelo de contenido:

1. Conéctese a la interfaz web de Oracle Content Management como administrador.
2. Seleccione Contenido en el menú de navegación izquierdo y, a continuación, seleccione Tipos de activos en la lista de selección de la cabecera de página.
3. Haga clic en Crear en la esquina superior derecha.
4. Seleccione crear un tipo de contenido (no un tipo de activo digital). Repita esta acción para todos los tipos de contenido necesarios.

Crearemos cinco tipos de contenido, cada uno con su propio conjunto de campos:

• MinimalMain
• MinimalPage
• MinimalSection
• PeoplePage
• Persona

El primer tipo de contenido, MinimalMain, debe tener los siguientes campos:

Nombre mostrado	Tipo de campo	necesario	Nombre de Máquina
headerLogo	Campo de medios de un solo valor		headerLogo
footerLogo	Campo de medios de un solo valor		footerLogo
páginas	Campo de referencia de varios valores		Páginas

Este es el aspecto de la definición de tipo de contenido MinimalMain:

El segundo tipo de contenido, MinimalPage, debe tener el siguiente campo:

Nombre mostrado	Tipo de campo	necesario	Nombre de Máquina
secciones	Campo de referencia de varios valores		secciones

Este es el aspecto del tipo de contenido MinimalPage:

El tercer tipo de contenido, MinimalSection, debe tener los siguientes campos:

Nombre mostrado	Tipo de campo	necesario	Nombre de Máquina
tipo	Campo de texto de un solo valor	X	tipo
cabecera	Campo de texto de un solo valor		cabecera
body	Campo de texto grande de valor único		body
imagen	Campo de imagen de valor único		imagen
acciones	Campo de contenido incrustado de un solo valor		acciones

Este es el aspecto del tipo de contenido MinimalSection:

El cuarto tipo de contenido, PeoplePage, debe tener los siguientes campos:

Nombre mostrado	Tipo de campo	necesario	Nombre de Máquina
Anuncio	Campo de referencia de valor único		Anuncio
Personas	Campo de referencia de varios valores		Personas

El quinto y último tipo de contenido, Persona, es un activo digital personalizado con los siguientes campos:

Nombre mostrado	Tipo de campo	necesario	Nombre de Máquina
fullName	Campo de texto de un solo valor	X	fullName
título	Campo de texto de un solo valor		título
biodata	Campo de texto grande de valor único		biodata

Una vez que haya creado los tipos de contenido, puede agregar estos tipos de contenido al repositorio que ha creado anteriormente, OCEMinimalRepository:

1. Conéctese a la interfaz web de Oracle Content Management como administrador.
2. Navegue hasta OCEMinimalRepository.
3. Edite el repositorio y, en Tipos de activos, especifique los cinco tipos de contenido recién creados. Haga clic en el botón Save (Guardar) para guardar los cambios.

Después de agregar los tipos de contenido al repositorio, puede abrir el repositorio OCEMinimalRepository en la página Activos y empezar a crear los elementos de contenido para todos los tipos de contenido.

Tarea 2: Crear el sitio mínimo en React

Para consumir nuestro contenido de Oracle Content Management en una aplicación de React representada en el servidor, podemos utilizar el ejemplo de sitio mínimo de React, que está disponible como repositorio de código abierto en GitHub.

Nota: Recuerde que el uso del ejemplo de React es opcional y lo utilizamos en este tutorial para comenzar rápidamente. También puede crear su propia aplicación de React.

Para construir el sitio mínimo en React:

1. Clonar el repositorio de ejemplo e instalar dependencias
2. Configurar la aplicación React
3. Trabajar con el SDK de Oracle Content Management Content
4. Utilizar el SDK de contenido para recuperar contenido
5. Utilice GraphQL para crear la página de personas

Clonar el repositorio de ejemplo y las dependencias de instalación

El ejemplo de sitio mínimo de React está disponible como repositorio de código abierto en GitHub.

Primero deberá clonar el ejemplo de GitHub en la computadora local y cambiar el directorio a la raíz del repositorio:

git clone https://github.com/oracle/oce-react-minimal-sample.git
cd oce-react-minimal-sample

Ahora que tiene su base de código, necesita descargar dependencias para la aplicación. Ejecute el siguiente comando desde el directorio raíz:

npm install

Configuración de la aplicación React

En este ejemplo de sitio mínimo de React, debe configurar algunos datos para que el SDK de Oracle Content Management Content (y cualquier otra solicitud) pueda dirigir la URL de instancia y la versión de API correctas con el token de canal correcto. Estos valores se utilizan en src/scripts/server-config-utils.js para instanciar un nuevo cliente de entrega.

Esta aplicación utiliza un archivo .env que Webpack lee cuando agrupa las aplicaciones cliente y servidor. Mediante webpack.DefinePlugin, cualquier valor leído del archivo .env se puede poner a disposición de cualquier lugar de la aplicación.

Abra el archivo .env en un editor de texto. Verá lo siguiente:

# The connection details for the Oracle Content Management server to be used for this application
SERVER_URL=https://samples.mycontentdemo.com
API_VERSION=v1.1
CHANNEL_TOKEN=ba0efff9c021422cb134c2fd5daf6015

Cambie cada par clave-valor para que refleje la URL de la instancia, la versión de API a la que desea dirigirse y el token de canal asociado al canal de publicación. El canal de este tutorial es OCEMinimalChannel.

Trabajar con el SDK de Oracle Content Management Content

Oracle Content Management ofrece un SDK para ayudar a detectar y utilizar contenido en sus aplicaciones. El SDK se publica como un módulo de NPM y el proyecto se aloja en GitHub.

Obtenga más información sobre el SDK aquí.

El SDK se ha registrado como una dependencia de tiempo de ejecución de este proyecto en el archivo package.json.

Uso del SDK de contenido para recuperar contenido

Ahora podemos aprovechar el SDK de contenido para recuperar contenido para que podamos presentarlo en nuestra aplicación React.

El SDK de contenido utiliza un objeto DeliveryClient para especificar el punto final. Puede realizar todas las solicitudes con ese objeto de cliente.

La carpeta src/scripts contiene el código para obtener datos de Oracle Content Management mediante el SDK de contenido.

El archivo src/scripts/server-config-utils.js importa el SDK de contenido y, a continuación, crea un cliente de entrega mediante la configuración especificada en .env.

El siguiente comando importa el SDK:

import { createDeliveryClient, createPreviewClient } from '@oracle/content-management-sdk';

El siguiente comando crea el cliente de entrega:

return createDeliveryClient(serverconfig);

El archivo src/scripts/services.js contiene funciones para obtener los datos de esta aplicación mínima de React.

El método fetchOceMinimalMain() recupera el tipo de contenido MinimalMain con un enlace amigable (slug) minimalmain.

export async function fetchOceMinimalMain() {
  const data = await getItem('minimalmaingraphql', 'fields.headerlogo,fields.footerlogo,fields.pages');
  if (!data.hasError) {
    const { fields } = data;
    const { headerlogo, footerlogo } = fields;
    // Extract the sourceset for the headerImage and footerImage and put it back in the data
    data.headerRenditionURLs = getSourceSet(headerlogo);
    data.footerRenditionURLs = getSourceSet(footerlogo);
  }
  return data;
}

Nota: La consulta anterior es para un activo con el enlace amigable "minimalmaingraphql" que incluye la página 'People' del tipo People Page. Para crear el sitio mínimo sin la página "People", se puede utilizar en su lugar un activo con el enlace amigable (slug) "minimalmain" en el paquete de activos.

Para representar las imágenes, services.js proporciona un método auxiliar para recuperar el juego de orígenes de un activo que se crea a partir de las representaciones del activo.

function getSourceSet(asset) {
  const urls = {};
  urls.srcset = '';
  urls.jpgSrcset = '';
  if (asset.fields && asset.fields.renditions) {
    asset.fields.renditions.forEach((rendition) => {
      addRendition(urls, rendition, 'jpg');
      addRendition(urls, rendition, 'webp');
    });
  }
  // add the native rendition to the srcset as well
  urls.srcset += `${asset.fields.native.links[0].href} ${asset.fields.metadata.width}w`;
  urls.native = asset.fields.native.links[0].href;
  urls.width = asset.fields.metadata.width;
  urls.height = asset.fields.metadata.height;
  return urls;
}

El método fetchPage() recupera el tipo de contenido MinimalPage mediante el valor de enlace amigable (slug) para la página obtenida de la consulta anterior.

export async function fetchPage(pageslug) {
  // Get the page details
  const page = await getItem(pageslug, 'fields.sections');
  return page;
}

El método getRenditionURLs() recupera las URL de representación de cualquier imagen que se pueda definir en una sección mediante el ID de esa imagen. Esta llamada se realiza en el cliente.

export function getRenditionURLs(identifier) {
  const client = getClient();
  return client.getItem({
    id: identifier,
    expand: 'fields.renditions',
  }).then((asset) => getSourceSet(asset))
    .catch((error) => logError('Fetching Rendition URLs failed', error));
}

Utilice GraphQL para crear la página Personas

Utilizamos el cliente Apollo en package.json para integrar GraphQL en React y el método fetchPeople en src/scripts/services-graphql.js para realizar la llamada GraphQL al servidor de contenidos.

Para obtener más información sobre cómo incluir el soporte de GraphQL en Oracle Content Management, pruebe el tutorial Uso de GraphQL con React y Oracle Content Management.

Ahora que tenemos nuestra consulta de datos, podemos presentar las respuestas en nuestros componentes de React.

Representación del Cliente frente a la del Servidor

Con la representación del cliente (CSR), el cliente es responsable de crear y representar el contenido de una página web mediante JavaScript. Con la representación del servidor (SSR), la página se crea en el servidor y se devuelve una página web al cliente.

Cuando se solicita la página web del servidor en la representación del cliente, el documento HTML devuelto contiene esqueleto HTML y no contiene contenido real. Contiene una referencia a un paquete JavaScript, que el cliente solicita del servidor. Al recibir este paquete, el cliente ejecuta JavaScript y rellena la página web. Hasta que el cliente haya terminado de ejecutar JavaScript, todo lo que ve el usuario es una página web en blanco. Una desventaja de las aplicaciones representadas por el cliente es que cuando algunos crawlers web indexan el sitio, no hay contenido real que indexar.

Con la representación del servidor (SSR), la página se crea en el servidor y se devuelve una página web al cliente. La ventaja de esto es que los crawlers web pueden indexar el contenido de la página web.

Reaccionar flujo de aplicación de sitio mínimo

El flujo de la aplicación de sitio mínimo de React es el siguiente:

1. El cliente realiza una solicitud al servidor para una ruta determinada.
2. El servidor Express recibe la solicitud.
3. A continuación, el servidor Express realiza las siguientes tareas:
   1. Determina qué componentes se presentarán para la ruta determinada y llama a la función fetchInitialData del componente para obtener todos los datos de ese componente.
   2. Crea una cadena de todo el contenido que se va a presentar. (Se pedirá a cada componente que se presente para producir su marcado HTML).
   3. Crea un documento HTML que contiene los elementos siguientes:
      • Cadena de contenido que se va a presentar
      • Un enlace a una hoja de estilo, si corresponde
      • Una etiqueta de script que contiene el cliente-bundle.js que el cliente necesitará
      • Datos obtenidos de todos los componentes, serializados como JSON
   4. A continuación, el servidor devuelve el HTML al cliente.
4. El cliente recibe el HTML y lo presenta. El usuario verá una página web completamente formada.
5. JavaScript en HTML almacenará los datos en la ventana del explorador web en el cliente.
6. El cliente solicita el archivo cliente-bundle.js del servidor. Después de recibirlo, el cliente ejecuta JavaScript en el paquete.
   • "hidrata" el HTML, agregando en cualquier JavaScript de cliente como listeners de eventos.
   • Cada componente que se representa ve si sus datos se almacenan en la ventana. Si es así, se utilizan esos datos; de lo contrario, el componente obtiene los datos que necesita realizando solicitudes al servidor de Oracle Content Management a través del SDK de contenido.
7. Si el documento HTML contiene una hoja de estilo, el cliente solicita la hoja de estilo.

Al visualizar el origen de la página web, verá todo el contenido en HTML, lo que indica que la página se ha representado en el servidor.

Nota: Esta aplicación de ejemplo obtiene los datos de los componentes raíz y, a continuación, transfiere los datos a cualquier componente secundario que los necesite. Una alternativa es utilizar una herramienta de gestión de estado como Redux, que coloca los datos en un almacén, y cualquier componente puede solicitar los datos de ese almacén.

Servidor Express de Servidor y Presentación

La aplicación de servidor utiliza un servidor Express para recibir la solicitud, generar una instancia de aplicación React, generar la página HTML y devolver la respuesta.

El archivo de servidor Express se encuentra en src/server/server.js.

El servidor de Express acepta todas las solicitudes y utiliza matchPath() de react-router-dom de React para obtener el componente que se representará para la ruta especificada. Esto, a su vez, llamaría al método fetchInitialData de ese componente para obtener los datos de ese componente y devolvería una promesa. Se ejecuta la promesa y se crea un objeto de contexto para contener los datos. A continuación, se llama a un representador para generar la página HTML antes de devolver el contenido HTML al cliente.

server.get('*', (req, res) => {
  // matchRoutes will return all the components which will be rendered as per the request route.
  // call "fetchInitialData" on each of those components (if the component has such a method),
  // and build up an array of pending network calls for all the data required for the components
  // which will be rendered.
  const promises = matchRoutes(Routes, req.path).map(({ route }) => (
    route.fetchInitialData ? route.fetchInitialData(req) : null));

  // Execute all promises at the same time to get all the data, once its all been obtained
  // render the HTML to the client by delgating to the "renderer" method
  Promise.all(promises).then((data) => {
    // this context object gets passed into the renderer, which in turn passes it
    // to the StaticRouter. The StaticRouter passes it to any component which is called
    // as the "staticContext" prop.
    const context = { data };

    // get the content to return to the client
    const content = renderer(req, context);

    // if the route requested was not found, the content object will have its "notFound"
    // property set, therefore we need to change the response code to a 404, not found
    if (context.notFound) {
      res.status(404);
    }

    if (context.url) {
      // If a redirect was set using a Redirect component do that
      res.redirect(301, context.url);
    } else {
      // send the response
      res.send(content);
    }
  });
});

El representador se encuentra en src/server/renderer.jsx y utiliza react-dom/server renderToString() de React para obtener una cadena de todo el contenido que se está presentando.

// generate the HTML content for this application
const content = renderToString(
  <StaticRouter context={context} location={req.path} basename={process.env.BASE_URL}>
    <div>{renderRoutes(Routes)}</div>
  </StaticRouter>,
);

El objeto de contexto transferido al representador se transfiere al enrutador del servidor, StaticRouter. Durante la representación del servidor, cualquier componente puede obtener los datos de las propiedades del componente.

this.props.staticContext.data

El representador devuelve el marcado HTML que contiene el contenido de React, los datos serializados y una referencia al paquete JavaScript que se va a ejecutar en el cliente.

<body>
  <div id="root">${content}</div>
  <script>
    window.INITIAL_DATA = ${serialize(context.data)}
  </script>
  <script src="${clientBundleFile}"></script>
</body>

Cuando el cliente recibe el HTML, los datos estarán disponibles en la ventana y el cliente solicitará el paquete de cliente del servidor.

Representación del Cliente

El código de representación del cliente se encuentra en src/client/main.js. Este código pasa por todo el HTML de la página web, agregando cualquier código JavaScript del cliente.

Este proceso se conoce como hidratado.

ReactDOM.hydrate(
  <BrowserRouter basename={process.env.BASE_URL}>
    <div>{renderRoutes(Routes)}</div>
  </BrowserRouter>,
  document.querySelector('#root'),
);

Componentes de React

React utiliza una tecnología conocida como JSX, que es una extensión de sintaxis similar a HTML para JavaScript, para presentar contenido. Aunque puede escribir JavaScript puro para representar datos de Oracle Content Management, recomendamos que utilice JSX.

La aplicación del sitio mínima desglosa cada página en una serie de componentes más pequeños.

Las siguientes secciones incluyen una visión general de cómo React presenta nuestra aplicación en cada uno de nuestros componentes:

• Variable IS_BROWSER
• Archivo de rutas
• Componente de aplicación
• Componente de Página
• Componentes de cabecera y pie de página
• Componente de sección
• Componente Personas
• Componente de persona
• Componente de error

Variable IS_BROWSER

Webpack se utiliza para agrupar el código de cliente y servidor. Hay un archivo de configuración que indica a Webpack cómo crear cada paquete.

Abra el archivo de configuración para el paquete de cliente, webpack.client.config.js. En la parte inferior del archivo, se establece una variable para indicar que la aplicación se está ejecutando en un explorador.

new webpack.DefinePlugin({
  'process.env.IS_BROWSER': true,
}),

Abra el archivo de configuración para el paquete de servidor, webpack.server.config.js. En la parte inferior del archivo, se establece la misma variable para indicar que la aplicación no se está ejecutando en un explorador. Se puede acceder a la variable IS_BROWSER desde cualquier lugar del código de aplicación React para determinar si la aplicación se está representando en el servidor o en el cliente.

Archivo de rutas

En nuestro sitio, solo proporcionamos dos rutas. '/page/people' se enruta al componente People. El resto de solicitudes se dirigen al componente Page.

Todas las páginas tienen un encabezado, que contiene el logotipo y los enlaces de la compañía, y un pie de página, que contiene un logotipo e iconos de redes sociales.

El archivo src/pages/Routes.js define las rutas de la aplicación. Aquí estamos utilizando el operador de distribución ES6 para las referencias de página de la aplicación. Esto se debe a que las importaciones de estos elementos son objetos que contienen el componente y su función fetchInitialData (si tiene uno), en lugar de solo el componente.

export default [
  {
    ...App,
    routes: [
      {
        ...People,
        path: '/page/people',
        exact: true,
        title: 'People',
      },
      {
        ...Page,
        path: '/page/:slug',
        exact: true,
        title: 'Page',
      },
    ],
  },
];

Componente de aplicación

El componente de aplicación es el componente principal de la aplicación. Ajusta las rutas para que cada ruta de la aplicación obtenga la cabecera y el pie de página.

<div>
  <Header pages={data.fields.pages} headerRenditionURLs={data.headerRenditionURLs} />
  {isRoot ? (
    <Redirect to={{ pathname: `/page/${firstPageSlug}` }} />
  ) : (
    renderRoutes(route.routes)
  )}
  <Footer footerRenditionURLs={footerRenditionURLs} />
</div>

Los componentes para rutas individuales son el componente Page ubicado en el directorio de páginas.

Abra el componente de aplicación, ubicado en src/pages/App.jsx. El componente importa la API para obtener los datos del archivo services.js.

import { fetchOceMinimalMain } from '../scripts/services';

El componente App obtiene los datos necesarios y los transfiere a los componentes Header, Footer y Page.

El constructor comprueba si la aplicación se está ejecutando en el cliente o en el servidor, mediante la variable process.env.IS_BROWSER definida en los archivos de paquetes Webpack. Si el componente se está representando en el cliente, los datos se obtienen de la ventana.

Nota: Cuando se navega por una página mediante el enrutamiento del lado del cliente, no se producirá la representación del lado del servidor. En su lugar, el contenido se representará mediante la representación del cliente. Como resultado, la ventana no contendrá ningún dato y el cliente tendrá que realizar una llamada de servidor para obtenerlo.

Si el componente se presenta en el servidor, los datos se obtienen de this.props.staticContext; es decir, los datos transferidos desde el archivo del servidor Express. Los datos, o los valores por defecto, se almacenan en el estado del componente.

constructor(props) {
  super(props);

  let data;
  if (process.env.IS_BROWSER) {
    data = window.INITIAL_DATA;
    // Do not delete the data yet, as the Page component needs to read from it
  } else {
    const { staticContext } = this.props;
    data = staticContext.data;
  }

  this.state = {
    appData: data,
  };
}

Durante la representación del servidor, se llama a fetchInitialData para obtener los datos del servidor. Devuelve una promesa al código de llamada, el código de Express Server.

function fetchInitialData() {
  return fetchOceMinimalMain();
}

Cuando el componente se representa (consulte el método render()), obtiene todos los datos del estado del componente y los transfiere a la cabecera, los componentes Footer y la ruta de página.

src/pages/App.jsx exporta un objeto que contiene la función fetchInitialData y el componente.

export default {
  fetchInitialData,
  component: App,
};

Componente de Página

El componente Page es responsable de representar todas las secciones definidas para una página.

Abra el componente Page, ubicado en src/pages/Page.jsx.

Se llama a fetchInitialData durante la representación del servidor para obtener los datos del servidor.

function fetchInitialData() {
  const pageslug = req.path.split('/').pop();
  return fetchPage(pageslug);
}

componentDidUpdate comprueba si el nombre de ruta de acceso de ubicación ha cambiado indicando un cambio de navegación y, a continuación, recupera los datos según corresponda.

componentDidUpdate() {
  const { pageSlug } = this.state;
  const { location } = this.props;
  const { pathname } = location;
  const newSlug = pathname.split('/').pop();
  if (pageSlug !== newSlug) {
    this.fetchData(newSlug);
  }
}

En el método render(), puede ver que los datos que se van a representar se obtienen del estado del componente. Estos datos tienen una lista de secciones para que el método render() de los componentes de la página itere a través de la lista y llame al componente Sección para cada sección de la lista.

Al igual que el componente App, el componente Page exporta un objeto que contiene la función fetchInitialData y el componente.

export default {
  fetchInitialData,
  component:  Page,
};

Componentes de cabecera y pie de página

El componente Header, ubicado en src/components/Header.jsx, y el componente Footer, ubicado en src/components/Footer.jsx, simplemente utilizan datos transferidos desde el componente de aplicación. No obtienen datos adicionales del servidor.

Componente de sección

El componente Section, ubicado en src/components/Section.jsx, lo utiliza el componente Page y se utiliza para presentar cualquier elemento de contenido del tipo MinimalSection.

Este componente tiene datos transferidos desde el componente Page y si los datos de la sección tienen una imagen, realiza una llamada de cliente para obtener las URL de representación de la imagen del servidor.

useEffect(() => {
  if (!image || section.RenditionURLs) return;
  getRenditionURLs(image.id).then((urls) => {
    setRenditionURLs(urls);
  }, console.error);
}, [section]);

Componente Personas

El componente People es responsable de representar la página People y se encuentra en src/pages/People.jsx.

Para obtener más información sobre cómo incluir el soporte GraphQL en Oracle Content Management, consulte este tutorial.

Componente de persona

El componente Persona, ubicado en src/components/Person.jsx, es utilizado por el componente Personas y se utiliza para presentar cualquier elemento de contenido del tipo Persona.

Este componente tiene datos transferidos desde el componente People y no necesita realizar llamadas adicionales al servidor.

Componente de error

El componente Error, ubicado en src/components/Error.jsx, lo utilizan los componentes Página y Aplicación. Si se produjeron errores durante la llamada al servidor, los representará.

Tarea 3: Preparación de la aplicación para su despliegue

Ahora que hemos creado nuestro sitio web mínimo de React, necesitamos verlo en un servidor de desarrollo local para poder depurar cualquier problema y obtener una vista previa de la aplicación antes de su puesta en marcha.

Prepare la aplicación para el despliegue en tres pasos:

1. Crear la aplicación mediante Webpack
2. Ejecutar la aplicación mediante el nodo
3. Utilizar scripts para crear y ejecutar la aplicación en desarrollo y producción

Creación de la Aplicación mediante Webpack

Webpack se utiliza para agrupar la aplicación. Crea dos paquetes JavaScript: server-bundle.js, que se ejecuta en el servidor, y client-bundle.js, que se descarga y ejecuta en el cliente.

La aplicación de sitio mínima de React tiene tres archivos de configuración de Webpack:

• webpack.base.config.js se fusiona con las configuraciones de cliente y servidor de Webpack.
• webpack.client.config.js agrupa el código para el cliente.
• webpack.server.config.js agrupa el código para el servidor.

Para crear el paquete de cliente, debe especificar la configuración del paquete web del cliente:

webpack --config webpack.client.config.js

Para crear el paquete de servidores, debe especificar la configuración del paquete web del servidor:

webpack --config webpack.server.config.js

Ejecución de la aplicación mediante el nodo

Una vez creados los paquetes, puede iniciar el servidor ejecutando el siguiente comando:

node server.js

Uso de scripts para crear y ejecutar la aplicación en desarrollo y producción

El archivo package.json ubicado en la raíz del proyecto contiene scripts que facilitan la creación de paquetes y la ejecución de la aplicación.

Desarrollo

Puede utilizar el script de desarrollo durante el desarrollo:

npm run dev

Este script crea los paquetes de cliente y servidor e inicia la aplicación en un servidor local. Webpack comprobará los cambios de código y volverá a crear los paquetes de cliente y servidor si es necesario.

Producción

Para la producción, la secuencia de comandos de creación se utilizaría para crear los paquetes de cliente y servidor:

npm run build

Cuando el script finaliza, la aplicación se puede ejecutar con el siguiente comando:

npm run start

Conclusión

En este tutorial, creamos un sitio mínimo en React, que se puede encontrar en GitHub. Este sitio utiliza Oracle Content Management como CMS sin cabecera. Después de configurar Oracle Content Management con un canal de contenido publicado para el tutorial del sitio mínimo, hemos instalado y ejecutado el sitio React para recuperar el contenido necesario y crear el sitio.

Para obtener más información sobre React, vaya al sitio web de React.

Obtenga información sobre los conceptos importantes de Oracle Content Management en la documentación.

Si desea utilizar GraphQL con React, consulte este tutorial.

Para saber cómo integrar activos de Video Plus en Oracle Content Management con React, consulte este tutorial.

Puede encontrar más ejemplos como este en la página Ejemplos de Oracle Content Management en Oracle Help Center.

---

Título e Información de Copyright

Cree un sitio mínimo en reacción con Oracle Content Management sin supervisión

F38764-05

Diciembre de 2022

Copyright © 2021, 2022, Oracle and/or its affiliates.

Autor Principal: Oracle Corporation